Conception webdesign fluide ou responsive

Adapter l’affichage aux dimensions de l’écrans : design fluide ou design responsive.

Le design fluide

Le design fluide est un site qui s’adapte automatiquement au dimension de l’écran.
Le design fluide existe depuis l’invention du web : on définit les dimensions des éléments structurels de la page (grille, colonnes…) proportionnellement à la largeur de l’écran.
Tous vos blocs et éléments sont dimensionnés en unités fluides (pourcentage ou em) et non en pixels rigides.

Design responsive

Le design « responsive » est apparu avec les appareils mobiles et la nécessité d’adapter l’affichage à des écrans très petits.

Difficile à traduire, le design « réactif » ou « adaptatif » consiste à réorganiser la mise en page en fonction de la largeur de l’écran écran. Par exemple, on placera la colonne latérale sous la colonne principale lorsque l’écran devient trop étroit.
antarticstation
colly
blocs

Recommandations Webdesign responsive

1-Identifier des familles de résolutions selon les utilisateurs et contextes visés

2-Concevoir les gabarits

Une fois les groupes d’appareils identifiés, il faut prévoir comment les pages s’agenceront pour chacun d’eux.

Premier conseil : débuter par la version mobile. En se placant dans un premier lieu dans ce contexte, la conception se focalisera sur l’essentiel car il n’y a pas suffisement de place pour le superflux. Les versions plus spacieuses bénéficieront des choix opérées pour la version mobile. Cette philosophie « Mobile First » a été proposée en 2009 par LukeW, expert en conception d’interface.

Il est impératif de concevoir le site avec une grille et des blocs. Cette conception modulaire qui peut s’apparenter à du Lego permet de recomposer la page selon la largeur de l’écran. Le maquettage papier de l’interface ce prête bien à cet exercice : on manipule librement les contenus pour les repositionner ou les laisser de coté.

Les blocs doivent être cohérents en terme de contenu. Cela évitera d’éclater l’information en passant d’un appareil à un autre. Une fois constitués, ces blocs (header, navigation, contenu, fonctions secondaires, barre sociale…) seront déplacés, allégés ou même supprimés selon la résolution.

Voyez comment le site Think Vitamin se recompose entre la version classique et mobile :

vitamin responsive design

La barre d’inscription à la newsletter et la colonne de droite (tags, réseaux sociaux, publicité et recherche) disparaissent, le header se compacte. Néanmoins, les images sont comprimées au lieu d’être redimensionnées, le rendu n’est donc pas très heureux.

La hiérarchie de l’information joue ici un rôle important. Il est nécessaire d’identifier les contenus qui seront prioritaires en fonction des appareils : la barre latérale a-t-elle toujours un rôle sur mobile ? Le header peut-il être minimisé, voire disparaître ? Faut-il mieux arriver sur la page par le contenu et proposer une navigation secondaire en fin de page ? Il ne s’agit pas simplement d’empiler ces boîtes les unes au dessus des autres dans une colonne unique pour les résolutions mobiles, mais d’évaluer la pertinence du contenu en fonction du contexte.

Il peut paraître difficile de faire disparaître des contenus. Pourtant, sur mobile, les utilisateurs n’auront pas le même comportement que sur un ordinateur. Il faut donc se placer dans ce contexte et ne pas vouloir absolument faire entrer trop de choses à l’écran. Par exemple pour le mobile il faut minimiser ou supprimer les blocs purement illustratifs : ils monopolisent l’espace et alourdiront le chargement de la page. Dans cette logique, il faut simplifier la navigation, alléger le contenu, minimiser les images. Le e-reader avec affichage en niveaux de gris doit aussi offrir une restitution convenable du site. Le responsive design doit donc être appliqué dans cette idée.

Voici comment le site information Architects a modifié sa navigation en dessous de 600px :

Sur mobile, la navigation sous forme de menu déroulant exploite la fonctionnalité de sélection de l’appareil, ce qui facilite la sélection.

Une autre composante est à prendre en compte pour les résolutions tablette et mobile : le tactile. Pour ces résolutions (portrait et paysage) le boutons, liens etc. doivent être adaptés en taille et aspect au monde du tactile. L’interface doit inciter au touché. Je vous renvoie vers notre article sur la conception et ergonomie de l’interface pour iPad à propos de ce sujet.

Clean Air Works adapte son menu de navigation sous forme de boutons adaptés au tactile (on regrettera tout de même ce contraste blanc/jaune peu lisible) :

clean works : tactile
Recommandations

Commencer par la version mobile pour se concentrer sur l’essentiel
Concevoir les pages avec une grille et des blocs modulables
Supprimer des blocs selon l’appareil et le contexte induit
Éviter d’alourdir les pages avec des images pour les résolutions mobiles
Reconsidérer la hiérarchisation de l’information selon les gabarits
Adapter les patterns d’interface pour les appareils (mobile/tactile)

Considérations techniques

Même si notre angle de vue est avant tout ergonomique, la technique joue un rôle important dans le responsive design comme pour tout projet informatique.

Le point le plus sensible est souvent celui des images. Il est possible de redimensionner, recadrer ou faire disparaître certaines images en fonctions de la taille du navigateur. Certains scripts (Javascript / PHP) permettent même de charger une image plus ou moins grande en fonction du périphérique utilisé : cela réduit le temps de chargement sur mobile et donc améliore l’expérience utilisateur. Cette technique est cruciale pour les sites à fort contenu visuel. Malgré tout, la question de l’adaptation des images reste un point technique délicat.

Les éléments interactifs ou animés sont ceux qui prendront le plus de temps à s’adapter aux petites résolutions (Javascript) : carrousels, diaporamas, feuilletage tactile… Dans certains cas il sera préférable de les faire disparaître sur mobile.

Pour trouver davantage de précisions sur les aspects techniques du responsive, nous vous invitons à consulter les liens proposés en fin d’article.
Conclusion

Le responsive webdesign est une véritable opportunité pour proposer aux internautes une expérience utilisateur adaptée à leur situation d’usage. Avant de s’y lancer il est important de jauger si le site s’y prête et de prendre en compte la charge supplémentaire d’intégration. Pour les concepteurs le responsive design est une nouvelle opportunité de création et un nouveau chalenge ergonomique.

Nous aborderons le responsive design dans notre formation sur l’ergonomie pour les interfaces mobiles et tactiles. N’hésitez pas à nous contacter pour vous inscrire.

Note : Vous le constatez sûrement, le gabarit de notre blog n’est pas responsive. Il a même tendance à subir quelques altérations sur mobile… Les cordonniers sont toujours les plus mal chaussés. Nous avons comme objectif de refondre le blog en responsive design, mais nos missions pour nos clients passent avant… à suivre !

Une autre composante est à prendre en compte pour les résolutions tablette et mobile : le tactile. Pour ces résolutions (portrait et paysage) le boutons, liens etc. doivent être adaptés en taille et aspect au monde du tactile. L’interface doit inciter au touché.

Billets

Pages

Plugin par dagondesign.com