On parle de plus en plus de "responsive design" dans le domaine de la création de site web. Ce concept, qui permet de créer un seul site qui s'adapte à tous les terminaux (PC, tablettes, smartphones...) est encouragé par Google. Qu'est-ce que le responsive design ? Pourquoi a-t-il les faveurs de Google ? Comment l'intégrer sur son site et quels sont les avantages SEO que l'on peut en tirer ? Réponses......

Cet article fait partie de la Lettre Réacteur #146 du mois de mars 2013

Début de l'article :

Dans le courant de l'année 2012, les équipes de Google ont fait savoir que le « responsive design » était la solution recommandée pour référencer un site Internet pour les appareils mobiles, et par conséquent, pour tout type d'appareil puisque ce type design va s'adapter au périphérique (voir source plus loin dans l'article)...

Mais pourquoi cette décision ? En quoi consiste cette manière de concevoir un site Internet ? Et surtout, existe t-il des règles spécifiques pour l'intégration de vos contenus permettant de favoriser votre référencement naturel ?

Autant de questions auxquelles nous allons tenter de répondre dans cet article...

Le responsive design, c'est quoi ?

Cela fait quelques années déjà que les graphistes et intégrateurs entendent parler de cette nouvelle manière de concevoir un site Internet. Le concept est simple : le responsive design consiste en une charte graphique et un contenu qui s'adaptent automatiquement aux dimensions de l'appareil utilisé par l'internaute.

En d'autres termes, votre design va se modifier de manière dynamique en fonction du périphérique utilisé par l'utilisateur, à savoir un PC, une tablette, un smartphone, une console portable, ... Et ce design s'adapte également aux changement apportés sur un même appareil, par exemple quand vous redimensionnez la fenêtre de votre navigateur sur PC ou quand vous pivotez votre tablette ou votre téléphone pour basculer le mode d'affichage en paysage ou portrait.

Voici un exemple concret de variations d'un responsive design sur le site Digital Happy (http://www.digitalhappy.com/) :
...


Fichier PDF téléchargeable ici (la lettre Réacteur n'était à cette époque-là disponible que sous cette forme).