On compte actuellement près de 1,76 milliard d’utilisateurs de smartphones à travers le monde. D’ici 2018, ils devraient être un milliard de personnes en plus. Les appareils mobiles continuent donc de rencontrer un franc succès et 2014 devrait être la dernière année au cours de laquelle on trouve davantage de connexions Internet depuis des ordinateurs de bureau que depuis des smartphones et tablettes.

Près de trois quarts des Suisses possèdent un smartphone, et la tendance est à la hausse. Un quart des achats en ligne est d’ores et déjà effectué depuis les smartphones et autres appareils mobiles. Pourtant, les opérateurs de sites Internet n’ont pas encore tous réagi à cette tendance: c’est ce que l’on remarque lorsqu’on scanne un code QR figurant sur une annonce, une affiche ou encore une camionnette, et que celui-ci nous amène sur un site Internet qui ne s’affiche pas correctement sur le téléphone mobile. Aujourd’hui, il s’agit donc de créer des sites Internet qui attirent aussi les utilisateurs de smartphones, phablettes et tablettes; c’est-à-dire des sites en responsive design sur lesquels on n’a pas besoin d’agrandir ou de faire défiler l’écran indéfiniment pour en visualiser le contenu.

Qu’est-ce que le responsive design?
En théorie, les utilisateurs peuvent accéder à tous les sites depuis quasiment tous les appareils mobiles. Si ces sites sont adaptatifs, ils s’affichent de manière optimisée sur tous les appareils – sur les smartphones et tablettes, mais aussi sur les ordinateurs portables et les ordinateurs de bureau – car le site consulté s’adapte automatiquement à l’écran de l’appareil, indépendamment de la résolution, de la taille en pixels, de la dimension et de la hiérarchie des pages ou du système d’exploitation utilisé. Le responsive web design (RWD) organise les éléments de manière horizontale et verticale, de façon à ce que leur affichage soit suffisamment grand. Bien évidemment, le responsive design s’adapte également aux périphériques de saisie, donc à la présence d’un clavier ou d’une souris.

Plusieurs voies mènent au bonheur
En plus du responsive design à proprement parler, certains opérateurs recourent à d’autres techniques, telles que des sites Internet mobiles disposant d’une URL propre et spécialement adaptés aux smartphones et tablettes. D’autres préfèrent les sites Internet adaptatifs. Contrairement au RWD, les contenus ne s’adaptent alors pas «intuitivement» aux écrans respectifs, mais sont prédéfinis pour chaque type d’appareil. Le principe qui ressemble le plus au responsive design est celui des sites dits «fluides». La plus grande différence: alors que le responsive design ne diminue la taille des images que jusqu’à un format défini, le site Internet fluide affiche l’image proportionnellement à l’affichage global. Selon les appareils, les images sont ainsi rétrécies au point de devenir méconnaissables.

Le responsive design

Pourquoi ne pas tout simplement créer un site mobile et un site «classique»?
L’exploitation parallèle d’un site Internet mobile et d’un site conventionnel présente certes des avantages. En effet, le design et la mise en page peuvent être précisément ajustés aux différents appareils. Cette différenciation permet de respecter les différents paramètres de navigation sur le site (navigation tactile ou au moyen d’une souris). Pour cela – et en raison des temps de chargement différents – les opérateurs de grands portails tels que les sites d’actualités optent souvent pour cette variante. Néanmoins, la mise à jour et la gestion simultanée de deux sites Internet entraîne des coûts plus élevés, car la mise en page doit sans cesse être adaptée à de nouveaux appareils. Le passage au responsive design suppose plus d’efforts au début mais s’avère plus judicieux sur le long terme. En outre, il entraîne un taux de rebond plus faible et donc un taux de conversion plus élevé, ce qui est particulièrement important dans le cas des boutiques en ligne.

Google adore le responsive design
S’il y a une chose que Google n’apprécie pas, c’est bien le contenu dupliqué, c’est-à-dire un contenu identique sur deux sites Internet avec des URL différentes. Le responsive design permet de remédier à ce problème. Depuis la mise à jour Hummingbird de 2013, Google préfère les sites appliquant le responsive design. Le moteur de recherche s’est d’ailleurs adapté aux particularités de l’utilisation mobile: sur leur smartphone, de nombreux utilisateurs effectuent désormais leur demande de recherche avec la reconnaissance vocale, la plupart du temps avec des phrases entières comme «Où se trouve le meilleur restaurant chinois du coin?». Google s’est préparé au traitement de tels enchaînements de mots-clés, qui ne se sont pas tous pondérés de la même manière. Dans notre exemple, Google fournira dans ses résultats une liste des restaurants chinois ayant obtenu un avis positif. Dans ses consignes aux webmasters, Google recommande expressément l’utilisation du responsive design. Les listes de résultats sont d’ailleurs affichées en conséquence: lors d’une recherche effectuée depuis un appareil mobile, Google adapte les résultats aux besoins des utilisateurs. Ainsi, les sites Internet qui nécessitent l’utilisation de Flash n’y apparaissent même pas. A l’opposé, les sites Internet réalisés en responsive design sont mieux classés. D’ici peu, ils seront même assortis d’un symbole de téléphone mobile pour avertir l’utilisateur que les sites respectifs ont été spécialement conçus pour les appareils mobiles. Il semblerait que Google apprécie particulièrement le RWD: même sur les ordinateurs de bureau, les sites en responsive design sont nettement mieux classés!

Le responsive design: un must bien avant 2015 déjà

Sandro Bertschinger

Sandro pendant longtemps, il a trouvé les ordinateurs relativement ennuyeux. L’élément déclencheur a été une console de jeux, à savoir un Amiga 500. Avec l’arrivée d’Internet et la possibilité de créer des sites Internet «cool», le thème des ordinateurs était plutôt au cœur des préoccupations. En 2001, il a alors croisé par hasard le chemin d’une SSII.

0