Responsive Design : les bonnes bases à avoir ! #SEO

Bonjour tout le monde !

Aujourd’hui, nous allons parler de SEO technique avec le concept de Responsive Design. En français, on traduit Responsive Design par site web adaptatif. Donc, comme le nom l’indique, l’idée est de faire un site web qui s’adapte à tous les écrans des différents appareils (PC, tablette, portable, etc.).

Personnellement, si on me demande de choisir entre :

• créer un site web mobile (comme m.example .com)

ou

• créer un site en Responsive Design, je réponds le Responsive Design.

Avec le concept de la technique adaptative, je trouve qu’il y a moins de risque de Duplicate Content, et la gestion d’un même site, avec les dernières technologies modernes, est tout de même plus sympathique.

Pour faire un site web adaptatif, on va s’attaquer au CSS (feuille de style pour mettre en forme le code HTML) qui va nous permettre de créer le design que l’on souhaite pour l’interface. Pour que cela soit plus parlant, voici l’idée illustrée du Responsive Design :

Source du gif : Site du zéro

 

Avant de commencer, je vous conseille de prendre les mesures (moyennes) de chaque type d’appareil, et de faire en fonction pour avoir un design de qualité.

1) Pour commencer, faites un design assez simple pour votre site (pas trop de blocs, trop de décoration, etc.) sinon cela pourrait vous compliquer la tâche.

2) Utiliser (bien évidemment !) les media querries. C’est grâce à ces règles @media qu’on arrive à faire « bouger » le site.

Voici un petit extrait du code HTML appellant la feuille de style comportant la règle @media

 

Et la règle @media dans la feuille de style CSS :

 

Il faut également adapter la taille des images, et donc spécifier cela dans le CSS aussi (pour telle taille d’écran, on aura telle taille pour l’image, etc.).

Pour finir, grâce à mon logiciel de veille automatique, j’ai trouvé une infographie réalisée par Splio qui explique bien comment il faudrait procéder pour avoir un site en responsive design qui tient debout :

 

S’il y a une chose que je souhaite renforcer cette année, c’est bien mes connaissances en termes de Responsive Design 🙂

Et vous ? Avez-vous recommandé à vos clients de passer au Responsive Design ?

Bon courage à tous !

Véronique Duong –