Pourquoi votre site doit-il être mobile-first ?

Depuis la création du web, les sites sont conçus sur et pour les ordinateurs de bureau. Avec l’arrivée des smartphones dans nos poches,  les actions et achats se font de plus en plus sur nos mobiles. Nos modes de consommation évoluent, les sites doivent évoluer avec et devenir mobile-first.

Pour les agences, l’objectif aujourd’hui est donc de concevoir des sites pensés mobile qui s’adapteront ensuite sur tous les autres formats.

Qu’est-ce qu’un site Mobile-First ?

Le principe du mobile-first est de concevoir la structure du site pour qu’il soit correctement affiché sur tous les appareils mobiles en premier lieu, sur lesquels on ajoutera ensuite des surcouches d’affichage pour les autres formats d’écran (ordinateurs et tablettes).

Depuis 2015, Google favorise les sites conçus de cette manière dans les SERPs (les résultats de recherche). En effet, ces site s’affichent plus rapidement et correctement sur la plupart des supports, ce qui pour Google est un critère primordial.

 

Les utilisateurs et leurs écrans

La résolution de 360×640 pixels est la plus utilisée dans le monde et en France (à 17,1% et 13,7% respectivement), cela correspond à l’affichage d’écran mobile. En deuxième place se positionnent les ordinateurs portables avec une résolution de 1366×768 pixels au niveau mondial (10%) et en France nous avons l’ordinateur de bureau en 1920×1080 pixels (11,7%).

 

Statistiques des résolutions d’écran utilisées dans le monde sur les 12 derniers mois

Source : http://gs.statcounter.com/screen-resolution-stats

 

Statistiques des résolutions d’écran utilisées en France sur les 12 derniers mois

Source : http://gs.statcounter.com/screen-resolution-stats/all/france

Le trafic mobile en première position

 

En 2016, le trafic mobile a historiquement dépassé pour la première fois le trafic de bureau.

 

Selon le bilan 2018 du e-commerce en France de la Fédération e-commerce et vente à distance , les achats sur mobiles franchissent un nouveau cap :

  • D’après leur panel, le volume des ventes sur mobile a augmenté de 16% en 2018 par rapport à 2017.
  • Ce volume de vente représente 30% du volume d’affaires total des sites participants (vs 27% en 2017).
  • En 2018 la barre des 90 milliards € de ventes a été franchie.
  • En suivant cette dynamique, 100 milliards d’euros de chiffre d’affaires attendus en 2019.
Source : Illustration Mobile first par Walter Stéphanie

 

Au-delà des nouvelles propriétés du CSS 3 le flex, qui doit rendre obsolète ou nettement moins présent le « float », les développeurs organisent leur code pour qu’il soit responsive et d’autant plus pour le mobile-first.

 

Le 26 mars 2018, Google a officiellement annoncé le début du premier déploiement de l’indexation mobile. Depuis le 1er juillet 2019 Googlebot utilise désormais principalement l’agent Smartphone pour explorer et indexer les pages.

(Source : Se préparer à l’indexation orientée mobile)

Comment savoir si mon site est mobile first ?

Pour savoir si votre site est mobile ou responsive, vous pouvez utiliser :

Ou

 

L’outil Lighthouse de Google donne accès à un audit complet des performances de ses pages web à partir du navigateur Chrome et son DevTools.

 

Les outils comme le framework Bootstrap ou les thèmes récents de WordPress sont pensés mobile-first. Toutefois vous pouvez encore les optimiser pour le mobile avec la technologie AMP (Accelerated Mobile Pages) open source proposée et soutenue par Google qui est un moyen facile de charger instantanément vos pages sur un appareil mobile.

 

  • Pour Bootstrap vous pouvez passer par un outil en ligne comme https://uncss-online.com qui changera votre CSS mais il faudra aussi changer les tags de vos balises HTML par ceux de AMP.  Retrouvez le guide complet du projet AMP pour plus d’informations.

 

 

Vous l’installez et ce dernier créera automatiquement les URLs et les balises au format AMP. Il prend en compte les différents formats de médias, les tweets, les embeds, les vidéos Youtube, instagram, etc…

Gardez à l’esprit qu’il n’y a pas d’intérêt d’y passer autre chose que des articles.

Ensuite, il suffit de quelques jours pour que Google vienne crawler et indexer vos pages AMP puis vérifier l’état de l’indexation ou les erreurs AMP depuis la Search Console.

 

Vous aurez aussi un bon aperçu du résultat avec le plugin SEOquake pour Chrome dans l’onglet DIAGNOSTIC à la section Conformité mobile.

Voici les consignes relatives à l’AMP dans la recherche Google.

 

Quelle est la prochaine étape ?

 

Les habitudes des consommateurs orientent nos développements et le principal moteur de recherche (Google) avec 94,2% de part de marché en France (92% dans le monde) rythme leurs évolutions.

 

Dans une agence digitale comme KEOLIO, le CTO (Chief Technical Officer) et le Directeur Conseil en Trafic se complémentent totalement en faisant le lien entre la structure, la mise en place de données (ainsi que de contenu) d’un site web et l’indexation du site par les moteurs de recherches.