L’idée d’écrire ce billet est pour moi l’occasion de faire le point sur les bons usages et les bonnes pratiques du responsive web design, un genre maintenant incontournable dans notre profession de webdesigner. Apparu il y a peu, il est devenu la réponse à la diversité des écrans, mais est-ce une nécessité ? Le temps de réalisation d’un site responsive est chronophage, doit-on systématiquement le proposer à nos clients, quel surcoût est nécessaire. Comment aborder la question du responsive, est-il du ressort uniquement du webdesigner ou une réflexion en amont est-elle nécessaire ?.
Doit-on penser uniquement « responsive » ou « mobile first ». Autant de question qui arrivent à l’heure ou je suis confronté à cette mise en œuvre délicate. Délicate à mettre en œuvre pour servir le plus grand nombre, mais aussi délicate à expliquer aux clients qui ne sont pas aux faites de ces problématiques.

Mais prenons les choses dans l’ordre :

le constat aujourd’hui est le suivant les résolutions des écrans nous demandent de faire le grand écart entre écrans 320 px et 1920px.

Nous connaissons désormais la réponse à cette problématique elle s’appelle : « responsive webdesign » , mais de quoi a t-on besoin exactement, de quelles compétences supplémentaires aux regards de nos connaissances actuelles sur le html et la css.

Premier élément de réponse : de temps, beaucoup de temps. en effet lorsqu’on avait un format standard on s’y tenait, la maquette était finalement figée, restait à régler les problémes d’affichage disparate sur les navigateurs.

Aujourd’hui nous devons tenir compte du faite que les sites n’ont plus de tailles fixes, la largeur relative des sites offrent toute la fluidité opérante pour ces nombreux écrans. Mais si cette solution s’avère séduisante, comment contrôler les différents cas de figures de notre mise en page, les typos, les images… j’ai envie de dire, il n’y a plus de mise en page, en faite si il y en a une, mais on doit la contrôler au niveau des différents « points de rupture » : 320 px, 480 px, 600px, 768 px, 1024px, 1200px…

D’où la nécessité d’implémenter la feuille de style avec les médias queries adhoc. Chaque point de rupture correspondant à une nouvelle mise en page, convoquer une feuille de style sera alors nécessaire, pour maintenir une mise en page harmonieuse, sans quoi les élements du documents se placeront suivant leur position dans le flux, provoquant un résultat pas forcément des plus heureux.

Mais même si cela ne vous fait pas peur, il ne suffit pas d’exceller dans la connaissance des selecteurs CSS et des media-queries, il faudra également connaître la spécificité des navigateurs dans leur version mobile. Donc un surcroit de techniques et de connaissances sera nécéssaire pour arriver à vos fins.

La conclusion rapide de tous cela c’est de se dire plus de temps, plus de compétences, donc in fine le site sera plus cher. Mais alors comment concilier le désir d’être Responsive et de proposer au client un prix qui ne soit pas rédhibitoire. Sur ce point j’ai lu ici et là plusieurs réponses :

• – c’est évidemment plus cher,
• – on propose au client une version mobile moins honéreuse à mettre en oeuvre,
• – c’est une option dans le devis,
• – pour les gros sites on l’intégre automatiquement (comme la climatisation sur les grosses berlines)

mais le web peut-il supporter de voir des sites moins bien lotis que d’autres sous prétexte que leur budget est plus faible ????? Je pense personnellement que cet argument ce défend. Le web est un produit comme un autre.

Une fois cette question financière réglée, il reste maintenant à concevoir notre site, là également un premier écueil se présente. Les agences utilisent en général des outils appelés mockup ou wireframe pour concevoir la navigation et l’arborescence du site. Le squelette du site est ainsi posé sur une page blanche, permet au client d’avoir un site consultable mais vierge de tout graphisme. Seulement jusqu’ici cette maquette fonctionnait de paire avec notre maquette graphique à une certaine résolution.

En conséquence le zoning du site ne devrait-il pas être présenté avec les différents point de rupture 320px, 768px 1200px… ? Mais un site conçu en 1920 px sera t-il user-friendly pour un utilisateur de smartphone, pas gagné d’avance à mon sens il va falloir faire des choix. En effet un site non traduit dans sa conception au format mobile deviendra vite illisble et peu utilisable pour un mobinaute.

Les facteurs mobiles à prendre en compte :

l’utilisation du web sur mobile est avant tout contextuelle (utilisation bureau, mais aussi transport en commun, en marchant…). nécessitant une lecture rapide. Il faut donc repenser toute l’approche de création d’un site Internet.

Le facteur poids est un élément essentiel, les connexions des mobiles (smartphones, tablettes…) ne sont pas celle des desktop, il faut donc alléger le site en allant à l’essentiel de l’information à délivrer.
Il faut également penser à supprimer l’appel des scripts et des médias qui ne sont pas essentiels . Plutôt que de redimensionner à l’échelle 1/10 vos images, pensez à en créer des alternatives. Vous pourrez gagner jusqu’à environ 70% de poids sur les images de cette manière. les images qui se redimensionne consomment de la mémoire et diminuent les performances CPU.

Les mobiles ne connaissent pas le survol appelé roll-over. A l’heure des Menus XXL, il faut faire un choix et s’inspirer des applis mobiles qui ont déjà une antériorité sur les spécifications mobiles et qui tiennent comptent par exemple du faite que la navigation sur smartphone se fait avec le pouce de la main droite pour l’essentiel. La navigation devra donc tenir compte du rayon d’action de votre pouce sur votre écran.

Pour résumé la navigation, l’ergonomie le graphisme, le contenu proposées offriront à la fois une information pertinente aux mobinautes et un confort de lecture malgré le contexte mobile de l’appareil et la situation.

Par rapport à la nécessité d’adapter la navigation je suis assez intéressé par la démarche « mobile first » que propose Luke Wroblewski :
Concevoir d’abord pour mobile permet d’aller à l’essentiel : textes, images, fonctionnalités, design, tout doit aller à l’essentiel, vu le manque d’espace disponible on ne peut pas se permettre d’afficher des éléments qui n’ont pas une réelle importance pour l’objectif du site. Il en résulte un site complètement orienté sur l’action de l’utilisateur.

Pour Wroblewski, ce type de conception est garant d’une bonne expérience utilisateur et permet de réduire les coûts de production : moins de contenu, moins de développement, etc…
cela permet également de proposer des fonctionnalités plus intéressantes : les smartphones / tablettes, etc… GPS, accéléromètre, appareil photo / vidéo, etc…

Le point faible pour moi du responsive webdesign, c’est moins de créativité

Plus on apporte de contraintes de mise en page et de contraintes techniques, plus on réduit sa liberté. Les designs responsive répondent à la nécessité d’une mise en page en grille et si on jette un oeil aux galeries, : tout est assez carré, aligné, étudié pour être redimensionné, faisant fit des grandes images et encore plus rarement de la vidéo ou du rich media.

Les contradictions du web

les sites marchands nous abreuvent de menus XXL et de grandes images de jquery et autres javascripts, des polices exotiques, alors que les mobiles nous imposent la sobriété et que google lui même nous demande de faire un effort pour optimiser le poids de nos sites.

Alors on l’aura compris tiraillé entre toutes ces contraintes, le métier de webdesigner est devenu un casse-tête, pris entre les impératifs de communication et techniques. Au final, j’ai l’impression que c’est la culture des agences qui va décider encore une fois du nouveau paradigme. Comme à l’époque des agences des sites tous flash parce que plus créatifs et les autres agences web qui tenaient compte des impératifs d’accessibilité et de référencement.