2 ou 3 choses sur le responsive design

Cela fait maintenant 2 ans qu’est paru le livre « Responsive web design » d’Ethan Marcotte. 2 ans durant lesquels, à chaque fois qu’il s’agit de créer ou de refondre un site, il est dès le départ question de cette technique de conception, qu’on l’applique ensuite ou non.

Aujourd’hui, cela reste toujours d’actualité de rappeler, en quelques mots, ce qu’est le responsive web design (RWD). Dans un article à suivre, nous tenterons de voir pourquoi l’utiliser ou non, suivant les projets.

Le RWD est une technique de conception de site qui permet d’offrir au visiteur une expérience optimale, quelque soit le support utilisé (laptops, desktops, smartphones, tablettes, etc.).

La navigation, la mise en page, les contenus et le chargement des pages sont adaptés au device.

Pour vous en rendre compte, réduisez simplement la largeur de la fenêtre de votre navigateur. Ce blog étant responsive, remarquez 2 choses :

– d’une part, les dimensions des éléments de la page (images, bloc texte, etc) sont fluides et s’adaptent à la largeur de votre fenêtre. On parle alors de « flexibilité ».

– d’autre part, la mise en page en elle-même change : relégation des éléments de la colonne de droite en bas de page, comportement du menu, position différente du champ de recherche… Des règles de mise en page sont établies suivant des largeurs que vous avez prédéfinies. On parle alors de « points de bascule » ou « point de rupture ». Par exemple, en dessous de 500 pixels de largeur, la mise en page sera adaptée au mobile.

Pour en savoir tout de même un peu plus, lisez l’entretien ci-dessous, où il sera question de grille fluide, CSS3, mediaqueries…

Janik, Directeur Artistique & Thomas, Développeur Web : retour d’expérience vu de l’intérieur.

1. En comparaison d’un projet web « classique », quelle incidence le Responsive Design a-t-il sur un projet web (délai-organisation-wireframe-design-dev)?

Concevoir un site RWD implique des modifications dans ses habitudes de travail. A contrario d’un device « desktop », les supports mobiles offrent un espace visuel beaucoup plus restreint d’où la nécessité de prioriser et de hiérarchiser les contenus pour les gérer de la manière la plus adaptative possible. Le contenu influence la manière de concevoir un site et on est souvent amené à faire des concessions entre le contenu éditorial, les images, les fonctionnalités…

Quand il faut penser au design d’un site RWD, il faut réfléchir à la compatibilité et à l’adaptabilité de celui-ci sur un large panel de devices traditionnels (desktop, ordi portable, netbooks..) et mobiles (smartphones, tablettes…) voir plus. Il est quasiment impossible de prévoir comment le contenu, l’ interface ainsi que les éléments graphiques d’un site vont se comporter d’un device à l’autre. Du coup, la phase de prototypage est une partie clé lors de la conception d’un site RWD. Il faut tester et voir si tout marche correctement avant de se lancer dans le design et le développement du projet.

Une des autres problématiques que nous rencontrons est la gestion des images sur les écrans à haute définition ( Retina chez Apple, XHDPi chez Google). Sur ces écrans la résolution est multiplié par 3 voir 4. Il existe cependant plusieurs techniques pour contourner ce problème mais cela implique d’y avoir réfléchi en amont et entraîne une charge de travail supplémentaire en design et en dev. En bref, concevoir un site web responsive ne rime pas forcément avec gain de temps.

Les + du RWD

L’accessibilité : le site dispose d’une URL unique quelle que soit la plateforme utilisée.
Une expérience utilisateur de qualité, l’ergonomie ayant été pensée pour toutes les plateformes.
Une visibilité accrue : un gros avantage pour le client en terme de trafic puisque son site est visible partout et n’importe quand.

Les – du RWD

Un coût de production élevé : par rapport à un site classique, mettre en place un site RWD requiert un temps de conception plus important.
Une phase de développement plus longue.
Penser le contenu : la nature et la quantité du contenu du site doit être optimisé sur plusieurs plateformes, ce qui oblige souvent à faire des concessions.

2. Peux-tu nous en dire plus sur l’utilisation des MEDIAQUERIES en RWD ?

Les Media Queries sont apparus en 2012, c’est un module implémenté au CSS3 qui définit les techniques pour l’application de feuilles de styles en fonction des périphériques de consultation utilisés pour du HTML. En résumé, les Media Queries sont la base de ce que l’on appelle RWD. L’intérêt des Media Queries réside dans la possibilité d’améliorer l’ergonomie, l’utilisabilité et l’apparence graphique d’un site web tout en tenant compte des contraintes des différents devices.
Par exemple, sur mobile il est possible d’agrandir la taille du texte, modifier l’organisation du contenu sur une ou plusieurs colonnes, masquer afficher des éléments spécifiques, ajuster les marges, gérer le contenu en fonction de l’orientation, etc …

3. Quelles ont été les difficultés rencontrées lors du dev des projets RWD ?

Comme indiqué plus haut, concevoir un site RWD nécessite un changement dans les habitudes de travail, il en va de même au niveau de l’intégration. S’il en est une, c’est ici que réside la difficulté.

Il faut en effet trouver (recherche), appliquer (expérimentation) et se familiariser (pratique) avec de nouvelles « best practices » : gestion du Retina, travailler en % au niveau du css, correctement utiliser les mediaqueries, la meta viewport, la détection de device, etc.

Quand on est en « full » RWD (entendons par là le RWD visible au resize sur desktop), si des contenus sont différents ou organisés autrement, il faut gérer des injections en Ajax.

Enfin, il faut tester, beaucoup tester, sur le maximum de configurations possible (soit une multitude de combinaisons device/version/os/navigateur).

4. Peux-tu nous en dire plus sur la méthode du « mobile first » ?

« Mobile First » est un terme créé par Luke Wroblewski. Comme son nom l’indique Le Mobile First est considéré comme un mode de pensée qui consiste à privilégier le suppport mobile dans la phase de conception d’un projet RWD. Il s’agit de prioriser l’interface mobile par rapport au support traditionnel desktop dans le but d’améliorer l’expérience utilisateur.

Cette méthode a de nombreux avantages. Elle permet de cibler un maximum d’utilisateur sachant qu’environ 80% de la population possède un terminal mobile. De plus, cela oblige les designers à se focaliser sur les éléments importants tels que le contenu et les fonctionnalités du site. Pour finir cela permet de tirer pleinement profit de la technologie mobile.

5. Quelques outils pour des projets RWD ? (Gridpak)

On peut trouver pas mal de framework et de grilles utiles pour des projets RWD. N’hésitez pas à en tester plusieurs avant de faire votre choix. En voilà une liste non exhaustive :

6. As-tu 2 ou 3 ouvrages de référence sur le sujet ?

« Mobile First » par Luke Wroblewski

« Responsive Web Design » par Ethan Marcotte

Retour