Dès le début, le développement et la conception de sites web se sont concentrés sur des formats adaptés aux PC. Aujourd’hui, plus de 80% des internautes se connectent sur la toile avec leur smartphone. Ces appareils mobiles sont complètement intégrés dans notre quotidien.
Il apparait donc essentiel pour les propriétaires de sites web d’effectuer une optimisation des leurs afin qu’ils s’adaptent parfaitement au format mobile.  C’est ainsi que devient populaire, le concept « mobile first », créé par Luke Wroblewski en 2009 et rendu célèbre par le PDG de Google, Eric Schmidt, en 2010. Que veut-il dire ? Quel impact sur le SEO ? Comment créer un site web mobile first ? C’est ce que nous allons voir ensemble dans cet article.

Table des matières

Le mobile first, une approche qui met les mobiles en avant

Pour mieux comprendre le concept de « mobile first », vous devez d’abord connaître quelques notions.

La conception de sites web responsives

La conception web responsive permet au site internet de s’adapter automatiquement aux écrans des différents appareils que nous utilisons, ordinateurs, smartphones et tablettes, en affichant le contenu de manière appropriée. Cela réduit considérablement les opérations des utilisateurs comme le panoramique, le zoom et le défilement lorsqu’ils naviguent sur le web et rend l’expérience utilisateur bien plus agréable.
site responsive google

L’avancement progressif et la dégradation gracieuse

Afin de rendre l’affichage des interfaces web ou des applications en mode « responsive » sur les différents appareils, les concepteurs fournissent des versions personnalisées des produits à différentes fins :

  • L’avancement progressif implique de construire d’abord une version pour le navigateur relativement inférieur (comme celui d’un téléphone portable). Celle-ci comprend les fonctions et caractéristiques les plus basiques. Ensuite, on passe à une version avancée pour une tablette ou un PC, qui est créée en ajoutant des interactions, des effets plus compliqués, etc.
  • La « dégradation gracieuse » au contraire, démarre la conception du produit à partir d’une extrémité avancée comme le desktop et construit une version avec des fonctions bien équilibrées au début. Ensuite, les concepteurs rendent le site compatible avec les terminaux mobiles en supprimant certaines fonctions ou certains contenus.
  • « Mobile first », comme son nom l’indique, signifie de concevoir un site web en commençant par sa version mobile. Puis, on travaille sur une conception pour PC et tablettes au fur et à mesure de l’évolution du projet. D’une manière générale, cela consiste à développer votre site internet en pensant à vos utilisateurs mobiles, avec pour objectif principal d’améliorer l’expérience de ces derniers sur votre site.
sooyoos
Sooyoos
Paris, France
4.93 - 7 recommandations
Stratégie DigitaleDéveloppement mobile & AppLogiciels Création de Site Web
Découvrir l’agencearrow_forward
puzzle-agency
Puzzle Agency
Paris, France
5 - 8 recommandations
Ergonomie (UX/UI)BrandingStratégie DigitaleDéveloppement mobile & AppLogiciels Création de Site WebE-commerce Software
Découvrir l’agencearrow_forward
capture-decran-2021-02-19-a-19-00-52
MyStudioFactory
Paris , France
4.5 - 10 recommandations
BrandingDéveloppement mobile & AppWeb DesignLogiciels Création de Site WebProduct Design
Découvrir l’agencearrow_forward
capture-decran-2021-02-19-a-18-47-18
ERA2140
Paris, France
4.5 - 15 recommandations
Stratégie DigitaleDéveloppement mobile & AppWeb DesignLogiciels Création de Site WebProduct Design
Découvrir l’agencearrow_forward
capture-decran-2021-02-19-a-18-07-30
Nemesis tech
Paris, France
4.5 - 10 recommandations
Développement webDéveloppement mobile & AppLogiciels Création de Site WebE-commerce Software
Découvrir l’agencearrow_forward
capture-decran-2020-11-20-a-10-53-26
Accelerator Team
Paris, France
5 - 9 recommandations
Développement webDéveloppement mobile & AppLogiciels Création de Site WebE-commerce Software
Découvrir l’agencearrow_forward
capture-decran-2020-10-23-a-12-24-06
ITDM Group
Colmar , France
4,5 - 5 recommandations
Mobile & App DesignStratégie DigitaleDéveloppement webDéveloppement mobile & AppLogiciels Création de Site WebWeb & Software Development
Découvrir l’agencearrow_forward
capture-decran-2020-10-09-a-10-35-06
Aji Creative
Lognes, France
5 - 26 recommandations
SEOMobile & App DesignStratégie DigitaleDéveloppement webDéveloppement mobile & AppE-commerce Software
Découvrir l’agencearrow_forward
capture-decran-2020-06-26-a-12-05-06
Bfast-Développement
Vibraye, France
0 - 0 recommandation
Content MarketingStratégie DigitaleDéveloppement webDéveloppement mobile & AppWeb DesignLogiciels Création de Site Web
Découvrir l’agencearrow_forward
celu
CELUGA
Paris, France
5/5 - 5 recommandations
Mobile & App DesignStratégie DigitaleDéveloppement webDéveloppement mobile & AppLogiciels Création de Site WebDesign GraphiqueE-commerce Software
Découvrir l’agencearrow_forward
split
SPLIT
Paris, France
5/5 - 6 recommandations
Mobile & App DesignStratégie DigitaleDéveloppement webDéveloppement mobile & AppLogiciels Création de Site WebDesign GraphiqueE-commerce Software
Découvrir l’agencearrow_forward
toch
LesBonsTech
Lyon, France
5/5 - 5 recommandations
Content MarketingMobile & App DesignDéveloppement webDéveloppement mobile & AppLogiciels Création de Site WebDesign GraphiqueE-commerce Software
Découvrir l’agencearrow_forward
hello
Hello Pomelo
Paris, France
5/5 - 22 recommandations
Mobile & App DesignRelations PubliquesStratégie DigitaleDéveloppement webDéveloppement mobile & AppLogiciels Création de Site WebDesign GraphiqueE-commerce Software
Découvrir l’agencearrow_forward
sokeo
SOKEO
Marseille, France
5/5 - 11 recommandations
Content MarketingStratégie DigitaleDéveloppement webDéveloppement mobile & AppLogiciels Création de Site WebDesign GraphiqueE-commerce Software
Découvrir l’agencearrow_forward
ajensi
ajensi
Paris, France
5/5 - 9 recommandations
Mobile & App DesignDéveloppement webDéveloppement mobile & AppLogiciels Création de Site WebProduct DesignDesign Graphique
Découvrir l’agencearrow_forward
zol
ZOL
Lyon, France
5/5 - 9 recommandations
Stratégie DigitaleDéveloppement webDéveloppement mobile & AppLogiciels Création de Site WebDesign GraphiqueE-commerce Software
Découvrir l’agencearrow_forward
pi-2
PET’S Company
Bordeaux, France
5/5 - 8 recommandations
Développement mobile & AppLogiciels Création de Site WebDesign Graphique
Découvrir l’agencearrow_forward
simpl
SimplX
Lyon, France
5/5 - 3 recommandations
Mobile & App DesignDéveloppement webDéveloppement mobile & App
Découvrir l’agencearrow_forward
mark1
Make it
Brussels, Belgium
5/5 - 5 recommandations
Réseaux SociauxContent MarketingBrandingStratégie DigitaleLogiciels Création de Site WebE-commerce SoftwareWeb & Software Development
Découvrir l’agencearrow_forward
zee-group-illustration
Zee Group
Paris, France
4.5 - 15 recommandations
E-commerce SoftwareCreative & DesignWeb & Software Development
Découvrir l’agencearrow_forward
capital-panache-illustration
Capital Panache
Brussels, Belgique
5 - 7 recommandations
E-commerce SoftwareCreative & DesignWeb & Software Development
Découvrir l’agencearrow_forward

Mobile-first et référencement

Avec l’avènement du mobile-first, les stratégies de référencement se retrouvent fortement impactées.

Que dit Google ?

Fin 2016, Google annonce l’avènement de l’index mobile-first. Il s’agit d’un critère qui prend en compte la version mobile des sites web avant de les classer dans les résultats de recherche. Ainsi, depuis Décembre 2018, le moteur de recherche utilise cet index pour 50 % des pages affichées dans le SERP. En mars 2020, la firme de Mountain View affirme qu’il s’appliquerait à tous les sites dès septembre de la même année.
Cependant, pour les sites créés après le 1er juillet 2019, l’index mobile-first est déjà privilégié. Si vous surveillez le trafic du crawlbot vers votre site, vous pouvez constater une augmentation du trafic provenant du Smartphone Googlebot. De plus, les versions en cache des pages sont généralement celles de la version mobile.
Néanmoins, si votre site web comporte des URL distinctes pour les mobiles et le desktop, Google affiche celle mobile pour les mobinautes et la seconde pour les internautes utilisant des ordinateurs de bureau. Toutefois, peu importe la situation, le contenu indexé sera la version mobile.

Éviter les pénalités

La façon dont le mobile-first affecte votre référencement dépend entièrement de la manière dont votre site et vos pages sont optimisés pour les mobiles. Si ce dernier est conçu de manière à répondre aux besoins d’utilisation sur les smartphones et ordinateurs, vous ne devriez pas être affecté par l’index mobile-first de Google. Dans ce cas, les pages de votre site mobile et desktop restent les mêmes et s’adaptent simplement à des tailles d’écran différentes, ce qui est l’approche de conception recommandée par Google.
Les sites web qui seront les plus touchés par l’indexation mobile sont ceux qui proposent des pages distinctes pour le mobile et pour l’ordinateur de bureau, selon l’appareil utilisé. Dans ce scénario, la version mobile sera désormais explorée en premier, ce qui pourrait avoir un impact sur votre SEO pour plusieurs raisons :

  • Vous diffusez un contenu différent sur les versions mobile et desktop d’une page ;
  • Vos pages mobiles manquent de données structurées ;
  • Vos pages mobiles manquent de métadonnées ;
  • La version mobile d’une page n’est pas correctement vérifiée dans la console de recherche ;
  • Les profils de liens pointant vers vos pages mobiles sont plus faibles que les versions de bureau ;
  • Vos pages sont mal optimisées pour le mobile.

Pour éviter les pénalités de Google, assurez-vous que les versions mobiles et desktop de vos pages sont toutes deux vérifiées dans la console de recherche. Utilisez les mêmes balises Meta, les mêmes données structurées et métadonnées pour les deux versions. Google recommande aussi que :

  • Toute balise rel=hreflang pour l’internationalisation comprenne des liens distincts pour les URL smartphones et ordinateurs de bureau ;
  • Vos serveurs soient capables de gérer toute augmentation du taux de crawl de la version mobile de votre site ;
  • Une utilisation correcte des éléments de liaison rel=canonical et rel=alternate entre les versions de mobile et de bureau.

Après cela, vous pourrez tester votre site.

Tester votre site selon l’index Mobile First

Pour vous préparer au déploiement de l’index mobile-first et ne pas vous exposer aux pénalités de Google, le meilleur moyen est de tester votre site grâce à la page https://search.google.com/test/mobile-friendly?hl=FR.
Le moteur de recherche offre cet outil de test pour vérifier la compatibilité de votre site. Il vous suffit d’entrer l’URL de ce dernier. Les résultats vous indiqueront s’il est optimisé pour les mobiles ou non, et quelles améliorations peuvent être apportées. Cela constitue un excellent point de départ, qui met en évidence le score de réactivité mobile d’un site web. Ces tests prêtent généralement attention à l’UX, notamment à la taille du texte, à la qualité de l’image et tiennent compte du temps de chargement des pages. Ils considèrent aussi la taille des boutons, les liens vers les réseaux sociaux, les pop-ups et de nombreuses autres caractéristiques.
Les résultats obtenus peuvent vous fournir les bases nécessaires pour rendre votre site web plus convivial pour les utilisateurs mobiles. Ce faisant, vous satisferez non seulement vos utilisateurs, mais vous pourrez également constater une amélioration de votre référencement organique.
Pour vérifier que votre site ait été déplacé vers l’indexation mobile first, il existe plusieurs options :

  • Email : Google vous avertira dans un premier temps par un email vous indiquant que votre propriété a été transférée vers un mobile. Il est cependant possible de ne pas recevoir ces emails. C’est pourquoi il existe un certain nombre de solutions faciles d’accès. Néanmoins, si vous avez reçu le message, il est probable que le passage à l’indexation mobile-first ait été effectué quelques jours, voire deux semaines avant.
  • Paramètres de la console de recherche Google : ouvrez la Google Search Console et naviguez jusqu’à l’onglet « Paramètres » sur le côté gauche. À partir de là, votre principal agent d’indexation et la date sont indiqués.
  • Les log files : vous pouvez analyser le journal de votre serveur afin de déterminer la date précise à laquelle la majorité de votre crawling a été effectuée par un agent de smartphone. Ce processus est certainement le plus complexe et le plus long. Cependant, il peut aussi être le plus précis.

Repenser votre développement web

Le mobile-first impose une nouvelle conception des sites web. Elle nécessite une approche « content first » et donc, plus axée sur l’utilisateur. Les appareils mobiles ont plus de limites en ce qui concerne la taille de l’écran et la bande passante. Il faut dire que le cœur du site est son contenu. Un site mobile first passe par un responsive design et doit être mobile-friendly.

Les éléments les plus importants

Premièrement, faites un inventaire du contenu. Créez une feuille de calcul ou un document équivalent contenant tous les éléments que vous souhaitez inclure. Ensuite, pensez à la hiérarchie visuelle, classez-les par ordre de priorité. Déterminez comment afficher les plus importants de manière proéminente.
Ensuite, concevez un wireframe mobile et agrandissez les cibles tactiles. Les doigts sont beaucoup plus larges que les curseurs de souris. Il faut donc des éléments plus grands sur lesquels cliquer. Donnez aux hyperliens beaucoup d’espace, agrandissez légèrement les boutons et assurez-vous qu’il y ait assez d’espace autour de tous les éléments interactifs.
Après, pensez « application ». Les utilisateurs de téléphones portables sont habitués aux mouvements et à un minimum de contrôle dans leur expérience. Pensez aux widgets expansibles ou à d’autres éléments à l’écran avec lesquels les utilisateurs peuvent interagir sans avoir à rafraîchir la page.
Enfin, évitez les grands graphiques. Les photos en format paysage et les graphiques complexes ne s’affichent pas bien lorsque votre écran ne fait que quelques centimètres de large. Répondez aux besoins des utilisateurs mobiles avec des images lisibles.

Vérifier la vitesse de chargement de votre page web

Aujourd’hui, la vitesse est importante. Selon Google, 52 % des internautes quittent un site web qui ne se charge pas après 3 secondes. La plupart des mobinautes utilisent leur téléphone portable en déplacement. Ils ont donc besoin d’un accès rapide à l’information qu’ils veulent, ce qui fait de la vitesse une nécessité pour une expérience utilisateur positive.
vitesse chargement page
Google dispose d’un autre outil utile qui évalue la vitesse de votre page. Les pages dont le temps de chargement est plus long ont généralement un taux de rebond plus élevé. Toutefois, ce n’est pas seulement un facteur important pour votre expérience utilisateur. La vitesse de la page est également l’un des signaux utilisés par l’algorithme de Google pour classer les pages web.

Éviter les pop-ups

Les pop-ups peuvent nuire au référencement mobile. En août 2016, Google a annoncé que, dans un effort pour fournir des réponses encore plus rapidement, les pages qui affichent des pop-ups ou des intersections intrusives sur le mobile seraient pénalisées. Les écrans des téléphones portables étant beaucoup plus petits, ils rendent l’accès au contenu beaucoup plus difficile.
Si vous utilisez des interstitiels sur votre site web, veillez à les limiter au strict nécessaire. Google reconnaît que certaines fenêtres contextuelles sont inévitables, comme l’obligation légale d’utiliser des cookies ou la vérification de l’âge. Cependant, les annonces en plein écran sont considérées comme inutiles par le moteur de recherche. Alors, assurez-vous que les fenêtres contextuelles sont de taille raisonnable et peuvent être facilement rejetées par les utilisateurs.

Une refonte s’impose ?

Comme susmentionné, si votre site web est conçu avec un responsive design, vous n’avez pas vraiment à vous inquiéter. Il s’adapte à tous les appareils. Cependant, les taux de conversion sur mobile sont 64 % plus élevés que sur desktop. Alors, si vous voulez générer plus de ventes, vous devez penser à revoir toute la conception de votre site web.
De même, si votre site internet est trop âgé, il est l’heure d’en faire la refonte. Vous pouvez créer un autre site mobile, mais vous risquez de mettre vos pages en concurrence. Sans compter le fait qu’un site peut être vu comme du duplicate content. Les sites web mobiles contenant la mention « m.dot » dans leur URL sont considérés comme différent.
Une autre astuce pour éviter la refonte complète, tout en restant compatible à l’index mobile-first est d’adopter la version AMP de Google. Elle utilise tous les critères exigés par le moteur de recherche pour améliorer votre référencement.

En conclusion

Le nombre des mobinautes augmente d’année en année. L’exigence de ces derniers en matière d’expérience utilisateurs reste élevée. Ils veulent du contenu adapté à leurs écrans et rapidement. Ce à quoi un site conçu pour le desktop ne peut répondre. Pour gagner des leads, prendre de l’avance sur la concurrence et répondre aux exigences de Google, un site mobile-first est la solution.
⚠️ Si vous voulez vérifier que votre site internet respecte les consignes données par Google, nous pouvons vous mettre en relation avec les meilleures agences de votre région.