Responsive Web Design, mais encore ?

Il est loin le temps où les sites web n’étaient constitués que de pages statiques. Le contenu ne se rafraîchissait pas, et surtout, restait positionné au même endroit, le plus souvent cloué au décor, dans une immense et complexe étagère tabloïd.

Depuis, les CSS sont passés par là et ont apportés un peu de souplesse, parfois liquide, dans nos présentations et les systèmes d’information se sont occupés de personnaliser et rendre nos contenus plus dynamiques.

Nous pouvions alors penser que l’évolution, si d’évolution il s’agit, allait s’arrêter là… mais c’était sans compter sur la partie support, qui ne cesse de se miniaturiser au point de rendre les sites web de plus en plus consultés depuis des périphériques mobiles.

Face à cette multiplicité de contextes et configurations, comment faire en sorte de pouvoir distribuer du contenu, tout en préservant sa lisibilité et sa cohérence ? C’est donc là que le responsive web design prend tout son sens et son utilité.

Que doit-on entendre par RWD ?

Avant de se poser la question du responsive web design, posons-nous la question de la nature de l’outil web que nous mettons en place. S’agit-il d’un site web mobile ou d’une application web ? A ce sujet, voir l’article Web et mobilité. Une fois que nous sommes bien sûr d’être en présence d’un site web, que celui-ci soit applicatif ou non, nous allons pouvoir réfléchir à la manière de le présenter en fonction de son contexte d’utilisation. Bien souvent, nous faisons le raccourci entre trois modes de présentation qui présentent un contenu rigoureusement identique, mais dans une disposition d’affichage différente. Certes, cela peut être une des nombreuses possibilités, mais cela ne doit pas être la seule.

Prenons l’exemple d’un restaurant qui propose un site se voulant responsive. Doit-il présenter le même contenu ? Offrir les mêmes outils si l’expérience utilisateur est vécu depuis un écran 28 pouces, ou en accès rapide depuis un smartphone en mode portrait ? Pas vraiment non ! Et pourtant nous ne pouvons pas pénaliser les utilisateurs de smartphone!

Prenons en compte que il est fort probable que dans un cas, l’utilisateur peut souhaiter voir le cadre du restau, un aperçu de l’ambiance, se préoccuper de la charte qualité sur le respect de la cuisine traditionnelle ou du choix des produits… alors que dans l’autre cas, l’utilisateur souhaite peut être simplement savoir s’il reste des tables à cet instant, ou s’il est possible d’ajouter un couvert à la réservation en cours, d’accéder à un plan du quartier pour trouver un parking à proximité, ou bien encore, la station de métro la plus proche… Bref, on voit bien que l’organisation des contenus peu varier en fonction des contextes de consultation.

Continuons cette exploration sur le même exemple, mais cette fois-ci, imaginons que l’utilisateur se trouve face à un grand écran, consulte un contenu prévu pour présentation sur grand écran, mais que pour des besoins d’espace, cet utilisateur soit amené à réduire considérablement la fenêtre de son navigateur. Le contenu doit-il alors changer de nature, ou simplement de contexte d’affichage ? Quelle différence, en terme de contenu, entre un site qui sera consulté en 300 pixels de large sur un grand écran et le même site, consulté toujours en 300 pixels de large mais depuis un appareil mobile ?

Au travers de cet exemple, on comprend bien que le RWD doit aller bien au-delà de la simple présentation d’un contenu unique sur diverses surfaces d’affichage. Il doit également s’intéresser à la nature même de ce contenu, en fonction du périphérique et du contexte de lecture. Ainsi, ce concept RWD ne s’applique pas uniquement à un changement radical de plateforme, mais également au redimensionnement d’une fenêtre navigateur.

De même, un multitude d’autres paramètres de contexte doivent pouvoir être pris en compte, comme; le niveau de charge de la batterie, le reflet de la lumière, la langue de l’utilisateur pour le sous titrage, les préférences de luminosité, le mode d’impression, un lecteur braille, l’historique de visite….

voir à ce sujet la série d’articles produit sur linkedin

• Why Responsive Websites Are Not Just a Simple Step for Website Construction?
• Why Content Strategy should be part of Responsive Web Design ?
• What is the User Expectations for Your Website?
• Bringing the Content to Design

Le site doit-il être fixe ou liquide ?

En résumant, et en prenant pas mal de raccourcis, nous pourrions dire qu’un site qui s’appuie sur un mode grille, proposera son contenu sur un nombre A de colonnes en mode écran, un nombre B en mode tablette et un nombre C en mode mobile. Par exemple, sur l’interface de test, nous avons opté pour 12 colonnes sur un grand écran, 6 colonnes s’il est consulté depuis une tablette et enfin, 4 colonnes depuis un appareil mobile.

Rien de plus simple à mettre en place : utilisons 4 feuilles de styles CSS, relions-les à notre page HTML au travers de l’utilisation de media queries avec, ou pas, l’utilisation conjointe de respond.js.

• La feuille des déclarations communes aux 4 environnements
• La feuille dédiée aux grands écrans
• La feuille dédiée aux tablettes
• La feuille dédiée aux appareils mobiles

Seulement voilà, nos pages seront de dimensions fixes pour chaque environnement. Certes, elles basculeront d’un état à l’autre à partir de chaque limite définie, mais chaque écran répondra à des dimensions établies et figées. Ethan Marcotte s’est alors emparé de ces techniques et a mis en place un concept liquide sur l’utilisation des grilles. C’est-à-dire que la bascule d’affichage s’opère toujours entre des dimensions définies, mais entre ces valeurs, la largeur du site s’adapte à la largeur disponible de la fenêtre.

Il le démontre au travers de son article Fluid Grids sur A List Apart. Depuis, la profession se partage entre les pour et les contre. Il est vrai, comme dirait la palisse, qu’il faut analyser le pour et le contre, pour chaque site, au cas par cas.

Il ne peut être établi de règles générales et systématiques. Dans un cas, la liquidité des grilles permettra d’éviter les ascenseurs horizontaux, lors du redimensionnement des fenêtres de navigation. Dans d’autres cas, l’aspect fixe des grilles, préservera les précisions typographiques de mise en page, et ce, également lors d’un redimensionnement de fenêtres de navigation.

À vos sites.

Il ne s’agit là que d’une brève introduction généraliste sur le responsive web design. Lors du développement du DVD, Responsive web design avec HTML5 et CSS3, l’ensemble de ces points et bien d’autres, ont été abordés dans le détail, pour mieux en comprendre les interactions, les avantages et les inconvénients. Il aurait été long et fastidieux de reproduire les mêmes explorations au travers de cet article. Mais cela devrait offrir la possibilité de mettre à plat les concepts et les questions à se poser, afin d’orienter le développement et la distribution de contenus, à destination de diverses plateformes.