Mobile-First Design – Qu’est-ce que c’est et pourquoi c’est important

L’automne 2018 a été une période difficile pour les spécialistes du marketing en ligne, les blogueurs, les agences numériques… essentiellement pour tous ceux dont le pain et le beurre viennent du domaine en ligne. Pourquoi? Parce que c’est à ce moment-là que le géant des moteurs de recherche, Google, a commencé à déployer son indexation mobile d’abord. Cela n’a certainement pas été une surprise puisque le "Mobilegeddon" de 2015 a déjà introduit la priorisation des sites Web qui s’affichent bien sur les appareils mobiles. La conception axée sur le mobile était déjà une chose, mais Google a quand même réussi à semer la panique.

Mais revenons un instant en arrière et examinons ce que signifie réellement "mobile-first".

La conception Mobile-First expliquée

En bref, la conception axée sur le mobile est le type de conception qui donne la priorité aux appareils mobiles. En général, cela inclut les smartphones et les tablettes ou tout appareil doté d’un écran plus petit. Pour bien comprendre ce concept, il faut d’abord parler de responsive web design ou RWB. Dans RWB, nous permettons essentiellement au Web et à toutes ses formes et contenus de s’adapter à des écrans plus petits sans perte de qualité. Cela doit également être fait d’une manière que les gens trouvent pratique ou confortable. Lorsqu’elle est effectuée correctement, la conception réactive signifie que l’utilisateur n’a pas besoin de zoomer, de faire défiler ou de faire défiler l’écran pour afficher tout le contenu du site.

De toute évidence, avec le degré auquel les recherches mobiles ont dépassé celles des ordinateurs de bureau, il est naturel qu’un site Web soit réactif. Ce n’est même pas une question de survie du plus fort. C’est plus simple que ça. Si votre site Web n’est pas réactif, il pourrait tout aussi bien être inexistant. Les gens n’ont ni le temps ni la patience pour les sites Web qui ne répondent pas.

Mais il y a plus ici que la simple réactivité. Lors du développement d’un produit, les concepteurs prenaient la version de bureau comme point de départ. Ensuite, après avoir finalisé cette version particulière, ils ont essentiellement abandonné certains éléments afin d’optimiser le produit pour mobile.

Aujourd’hui, le processus est différent. « L’avancement progressif » est un principe largement utilisé dans la conception, qui prend la version mobile comme point de départ. Et c’est exactement ce que signifie "mobile-first". La conception commence à partir de l’extrémité mobile, puis s’étend progressivement à des versions plus avancées.

Indexation mobile d’abord

Comme nous l’avons mentionné précédemment, en 2018, Google a lancé une toute nouvelle façon d’indexer les sites. L’indexation est importante car c’est l’un des mécanismes que Google utilise pour décider du classement de votre site Web sur les pages de résultats des moteurs de recherche.

Donc, fondamentalement, l’indexation mobile d’abord signifie que lorsque Google déploie ses crawlbots, ils vont d’abord rechercher la version mobile de votre site, puis celle de bureau. Notez que la version mobile n’est pas la seule à être indexée et classée. Votre version de bureau est également prise en compte, mais seulement après la version mobile. Si votre site Web n’a pas de version mobile, cela aura un impact négatif important sur le classement de votre site Web. Pas seulement ça. La qualité de l’expérience mobile offerte par votre site Web est également un facteur.

Et c’est pourquoi le mobile-first doit être pris très, très au sérieux par tout propriétaire de site Web.

Comment optimiser pour Mobile-First

Alors vous vous êtes procuré un thème responsive sympa? Bien. La réactivité est extrêmement importante. Mais ne pensez-vous pas une seconde que votre travail d’optimisation pour le mobile se termine là. C’est plus compliqué que ça.

Que vous donniez à votre ancien site WordPress un nettoyage de printemps ou que vous en construisiez un tout nouveau, vous pouvez faire certaines choses pour le rendre plus attrayant pour les robots d’exploration de Google et l’indexation mobile d’abord.

• Optimisez la vitesse de votre site Web

Google déteste les sites Web lents. Pas vraiment. Il a un penchant particulier pour les sites Web qui sont lents à charger. Depuis l’été 2018, Google donne officiellement la priorité aux sites Web rapides, c’est donc certainement quelque chose à penser.

Même si votre site Web est un peu lent, ne vous inquiétez pas. Il y a beaucoup de choses que vous pouvez faire pour l’accélérer. Par exemple, vous pouvez utiliser l’un des excellents plugins de mise en cache qui créent une version compatible HTML de votre site afin qu’il se charge plus rapidement. Vous pouvez également compresser tous vos fichiers afin qu’ils soient téléchargés dans la taille la plus faible et la plus légère possible. Enfin, prenez le temps de parcourir votre site Web et de rechercher d’éventuelles erreurs techniques, telles que des liens brisés, des pages trop saturées, etc.

En ce qui concerne l’ optimisation pour les moteurs de recherche (SEO), en supposant que vous appliquez déjà toutes les meilleures pratiques dans le domaine, il y a quelques éléments supplémentaires à garder à l’esprit.

D’une part, vous devez assurer la parité du contenu entre les versions de votre site. Ceci s’applique en particulier aux liens internes, aux données structurées, aux balises, etc. Assurez-vous également que vos serveurs peuvent gérer le taux de crawl. C’était un problème lors du déploiement de l’indexation mobile-first, mais un nombre surprenant de sites Web ne s’est toujours pas adapté à la nouvelle activité d’exploration.

Enfin, surveillez régulièrement l’état de votre indexation et assurez-vous que robots.txt est validé et que les fichiers journaux de votre serveur sont en ordre.

• Optez pour un framework responsive

Oui, nous avons dit plus tôt que l’utilisation d’un thème réactif, construit sur un framework réactif, n’est pas suffisant pour une bonne optimisation mobile first. Mais cela reste l’un des facteurs essentiels, nous avons donc pensé qu’il fallait le réitérer.

Bootstrap et Foundation sont actuellement les frameworks les plus populaires et sans doute les meilleurs responsive, alors optez pour un thème utilisant l’un d’entre eux. Ils sont idéaux pour traduire la conception de votre site Web sur des écrans plus petits avec un risque minimal de problèmes et de bogues. De plus, ils le font à la fois au niveau du front-end et du back-end, ce qui réduit considérablement la charge de travail des développeurs.

• Optimisez votre navigation, votre contenu et vos interactions

Trouver cet équilibre parfait entre pas assez de contenu et trop de contenu est le mal commun de tous les sites Web mobiles. Pourtant, c’est une bataille que nous devons continuer à mener. Les visiteurs ont besoin d’informations, et ils ont besoin qu’elles soient présentées de manière claire et simple. L’encombrement est inacceptable. Organisez votre contenu de manière à pouvoir dire ce que vous avez à dire, élaborer des stratégies pour vos appels à l’action, et rien d’autre.

Tenez également compte de la navigation de votre site Web. Si c’est trop compliqué, cela ne fonctionnera tout simplement pas pour le mobile.

Ensuite, si votre barre de navigation sur ordinateur est longue, vous devez la raccourcir dans votre version mobile. Envisagez d’agrandir votre texte et de transformer vos liens en boutons faciles à appuyer.

Enfin, voyez si vos mises en page sont correctement optimisées pour les actions manuelles courantes, telles que toucher et balayer.

C’est une étape tout à fait logique mais cela ne fera pas de mal de le souligner une fois de plus. Vous devez toujours vérifier et tester tout sur votre site. Même si vous n’avez apporté aucune modification récemment, envisagez de faire un test occasionnel juste pour voir si tout fonctionne bien.

De nos jours, la plupart des gens utilisent des navigateurs modernes ou des navigateurs optimisés pour les mobiles. Cependant, un pourcentage étonnant d’internautes utilisent encore des versions de navigateur plus anciennes, et vous devez également y penser. Vous voulez que votre site Web soit aussi beau sur un ancien iPhone 4s que sur le nouveau Huawei P20.

Testez simplement la réactivité de la conception de votre site Web et n’oubliez pas les tests fractionnés A/B, en particulier pour vos pages de destination. Bien entendu, avant toute chose, personnalisez la version mobile de votre site, et préparez-la pour les utilisateurs.

Le mobile-first est une tendance qui va perdurer pendant un certain temps, et c’est la réalité que nous devons tous accepter. Par « nous », nous entendons toutes les personnes impliquées dans la création et la gestion d’un site Web. Designers, développeurs, administrateurs, experts SEO, éditeurs, rédacteurs – tout le monde doit se rappeler de donner la priorité au mobile. Bien sûr, cela ne veut pas dire que nous devrions négliger les versions de bureau. C’est juste que la conception axée sur le mobile doit être prise au sérieux.

Nous espérons que vous avez trouvé cet article utile. Si vous l’avez aimé, n’hésitez pas à consulter également certains de ces articles !