Au cours des dernières années, le nombre d’utilisateurs et d’appareils mobiles a augmenté de façon exponentielle. En conséquence, offrir une expérience utilisateur transparente et de haute qualité sur ordinateur de bureau, tablette et mobile est plus important que jamais. La conception Web réactive (RWD) est sans doute l’un des meilleurs moyens de résoudre les problèmes qui surviennent lors de la conception pour plusieurs appareils.
Wikipedia définit RWD comme « une approche de la conception Web visant à créer des sites pour offrir une expérience de visualisation optimale – une lecture et une navigation faciles avec un minimum de redimensionnement, de panoramique et de défilement – sur une large gamme d’appareils ». Pour bien comprendre pourquoi nous avons RWD et pourquoi c’est un gros problème, il est utile de connaître un peu l’histoire qui se cache derrière.
Conception à largeur fixe
Jusqu’à ces dernières années, les sites Web étaient spécialement conçus pour s’adapter à la plupart des écrans de bureau, car l’écrasante majorité des internautes surfaient sur le Web sur des appareils de bureau. La plupart des moniteurs mesuraient 800 ou 1024 pixels de large et, par conséquent, les sites Web ont été conçus pour s’adapter à ces tailles. Cependant, d’autres tailles d’écrans ont fini par inonder le marché, et les concepteurs de sites Web voulaient que leurs sites aient exactement la même apparence, quel que soit l’écran sur lequel les utilisateurs les affichaient.
RWD est la solution moderne aux problèmes de largeur fixe du passé. Peut-être étonnamment, les conceptions à largeur fixe sont encore assez courantes. Au début des années 2000, des termes tels que conception fluide et disposition liquide étaient en quelque sorte des versions primitives de RWD.
La révolution mobile
Les téléphones portables ont acquis la capacité d’accéder à Internet à la fin des années 1990, mais ne pouvaient afficher que des données textuelles de base. Ce n’est qu’au milieu des années 2000, lorsque les smartphones ont été popularisés, que les navigateurs mobiles ont commencé à afficher ce que nous considérons maintenant comme de « vraies » pages Web en utilisant CSS 2 et Javascript.
Pour la première fois, les téléphones portables avaient la possibilité d’afficher des sites Web exactement de la même manière que les ordinateurs de bureau, mais il restait un problème, ils n’étaient pas très navigables pour l’utilisateur. Les utilisateurs mobiles devaient pincer et zoomer pour faire quoi que ce soit et les temps de chargement étaient incroyablement lents, surtout lorsque les smartphones fonctionnaient toujours à la vitesse 3G.
Ethan Marcotte : le parrain de RWD
Les concepteurs et les codeurs Web peuvent ou non connaître le nom d’Ethan Marcotte, l’homme qui a inventé le terme « responsive Web Design » dans un article sur A List Apart. Dans l’article, il décrivait comment le paysage du design changeait rapidement en raison de l’augmentation exponentielle du nombre d’utilisateurs mobiles. Il a ensuite proposé que la seule façon d’avancer était de répondre à ces changements avec un web design-RWD flexible et fluide.
RWD, à la base, combine trois concepts : requêtes multimédias, largeurs flexibles et images flexibles. Sans aller trop loin, il est important de noter qu’aucun de ces concepts n’était nouveau ou révolutionnaire en soi. Cependant, lorsque Marcotte a découvert un moyen de combiner et d’utiliser ces concepts ensemble, RWD tel que nous le connaissons aujourd’hui est né.
Pourquoi RWD est important
Les utilisateurs mobiles prennent le relais, et pour que les entreprises réussissent dans le nouvel espace Internet à prédominance mobile, leurs sites Web doivent être optimisés de manière transparente pour tous les appareils. Les sites Web RWD ont une URL et un ensemble de codes, vous n’avez donc pas besoin de concevoir plusieurs sites Web ou de vous soucier de plusieurs URL ; que l’utilisateur visite un site Web sur une tablette, son smartphone ou un ordinateur portable, il verra le même site. Et le site Web se réorientera et s’organisera automatiquement pour s’adapter à l’écran de l’appareil utilisé pour le visualiser. Avec RWD, votre site Web a le bon design pour chaque appareil. De plus, cela vous fera économiser de l’argent à la fois du point de vue de la conception Web et de l’administration. Vous n’avez besoin de concevoir qu’un seul site Web et vous n’avez besoin d’administrer qu’un seul site Web. Comme si cela n’était pas assez convaincant, RWD produit l’expérience la plus transparente et de haute qualité que vous puissiez offrir aux utilisateurs susceptibles de parcourir votre site Web sur plusieurs appareils. Dans l’ensemble, les points positifs l’emportent largement sur les points négatifs en matière de RWD.
