Le mobile-friendly : comment faire ?

mobile friendly picVoilà maintenant 3 mois que Google a lancé son critère mobile-friendly et que le monde de la toile a accueillit un nouvel algorithme.
Tous les sites non adaptés aux tablettes et mobiles risquent d’être pénalisés… il est donc primordial de rendre son site responsive ! Voici un petit topo sur le mobile friendly, ce que cela implique, comment adapter son site web au responsive, comment tester si son site est adapté…

site mobile friendly

Pourquoi rendre son site responsive ?

Tout d’abord, le nouvel algorithme de Google va favoriser les sites mobiles au détriment des sites non adaptés, qui perdront du ranking dans les résultats de recherche de Google. Donc pour plaire à Mme Google il va falloir vous relooker entièrement et que vous puissiez rentrez dans tous vos vêtements :)
Autrement dit, votre site doit s’adapter à toutes les résolutions d’écran ! Vous obtiendrez un critère « Site mobile » dans le résultat de recherche de Google certifiant que votre site est adapté aux mobiles et tablettes. (voir image ci-dessus)

parts de marché navigation web

Sur ce graphique, on peut constater que le nombre de navigation sur mobiles et tablettes ne cesse d’augmenter et représente désormais un nombre de visiteurs considérables. Google a pris en compte cet élément pour lancer son algorithme et permettre une meilleure navigation à ses mobinautes.

Comment rendre son site responsive ?

Pour satisfaire Google, vous devez adapter votre site web aux tablettes et mobiles; c’est à dire, vous devez modifier votre site web de sorte qu’il soit adapté aux différentes résolutions d’écran qu’ont vos visiteurs (vous pouvez d’ailleurs facilement vérifier le taux de visiteurs mobiles sur Google webmaster tools).
Voici une petite liste des différentes résolutions d’écrans que l’on peut trouver sur le marché :

Ordinateur/Desktop Mobile Tablette
1024/600 176/220 800/400
1024/768 240/320 800/600
1280/800 320/240 1024/600
1366/768 320/480 1024/768
1440/900 480/800 1280/800
1600/900
1680/900
1920/1080
1920/1200

Concrètement, il va falloir ajouter ce que l’on appelle des « media queries » dans vos CSS pour chaque résolution d’écran. Le robot détectera le media query correspondant à l’écran du visiteur. Pour les novices, je vous encourage à jeter un oeil sur le très bon tuto d’OpenclassRoom « Mise en page adaptative avec media queries »

Comment tester si son site est responsive ?

Une fois que vous avez fait le nécessaire pour réadapter votre site web à toutes les résolutions d’écran; vous pouvez vérifier si votre site est responsive en réduisant la fenêtre de votre navigateur ou en utilisant l’un de ses outils :

Conclusion

Pour tous site ayant l’ambition de se trouver dans les 1ères pages de résultats google, il est désormais inévitable soit d’adapter son site au mobile friendly soit de créer un nouveau site pour les mobiles.
On ne compte plus le nombre de sites web qui renvoie vers « m.nomdusite.com » lorsque le visiteur utilise un mobile. Quelque soit votre choix, il est important de s’y mettre sous peine d’être dépassé par ses concurrents sur les moteurs de recherche.

Partage cet article !Share on Google+Pin on PinterestShare on TumblrTweet about this on TwitterShare on Facebook

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>