FICHES PRATIQUES

Améliorer l’ergonomie mobile de son site grâce au responsive design

Depuis le 21 avril 2015, Google a décidé de déclasser les pages web qu’il ne considère pas « mobile friendly » sur les recherches effectuées depuis un téléphone1. Les sites ne répondant pas à ses critères d’ergonomie verront progressivement leur positionnement dégradé sur le mobile.

Moins onéreuse qu’un site mobile, cette technique consiste à adapter la présentation d’un site en fonction de la taille de l’écran du terminal utilisé par l’internaute : ordinateur de bureau ou ultraportable, tablette (en mode portrait ou paysage), grand ou petit smartphone. Le texte, les images, le graphisme… Tous les éléments peuvent être déplacés, diminués, agrandis,ajoutés ou supprimés pour assurer rendre le site utilisable sur n’importe quel support.

QU'EST-CE-QUE LE RESPONSIVE DESIGN

PRINCIPE DE FONCTIONNEMENT
Le responsive design utilise une technologie appelée « CSS3 Media Queries » qui repose sur trois composantes : des règles, une grille fluide et des images flexibles. 
Les règles
Le responsive design s’appuie sur des règles définies au moment du développement du site. C’est principalement la largeur de l’écran utilisé qui détermine le rendu visuel d’un site. Ces règles permettent une infinité de variations : apparition, disparition, redimensionnement d’un bloc, d’une image, de tout ou partie d’un texte. Les polices de caractères pourront également changer de couleur ou de style (gras, italique…).


Les grilles fluides
La maquette d’un site en responsive design est construite à partir de blocs dont la largeur n’est pas définie en nombre de pixels mais en pourcentage. Ainsi si un bloc fait 50% de la page, il sera automatiquement redimensionné par rapport à la largeur de l’écran.
Flexibilité des images
Les images sont également redimensionnées selon une valeur relative afin d’éviter de déborder de l’écran ou d’être déformées. Parfois elles sont simplement supprimées pour ne pas alourdir l’ensemble.
Remarque
Les techniques du responsive design s’appliquent également aux gabarits de newsletter et d’emailings. L’enjeu est important car la consultation de la messagerie se fait de plus en plus sur des terminaux mobiles. Aux Etats-Unis, ceux-ci ont même dépassé l’ordinateur pour la lecture des emails.

AVANTAGES
Dompter le volume croissant de résolutions
L’arrivée des smartphones, des ordinateurs ultraportables, des tablettes puis des phablettes2 a considérablement diversifié les tailles d’écran des terminaux mobiles. Si vous avez implanté Google Analytics dans votre site, Il suffit de consulter sur Google Analytics (Audience > Mobiles > Appareils) la liste des appareils utilisés pour naviguer sur un site pour se rendre compte de la variété des terminaux mobiles. Le responsive design offre une solution multi-écrans et permet donc avec un seul site de toucher une large audience.

Choisir la solution la moins onéreuse pour être « mobile friendly »
Le développement d’un site mobile ou d’une application coûte beaucoup plus cher qu’un site en responsive design. Celui-ci présente aussi l’avantage de limiter les coûts de maintenance à un seul site.

Avoir une adresse et un contenu unique
A la différence du site mobile, la version en responsive design permet de conserver la même URL. L’adresse unique a un double intérêt : un meilleur référencement car le contenu n’est pas dupliqué et une communication externe simplifiée voire une mise à jour des contenus, simplifiés. Même s’il ne fait pas partie des critères déterminant le positionnement sur Google mobile, le RWD reste toutefois vivement recommandé par le moteur de recherche.
CONCEPTION D'UN SITE EN RESPONSIVE WEB DESIGN (RWD)
L’approche « Mobile first »
Il s’agit de penser d’abord le design du site sur la taille d’écran la plus petite. Des éléments sont ensuite ajoutés à cette maquette pour créer les deux ou trois autres versions correspondant aux résolutions supérieures.

Grâce à cette technique, les navigateurs mobiles peu puissants récupèrent uniquement les éléments nécessaires. Si, au contraire, la version pour ordinateur (desktop) est créée en premier, les navigateurs mobiles récupèrent l’ensemble des règles puis suppriment et adaptent les éléments. Ce traitement risque ainsi de ralentir le chargement du site, d’autant plus si l’utilisateur ne bénéficie pas d’une bonne connexion Internet.

Repenser le contenu mobile
La création de la maquette mobile doit correspondre aux besoins et aux habitudes d’utilisation d’un smartphone. Il est parfois nécessaire de repenser le contenu éditorial en se demandant dans quelles circonstances un utilisateur pourrait consulter le site.

Concilier les critères de Google et des internautes mobiles
Selon Google, une page web compatible avec une visualisation mobile doit présenter un contenu ajusté à la taille de l’écran sans besoin de défilement horizontal ou de zoom. La taille des polices doit être suffisamment grande et les liens facilement cliquables. Parfois, le rendu d’une page peut être visuellement acceptable mais ne pas satisfaire Google, par exemple lorsque deux gros boutons sont trop rapprochés l’un de l’autre. À l’inverse, un contenu peut répondre aux critères d’ergonomie de Google mais poser problème au niveau du rendu visuel. Les pages du site sur la version mobile doivent à la fois séduire Google et les utilisateurs.
REMARQUE
Google met à disposition un test de compatibilité en ligne permettant de savoir si une page est selon lui « mobile friendly »3. Des sites tels que emulateurmobile.com et les extensions de plusieurs navigateurs permettent quant à eux de tester le rendu d’un site sur plusieurs types de résolutions d’écran.

LIMITE DU RESPONSIVE DESIGN

TEMPS DE DÉVELOPPEMENT
Un site en responsive design est plus long à être développé qu’un site classique compte tenu des différentes versions à créer. Il faut compter 20% à 25% de temps supplémentaire.

www.google.com/webmasters/tools/mobile-friendly
BUDGET
Le temps de développement étant plus long, le budget est logiquement plus important que pour un projet classique. Le surcoût lié au responsive design varie entre 20 et 40% du budget du site.
TEMPS DE TÉLÉCHARGEMENT
Il peut être plus long, notamment dans le cas de la version mobile, si aucun ajustement technique n’est fait. Les navigateurs doivent en effet réceptionner les règles et les traiter avant d’afficher le site.
COMPATIBILITÉ AVEC LES NAVIGATEURS
Sur ordinateur ou mobile, les navigateurs ne gèrent pas les « Media Queries » de la même façon. Des moyens existent pour contourner le problème mais nécessitent un travail supplémentaire de la part du développeur.

LES ALTERNATIVES

LE SITE MOBILE
Il s’agit en fait d’un deuxième site dédié à la version mobile dont l’adresse est souvent m.adressedusite.fr. Le coût de développement et de maintenance étant bien supérieur au responsive design, il est de moins en moins utilisé. En tant que deuxième site, il crée également un contenu dupliqué préjudiciable au référencement du site principal.

Néanmoins, le site mobile permet davantage de créativité dans la conception du site. Il n’est pas bridé par la nécessité d’être compatible avec des versions adaptées à de plus grandes résolutions d’écran.

C’est pourquoi certains gros sites de e-commerce continuent à maintenir leur site mobile. Dans certains cas, la création d’un site en responsive se révèle un véritable casse-tête.
LE SITE EN ADAPTATIVE DESIGN
L’adaptive design consiste à créer plusieurs versions d’un même site mais sur des tailles d’écran précises qui correspondent en général à celles des appareils les plus utilisés.

Cette technique permet de créer une ergonomie exploitant pleinement les capacités de chaque type de résolution en gérant au mieux l’interprétation des règles par les navigateurs. Au final, le rendu visuel est plus harmonieux que sur un site en responsive.

Par exemple, les appareils utilisant iOS (iPhone, iPad…) ne permettant pas de gérer la technologie Flash, un site en responsive va créer une règle pour ne pas faire apparaître de Flash aux utilisateurs de produits Apple. Un site en adaptive design sera capable de remplacer le flash par une autre technologie adaptée au cas des appareils sous iOS.

Cette solution s’avère donc plus « propre » que le responsive design sans les inconvénients du site mobile. L’adaptive design demeure cependant bien plus onéreux car les coûts de développement et de maintenance sont multipliés par le nombre de versions créées. Aujourd’hui, seuls de très gros sites comme Amazon (qui a fait développer une quarantaine de versions de son site) ou des marques prestigieuses peuvent se permettre une telle dépense.
REMARQUE
L’application native ne présente pas une vraie alternative au responsive design. Elle sert davantage à rendre un service en exploitant les fonctionnalités particulières d’un smartphone ou d’une tablette (GPS, appareil photo, appel…).

CONCLUSION

Il peut être intéressant en premier lieu de regarder dans l’outil d’analyse de trafic du site la part de visiteurs utilisant un smartphone. Ce chiffre permettra de savoir si l’amélioration de l’ergonomie mobile est une priorité.

Si une refonte de site est envisagée à court terme, il est conseillé d’intégrer le responsive design au Projet, voire même de concevoir les premières maquettes du site depuis une vue « mobile », et de faire évoluer l’interface vers une seconde maquette « ordinateur ». Par ailleurs, il est préférable de repartir de zéro plutôt que d’adapter la maquette actuelle.

Source: Espace Numérique Entreprises (ENE)

Autres fiches  :
gtag('js', new Date()); gtag('config', ' UA-108352533-1');