Le Responsive (Adaptatif en Français) Design expliqué simplement

On dit d’un site Internet qu’il est Responsive ou Adaptatif en Français lorsque ce dernier a la capacité à s’afficher correctement sur n’importe quel terminal de navigation Internet (Tablette, Smartphone ou Ordinateur).

On peut donc définir le Responsive webdesign comme un procédé permettant une adaptation dynamique et en temps réel de l’affichage d’un site Internet unique sur une multitude de tailles d’écran et de résolutions.

Etant une solution permettant d’universaliser un site web unique sans avoir à le dupliquer, le Responsive WebDesign ou RWD est un enjeu majeur pour les entreprises quel qu’en soit la taille ou l’activité, pour peu qu’elles soient soucieuses de leur image et de l’expérience qu’elles offrent à leur clients.

Comment faire un site Responsive ?

Le principe de cette technique de conception de site web repose sur trois piliers :

1-Les requêtes de média,

2-Les grilles fluides

3-Les images flexibles.

Pour ce qui des requêtes de média ce sont les différents éléments en CSS3 permettant une adaptation dynamique du design selon la taille de l’écran correspondante et des spécificités de chaque support employé.

Quant aux grilles fluides, c’est le fait de concevoir une interface comprenant des blocs en unités relatives. Il s’agit donc d’une conception modulaire permettant de jouer sur la composition de la page selon la taille de l’écran. Par ailleurs, il convient de souligner que le même pourcentage d’espace est occupé par ces éléments fluides sur les divers écrans.

Enfin, les images flexibles sont comme leur nom l’indique des images dont la disposition et la taille pourront s’ajuster en fonction de l’écran.

Les avantages du Responsive Design ?

Avant le Responsive Design, l’obtention d’une expérience utilisateur optimale sur différents supports nécessitait la création d’autant de sites que de supports cibles.

En apportant une réponse à cette problématique à travers un seul site « caméléon », l’entreprise n’a plus qu’un seul site à maintenir et à faire évoluer, ce qui représente un gain de ressources important.

Pour les spécialistes du référencement naturel et de la communication, le RWD permet de n’avoir qu’un seul site à optimiser et une seule URL à promouvoir !

Google et le Design Adaptatif

Google représente aujourd’hui plus de 90% du volume des recherches en ligne ! A ce titre, y être présent et bien visible est primordial pour toute entreprise sérieuse.
Alors, même si nous n’aimons pas être sous l’influence d’une seule entreprise dominante, le fait est qu’en matière d’expérience utilisateur, chez Google ils savent de quoi ils parlent. Quand ils disent qu’ils préfèrent un type de site par rapport à un autre … on a intérêt à écouter ! Or, pour le webdesign, ils ont clairement exprimé leur préférence :  un seul site responsive est préférable à plusieurs versions d’un même site adaptées aux différents médias sur lesquels il s’affiche.

Pour être un peu plus technique sur le sujet, Google se réfère à un site responsive web design comme un système où le serveur envoie toujours le même code HTML à tous les appareils connectés et où le CSS (le code qui définit les « l’apparence » des pages) est utilisé pour modifier le rendu de la page selon le type d’appareil. En d’autres mots, Google ne souhaite pas avoir à indexer (stocker, analyser et comprendre) deux sites alors qu’il peut se focaliser sur un seul.

Google préfère les sites « responsive » car cela permet à ses robots de « crawler » plus facilement et rapidement le web, d’indexer et d’organiser tout ce qui est trouvé en ligne. Cela est dû au fait que votre site aura la même URL. Si vous avez des versions différentes de votre site pour mobiles et pour ordinateurs de bureaux, cela se traduit par des URL et du HTML différents pour le même contenu ce qui donne plus de travail et de complication aux robots de Google pour indexer vos contenus, sans parler des risques de contenus dupliqués sur lesquels Google Panda veille.

Les limites du RWD

Les nombreux atouts de cette technique ne sauraient masquer ses limites. En effet, le Responsive impose des contraintes techniques et créatives plus importantes. De plus, il implique une revue en profondeur des expertises et des rôles de l’équipe projet. De manière concrète, le recours à cette méthode suppose des coûts de développement plus importants, des temps de développement plus longs ou une phase de conception plus lourde.

Alors que certaines agences au Maroc et à l’étranger proposent encore le choix entre la réalisation d’un site Internet classique et un site web Responsive, pour nous la question ne se pose plus depuis des années tant Le RWD est une solution optimale et « future proof ».

Nous pensons en effet que les avantages de ce procédé sont très largement supérieurs aux défis tant techniques, qu’ergonomiques ou organisationnels qu’il présente.