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 :

Site web adaptatif - Responsive Design - AUTOVEILLE

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

Code HTML pour Responsive Design - AUTOVEILLE

 

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

Responsive Design code CSS - AUTOVEILLE

 

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 :

Infographie Responsive Design - AUTOVEILLE

 

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 –

Publicités
5 commentaires

Laissez un petit mot Ă  AUTOVEILLE ;)

Choisissez une méthode de connexion pour poster votre commentaire:

Logo WordPress.com

Vous commentez Ă  l'aide de votre compte WordPress.com. DĂ©connexion / Changer )

Image Twitter

Vous commentez Ă  l'aide de votre compte Twitter. DĂ©connexion / Changer )

Photo Facebook

Vous commentez Ă  l'aide de votre compte Facebook. DĂ©connexion / Changer )

Photo Google+

Vous commentez Ă  l'aide de votre compte Google+. DĂ©connexion / Changer )

Connexion Ă  %s

%d blogueurs aiment cette page :