Pourquoi un site mobile friendly est-il indispensable pour votre stratégie SEO ?

Bien que ses prédécesseurs soient apparus dans les années 1990, le premier vrai smartphone tactile a vu le jour en 2007.

Plus connu sous le nom de « IPhone », ce petit appareil a su faire sa place dans nos foyers et a véritablement révolutionné notre monde.

Depuis (et selon une étude menée par l’année Internet 2020) les français passent en moyenne 2h25 par jour sur le web, dont 2/3 via leurs smartphones. 

Google quant à lui recense plus de 96% du trafic provenant des recherches mobiles. 😳

Comme vous pouvez l’imaginer, il y a donc là un véritable défi à relever pour mettre en place une stratégie mobile efficace.

Dans ce premier article de notre série dédiée à « la stratégie mobile comme levier de performance de votre SEO« , nous vous donnons les éléments clés pour construire un site mobile friendly.  📱💕

Un site mobile friendly c’est quoi? 

“Mobile friendly », ce terme a l’air sympa n’est-ce pas ? Et bien, c’est un peu l’idée. 

Un site web mobile friendly est un site conçu pour être accessible et facile à utiliser sur un appareil mobile (smartphones, tablettes ou autres appareils à petit écran).

En d’autres termes, votre site web accessible sur ordinateur doit bien s’entendre avec sa bande d’amis d’appareils digitaux. 😉 

Pour se faire, il faudra que son design soit adapté aux différents formats d’écran et que le temps de chargement de ses contenus soit optimisé. 

Mais alors comment faire ?    

Mobile-friendly vs. Responsive Design ?

Comme nous venons de vous l’expliquer, votre site mobile friendly doit être adapté aux formats d’écrans des smartphones, tablettes et autres.

Cela passe par l’adaptation à la taille des petits écrans, des contenus médias, des boutons CTA, de l’organisation des pages, de l’accès au menu etc…

En clair, votre site doit être un site web responsive. 

Mais qu’est-ce que le Responsive Web Design (RWD)?🤔

Et bien il s’agit d’une méthode de création de sites Web qui s’adaptent automatiquement à la taille de l’écran de l’appareil utilisé.

Cela permet aux utilisateurs de vivre une expérience positive, sans qu’ils n’aient à zoomer, à déplacer la page de gauche à droite ou même à devoir rafraîchir la page pour accéder au menu. Et ce quelle que soit la façon dont ils accèdent à votre site.

Plusieurs technologies permettent de créer des mises en pages adaptées à la taille, à la résolution et à l’orientation de l’écran de l’appareil utilisé : HTML5, CSS3 ou encore Media Queries par exemple. 

Comment savoir si mon site est mobile friendly ?

Vous avez repensé le design de votre site web pour l’adapter aux appareils mobiles, mais vous ne savez pas s’il est mobile friendly ?

Pas de panique, voici quelques outils qui vous permettront de tester l’ergonomie de votre site sur mobile : 

• Google Mobile-Friendly Test  
• Am I Responsible 
• Sizzy 
• XRespond
• Screenfly  
• Responsive Design Checker
• MattKersley.com 

Pourquoi est-ce important d’avoir un site responsive design ? 

Un site web Responsive Web Design est un réel levier dans votre stratégie SEO et pour booster votre chiffre d’affaires.

Voici pourquoi : 

• Google pénalise les sites web qui ne s’adaptent pas aux différents écrans.

• Vous conservez une adresse URL unique, sans duplication des contenus ou des mises à jour. Le tout pour un coût de maintenance moindre que pour la création d’un site web mobile à part entière ou d’une application.

• Le temps de chargement de votre site sera plus rapide sur mobile (on vous le rappelle, les internautes accordent 3 secondes en moyenne à un site pour charger). Le RWD supprime les éléments jugés superflus sur mobile pour ne faire apparaître que l’essentiel. 

• L’internaute garde l’option de visiter votre site en version mobile ou en version web selon le type d’écran qu’il utilise. 

• Vous atteignez une nouvelle cible : presque 95% des 15-29 ans ont un smartphone et l’utilisent quotidiennement pour surfer sur Internet (recherches web et réseaux sociaux). 

Vous l’avez compris, le RWD a deux grands atouts : améliorer votre référencement et offrir une meilleure expérience utilisateur, et ça chez Develink, on valide ! 😍

Nos conseils pour avoir un site offrant une belle expérience sur mobile

Choisir un thème responsive

De nombreux CMS vous permettent de choisir un thème pour votre site web adapté à l’affichage mobile.

Puisque nous ne sommes pas tous des experts en développement web, certains d’entre eux restent simples d’utilisation.

C’est le cas du leader sur le marché WordPress qui propose la grande majorité de ses thèmes en format responsive (comme Storefront ou Shapely par exemple). Shopify vous permettra également des choix de thèmes responsives avec une application intuitive. 

Enfin, Bootstrap est LE framework spécialisé dans le développement de sites et d’applications responsive. Mais il vous faudra de bonnes compétences en développement web avant de l’adopter.   

Simplifiez le menu de votre site web

Pour favoriser la lisibilité sur les appareils mobiles, organisez et simplifiez votre menu avec des titres concis qui permettront une navigation rapide entre vos différentes pages. Sur mobile, le menu sera inséré dans l’icône aux trois barres horizontales.

Il peut être placé où vous le souhaitez mais devra rester rapidement accessible sans gêner la navigation du “mobinaute”. 

Optimiser le temps de chargement des pages

Le temps de chargement des pages est un élément important qui agit sur votre trafic (et sur votre référencement).

Il est d’autant plus important sur mobile puisqu’il perd 1 seconde en passant de 3 secondes en moyenne sur ordinateur à 2 secondes seulement sur smartphones avant que le mobinaute ne quitte la page.

Alors pensez à optimiser vos contenus multimédias !

Pour la compression de vos images, nous vous conseillons d’utiliser :

• le format JPG pour les photographies
• le format SVG ou PNG pour un logo
• et de toujours préférer un format PNG à un format GIF beaucoup plus lourd

Bien évidemment, Google ne vous laisse pas seul et a développé l’Accelerated Mobile Pages : un format de page qui permet d’accélérer leur affichage sur les appareils mobiles. 

Enfin, n’hésitez pas à utiliser l’outil Google Insights PageSpeed pour analyser la vitesse de chargement de votre site web sur tous les appareils.

Vous pouvez même l’insérer dans votre Google Search Console ! 

Supprimer les pop ups

Soyons d’accord, il n’y a rien de plus agaçant qu’une fenêtre pop ups, normalement placée sur le côté de la page sur ordinateur, qui vient s’afficher en plein milieu de la page sur smartphone, et parfois même sans que le mobinaute n’arrive à accéder à la petite croix de fermeture…

Soyez vigilants à cet élément pour ne pas que vos visiteurs mobiles prennent la fuite et ne quittent votre site plus vite que prévu…🏃‍♂️

Simplifier le menu de vos pages 

Tout comme pour le menu de votre site web, simplifier le menu de vos pages permettra au mobinaute de se repérer facilement dans sa navigation et de passer d’une section à une autre sans avoir à faire défiler la page pendant de longues (très longues) secondes, s’il n’a pas déjà cliqué sur “retour” avant de trouver ce qu’il cherche… 

Faciliter les partages (via SMS, WhatsApp, Messenger, réseaux sociaux en story/tweet…) 

Sachez qu’il y a de très grandes chances qu’un visiteur qui consulte votre site sur un appareil mobile (smartphone ou tablette) ait installé les applications des réseaux sociaux.

Intégrer les partages sur les différents réseaux sociaux vous permettra de gagner en visibilité grâce à la publicité de votre site faite par le partageur à sa communauté.

Alors ne vous fermez pas cette porte du bouche à oreilles digital. 😉 

Vérifier l’affichage / la structure de son site sur version mobile

Une fois toutes ces bases bien appliquées et votre site responsive en ligne, vous n’avez plus qu’à vérifier son affichage en version mobile.

Et pour ça rien de mieux que l’outil de Google: Mobile-Friendly Test. 

À suivre : créer et structurer le contenu de votre site

Dans notre prochain article, nous verrons plus en détails commet optimiser votre référencement sur les recherches mobiles : mots-clés, images, balises …

N’hésitez pas à partager nos articles sur vos réseaux sociaux 😀