Le responsive design. Il va peut-être être grand temps de franciser ce terme ! Donc juste pour se rappeler ce dont il s’agit, voici un extrait de ce qu’on peut lire sur wikipédia

Au terme de Responsive Design, s’ajoute souvent : Mobile First. Si dès le départ, l’on doit penser son site web adaptif, il est de bon ton actuellement de commencer non pas par une version « complète » du projet, mais plutôt de sa version mobile. Pensez à la version « mobile » de votre projet en premier, puis pour les écrans disposant d’une résolution élevé, enrichissez votre page avec des éléments non essentiels à la navigation/action.

D’expérience, je dirais : « Oui ! pensez Mobile First« . La principale raison est que si la version mobile du projet n’est pas anticipée dès le départ (analyse, wireframe, maquette), vous offrirez toujours une version mobile à minima. Pourquoi ? Tout simplement parce que vous feriez disparaître des éléments potentiellement problématique à grands coups de CSS ou de JavaScript (délais de livraison oblige !). Par exemple un carrousel récalcitrant ne voulant pas s’adapter aux différentes résolutions, l’intégration d’un service tiers aux dimensions fixes (Facebook, Twitter, module de paiment …)  ou encore un menu sur 3 niveaux complètement déstructuré au moindre changement d’orientation du terminal. Je ne saurais trop vous conseiller, aujourd’hui, de démarrer tout projet sur le modèle suivant :

1) Si nécessaire

« Responsive design », « Mobile First » : oui, mais que si votre client le veut et en a besoin ! En effet inutile de proposer une version mobile du projet si votre client a besoin d’un site Internet proposant des coloriages à imprimer ou s’il propose des jeux en ligne pour PC.

2) Le temps des zonnings

Lors de définition des Wireframes (si, si, je sais que vous en faites systématiquement), ayez toujours côte à côte un schéma sur une base de résolution de 1024px et un autre de 320px. Attention, n’oubliez pas l’orientation du terminal, pensez-y ! Après avoir défini les grandes fonctionnalités, et déjà à ce stade, évoquez avec votre client l’ergonomie du projet sur les 2 types de résolution. Par exemple, ce diaporama doit-il être avant ou après le texte sur la version mobile ?

Le contenu doit aussi être abordé à ce stade : doit-on avoir les mêmes contenus sur une version mobile que sur la version de bureau ? Le sujet est un vaste débat, Jacobs Nielsen nous invite à séparer clairement un même site qu’il soit destiné à être affiché sur mobile ou sur un écran de bureau : « Good mobile user experience requires a different design than what’s needed to satisfy desktop users. Two designs, two sites, and cross-linking to make it all work. ». Un article paru sur le site de Smashing magazine contre avec efficacité les arguments de Nielsen. Il est évident que je n’aurais pas de réponse ici car tout dépend du projet. Mais il est vital pour le projet d’amorcer cette réflexion avant de passer aux étapes suivantes. Si vous n’avez pas toutes les réponses, vous aurez au moins pointé du doigt les contraintes (nous voulons le diaporama sur la version mobile, mais fixons à 5 visuels maximum, fixons 4 paragraphes par pages et utilisons une pagination si besoin, etc…)

3) La phase de créa : maquettes

Demandez à votre graphiste de travailler selon vos schémas : 2 maquettes en même temps, ainsi il pourra offrir un maximum de cohérence graphique entre les différentes versions. Et surtout insistez auprès de vos graphiste/webdesigner : le design doit pouvoir bouger, s’étirer, être caché entre le shéma 1 de 320px et le second de 1024px et pour le bonheur de ceux qui dispo d’un écran HD, offrez leur encore un peu plus de friandises graphiques !

3′) La phase créa : intégration

« De l’usage d’une bonne grille CSS ». Cette partie devrait quasiment être intégrée dans celle ci-dessus. Il faut que l’intégrateur travaille en étroite relation avec le webdesigner. En effet, qui dit responsive design, dit structure en unité relative (em, pourcentage). L’intégrateur est le seul qui saura dire « Stop » aux folies créatrices du graphiste/webdesigner. Offrir une mise en page capable de passer de 320px à 1024px (pouvant aller jusqu’a 1920px, écran HD) est techniquement complexe. En effet, il s’agit de prendre en compte la gestion des images, du positionnement des éléments, des menus, de la typo, etc… Une grille CSS est un excellent moyen de liaison entre le webdesigner/graphiste et l’intégrateur. Cela oblige le graphiste à aligner les éléments de la maquette sur une grille prédéfinie, ce qui permettra à l’intégrateur une construction HTML/CSS fidèle à la maquette.

Souvent ces grilles sont accompagnées d’autres déclarations CSS utiles, notamment pour l’uniformisation des formulaires, des titres (hn), ou plus globalement d’un « reset CSS » permettant l’uniformisation de l’interprétation qu’on les navigateurs des balises HTML (marges, paddings, font-size,…)

4) Les tests

La partie sans doute la plus délicate. Il est bien loin le temps ou nous devions vérifier le site sur IE et … comment déjà ? ha oui Netscape Aujourd’hui, nous avons Internet Explorer en 4 versions encore utilisées, la 5ème arrive bientôt, Chrome, Firefox, Opéra, Safari et … en gros les mêmes mais pour mobile (donc différent … sic !) et je vous épargne les navigateurs exotiques que vous pouvez trouver dans les PS3, TV, Box etc …

Bref, tester votre site Responsive avec toutes ces contraintes, c’est tout simplement impossible ! Du moins physiquement, heureusement pour nous il existe des émulateurs de la plupart de ces terminaux. Je vous propose ci-dessous quelques outils utiles pour vos tests. Faites bien attention cependant, ces outils ne sont qu’a titre indicatif, débrouillez-vous pour trouver les terminaux sur lesquels vous garantissez un rendu fidèle aux maquettes.

• Outils en ligne
• http://www.responsinator.com/
• http://screenqueri.es/
• http://responsive.victorcoulon.fr/
• Extentions pour navigateurs :
• https://chrome.google.com/webstore/detail/kcemonjjmilbiepahkhanlkddonpjlep?hl=en-US&hc=search&hcp=ext
• Prévu dans la version 15/16 de Firefox, un outil pour tester vos projets Responsive (merci à Paul Rouget )

Conclusion

Pour conclure, nous avons parlé ici des bonnes pratiques à mettre en place pour assurer la conception d’un site web adaptatif, « Responsive » mais nous n’avons évoqué que les terminaux les plus communs. A savoir le smartphones et les ordinateurs de bureau/portable. Je vous invite à lire un excellent article de Fred Cavazza qui nous explique avec brio que les acteurs du web de demain seront ceux qui sauront proposer une offre selon un contexte multi-écran.

Tâchons dès aujourd’hui d’être maître dans la discipline du responsive Design !