En poursuivant votre navigation, vous acceptez l'utilisation de cookies nous permettant de vous proposer des offres correspondant à vos centres d'intérêt.
En savoir plus sur l'usage des cookies…   x Fermer
home Orsys digital > Article

Responsive Design : les bonnes pratiques à mettre en œuvre


Responsive Design : les bonnes pratiques à mettre en œuvre
Ça y est, les courbes se sont croisées. Selon la dernière étude Médiamétrie publiée en octobre 2015, les Français surfent désormais davantage sur leurs terminaux mobiles que sur leur ordinateur fixe. Encore faut-il qu’ils puissent consulter leurs sites préférés dans les meilleures conditions.

C’est tout le sens du responsive design qui consiste à offrir le meilleur confort visuel quel que soit le terminal : Smartphone, phablette, tablette voire montre connectée. Le contenu du site s’adapte automatiquement à la largeur et à la hauteur de l’écran. Les colonnes s’ajustent, les images se redimensionnent et se replacent…

Consultant-formateur en technologies Web, Stéphane Brunet* observe depuis deux ans un réel engouement pour le Responsive Design au détriment des sites mobiles. « La même page Web va s’afficher sur les différentes interfaces. Ce qui facilite les mises à jour et les données sont stockées au même endroit. Alors qu’avec un site mobile, on présupposait qu’il était en situation de mobilité, là, plus besoin de prédire les besoins de l’utilisateur en fonction du terminal. »

Le Responsive Design gagne aussi les intranets

Le Responsive Design qui était, originellement, surtout réservé aux sites grand public perce aussi en environnement BtoB. « L’intranet a longtemps était le parent pauvre en termes d’ergonomie. Pourtant, les collaborateurs le consultent de plus en plus sur leur tablette avec l’essor du BYOD. » Pour Stéphane Brunet, le passage au Responsive Design est moins un projet technique – « il existe des outils simples pour faire des choses propres » – que stratégique. « Les entreprises en profitent souvent pour réorganiser leur site, repenser la circulation information dans une logique « mobile first ». » Le résultat visuel n’est toutefois pas à la hauteur. Il déplore l’uniformisation des sites en responsive design. « 80 % des sites se présentent avec une menu « hamburger » en trois couches. Et toujours ces liens soulignés et ces fonds jaunasses ».

Stéphane Brunet appelle les graphistes, les Web Designers et autres ergonomes à prêter main forte aux développeurs. « Des contraintes inhérentes au Responsive Design peuvent naître des trésors de créativité ». Et de citer, en exemples, les sites de Codrops et de The New Code.

Responsive Design : les bonnes pratiques à mettre en œuvre

Sur son canapé ou dans la rue, l’expérience du mobinaute diffère

Toute la difficulté consiste à se projeter dans l’utilisation qui sera faite du site. Quels contenus donner à voir en premier sur un Smartphone ? Quels éléments supplémentaires afficher avec un écran plus grand ? Une fois ces choix arrêtés, on va indiquer dans les feuilles de styles (CSS) les points de rupture. A partir de quelle largeur de l’écran, j’organise mon site différemment ?

« Sur un Smartphone, un menu ne peut prendre les trois-quarts de l’écran. Le contenu va primer », précise Stéphane Brunet. D’autres éléments peuvent modifier l’affichage. « Si la géolocalisation indique que l’utilisateur est proche de mon magasin, on mettra en avant le plan d’accès. » L’objectif étant de répondre aux attentes du mobinaute à un instant T. Qu’il soit dans la rue, dans le train ou sur son canapé, son expérience utilisateur va différer. Alors que par le passé, tout le monde surfait dans des conditions assez similaires, sur un PC ou un Mac avec un écran convenable, il faut avec le Web mobile tenir compte de l’OS, du navigateur et du débit (d’Edge à 4G+, la différence est notable).

« En France, avec nos très bons réseaux, nous ne sommes pas habitués à la frugalité. Le Responsive Design permet de réfléchir à l’optimisation du temps de chargement des pages Web, en insérant, par exemple, des images pas plus lourdes que nécessaire. » Côté innovations, le format d’image vectoriel SVG, adaptable à l’écran, ou HTLM5 qui intègre un certain nombre d’objets en natif comme la géolocalisation vont dans le bon sens. Des frameworks comme Bootstrap ou Foundation 5 facilitent aussi la donne en rassemblant une collection d’outils pour la création de pages Web « up to date ».

* Stéphane Brunet
Christophe LEGRENZI
Il est consultant sur les outils de développement Web et formateur indépendant. Il partage son temps entre la formation sur le thème de l’utilisation du Web comme outil de travail et la direction de projets de création d’intranets d’extranets sur un mode CMS.

Article précédent

Pourquoi et comment intégrer le digital dans la formation ?
Impression,Print FACEBOOK Présentation du centre de formation Orsys
 
triangle