Utilisation du Responsive Web Design

Si ce nom de « Responsive Web Design » ne vous dit rien, c’est parce qu’il s’agit du genre d’innovation à rentrer discrètement dans votre quotidien mais à devenir très rapidement indispensable !

Le Responsive Web Design est aujourd’hui le système qui permet à des sites Internet d’être consultables partout, sur tous types de machines, dans un confort de lecture et de navigation inégalé.

Qu’est-ce que le Responsive Web Design ?

Pour comprendre cette notion de Responsive Web Design (ou « site web adaptatif » en français) Josh Clark propose l’analogie de l’eau. Cette image peut surprendre mais elle a l’avantage d’être claire.

Empruntant la formule à Bruce Lee (là, on ne rigole plus !), Josh nous dit que : « le contenu est comme l’eau ».

« Vous versez l’eau dans une tasse, elle devient la tasse.
vous versez l’eau dans une bouteille, elle devient la bouteille.
vous la versez dans une théière, elle devient la théière. »

C’est exactement le même principe pour le Responsive Web Design : les différents supports modèlent le contenu. Celui ci s’adapte parfaitement à différents terminaux en conservant sa nature : le message contenu dans les textes est le même ; les fonctionnalités, boutons et plug-ins aussi.

Opter pour le Responsive Web Design, c’est créer un site unique pour répondre aux demandes d’élasticité imposées par les différents supports numériques. On évite ainsi de créer une multitude de sites différents : un pour chaque support (car dans ce cas, bonjour le budget web !)

Pourquoi est-ce important ?

Aujourd’hui, on ne consulte plus Internet qu’avec son ordinateur chez soi. Dans le bus ou le métro, vous avez dû voir toutes ces personnes le nez collé à leur smartphone : c’est significatif d’une tendance que nous ne pouvons plus nier aujourd’hui. C’est la multiplication des supports numériques : à titre d’exemple, 425 millions d'utilisateurs de Facebook (sur plus d’un milliard) accèdent quotidiennement au réseau social via leur smartphone. Heureusement pour eux que le site de Facebook s’adapte à tous les formats numériques.

Vous l’aurez compris, se priver d’un Responsive Web Design, c’est donc définitivement tourner le dos aux utilisateurs de l’ensemble des autres formats numériques. Et si vous croyez que les internautes ne sont pas à ça près et qu’il importe peu pour eux de se trouver sur un site non adapté, détrompez vous !

N’oubliez pas que sur Internet, la concurrence n’est qu’à un clic de vous, alors autant tout faire pour conserver l’internaute sur votre site.

Responsive Design : quels types d’écrans ?

Si vous doutez encore de la multiplication des supports de lecture, prenons quelques exemples de différents terminaux de lecture :

• Grands écrans d’ordinateurs fixes (type IMac) ;
• Petits écrans d’ordinateurs, souvent portables (type MacBook Air) ;
• Smartphones et là encore les écrans diffèrent entre un Iphone, un Androïd, etc ;
• Les tablettes numériques et les différents modèles ;
• Tous les objets connectés : télévision, Google Glass prochainement, etc.

La liste exhaustive est bien plus longue et elle s’accroit de jour en jour !

Exemples :

Ce site vous offre 30 exemples de sites web responsive : n’hésitez pas à les consulter sur différents terminaux afin de bien vous faire votre opinion. Voici quelques sites assez représentatifs :

www.colly.com

anderssonwise.com

webdagene.no

Les avantages du Responsive Web Design

1. Fluidité de lecture et de navigation sur n’importe quel support comme je l’ai décrit plus haut. L’œil de l’internaute est guidé sur le plus important et cela dans tous les cas  ;
2. Peu de maintenance : une fois mis en place, le responsive web design met de côté tous les problèmes liés à la redirection des liens par exemple. Peu de maintenance signifie un tarif mensuel moindre auprès du concepteur de votre site internet ;
3. Contenu unique : pas de duplications à faire, pas de sites similaires à créer : un seul suffit et l’ensemble du contenu sera repris sur tous les supports. Cela aide considérablement le référencement de votre site en place.
4. Cohérence et continuité de l’image de marque : qu’importe le support, l’internaute aura la même expérience face à votre société : dans sa tête, cela forme un tout, uni et harmonieux.

Les limites au Responsive Web Design

1. Phases de création et de conception plus longues et plus complexes, et donc souvent plus coûteuses. C’est le revers de la médaille : il est vrai que le Responsive Web Design demande beaucoup plus de travail aux concepteurs du site internet : il faut définir comment couper et élargir les textes, les images, le fond d’écran, etc ;
2. Temps de chargement des pages plus long que pour un site classique ; ceci dû à l’obligation pour le terminal de l’internaute de télécharger un code HTML/CSS. Une gestion fine des images responsives peut alors pallier ce défaut, comme l’explique cet article très détaillé. Le temps de téléchargement allongé est surtout causé par l’adaptation des éléments sur le vif à la taille du terminal utilisé. C’est le prix à payer.

Mon avis sur le Responsive Web Design

Le Responsive Web Design représente aujourd’hui une avancée majeure dans l’utilisation quotidienne que nous avons d’Internet. C’est à mon sens un outil pratique qui deviendra rapidement incontournable aux yeux de tous les internautes.

Pour ceux qui arguent encore que la création d’un site web responsive est bien plus longue et plus dure qu’un site classique, sachez qu’il existe des services proposant sur Internet des templates de site déjà préparés : la plupart d’entre eux étant responsives. Alors ? Plus d’excuses !

Crédit photographique : Content is Like Water By Stéphanie Walter [CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons