Comment optimiser vos mises en page WordPress pour le trafic mobile

Publié: 2020-12-16

Le nombre d'appareils mobiles et de personnes qui les utilisent est en constante augmentation. Il n'est pas surprenant que plus de la moitié du trafic Internet soit mobile et que la plupart des requêtes effectuées par les moteurs de recherche le soient sur des appareils mobiles. De plus, Google pénalise les sites Web qui ne sont pas optimisés pour les appareils mobiles.

Pour optimiser vos mises en page WordPress pour le trafic mobile, vous devez faire bien plus que d'installer un thème. Vous devez investir dans la version mobile de votre site Web, non seulement d'un point de vue UX, mais aussi d'un point de vue SEO, CRO, publicité et performance.

Par conséquent, dans cet article, nous expliquerons ce que vous devrez aborder sur votre site WordPress pour le faire fonctionner pour le trafic mobile et pour nous assurer que les utilisateurs bénéficieront de la meilleure expérience possible lorsqu'ils visitent le site Web sur un appareil mobile.

Pourquoi le trafic mobile est important

Utilisateur appareil mobile de navigation

En 2016, pour la première fois, le trafic Internet mobile a dépassé celui des ordinateurs de bureau. Pour suivre le rythme, vous devez préparer votre site WordPress pour le trafic provenant de tout type d'appareil.

L'optimisation ne signifie pas seulement avoir une belle apparence sur les smartphones, cela signifie également avoir un site Web fonctionnel. Avoir un site Web prêt pour les mobiles améliorera l'expérience utilisateur et améliorera votre taux de conversion, et il est crucial pour les sites Web qui basent leurs revenus sur la publicité.

En plus d'une UX améliorée, une mise en page adaptée aux mobiles influence également positivement votre référencement. Depuis la mise à jour de Google en 2015, il y a eu une révision significative des algorithmes des moteurs de recherche. Désormais, la convivialité mobile est l'un des facteurs importants pour un meilleur classement dans les recherches et une augmentation du trafic Web.

La hausse du trafic mobile montre le besoin d'optimisation de la mise en page

Le trafic Web mobile est en constante augmentation, comme le montre ce graphique de Statista.

Par conséquent, si votre site Web est excellent sur les appareils mobiles, il se classera mieux dans les SERP et entraînera plus de ventes via mobile. Même les grands détaillants comme Walmart Canada ont encore profité des optimisations de la mise en page Web mobile, avec une augmentation de 98% des ventes mobiles!

Lorsque l'entreprise a découvert que près de 50% de ses clients cibles étaient des mamans qui utilisaient des tablettes, elles ont réalisé qu'elles devaient faire quelque chose pour leur expérience mobile. Pour résoudre avec succès les problèmes liés à leurs mises en page mobiles, ils ont mis en œuvre les solutions suivantes:

  • Établissement d'un plan Mobile-First: l'équipe a décidé d'adopter une approche tactile de la conception et de la rendre vraiment belle sur les tablettes et les smartphones.
  • Mise en œuvre de l'optimisation de la conception mobile: L'approche de conception réactive a rendu leur site excellent sur toutes les tailles d'écran. De plus, ils ont également optimisé leurs pages produits pour le trafic Web mobile.

Résultat: une augmentation de 20% de leur taux de conversion global et une augmentation de 98% des ventes mobiles, comme mentionné ci-dessus.

Comment Google évalue-t-il les présentations de sites Web mobiles?

Lors de l'évaluation de la capacité du site à recevoir du trafic d'une recherche mobile, Google prend en compte les facteurs suivants:

  • Mise en page: Google vérifie si votre page s'affiche correctement sur un écran mobile.
  • Accessibilité: vérifier si les boutons, les médias et le texte sont suffisamment grands pour être facilement accessibles sans que les utilisateurs ne zooment.
  • Performances: la vitesse des pages est vitale pour les expériences Web sur ordinateur de bureau et mobile, et Google donne la priorité aux performances des pages mobiles par rapport au bureau dans les SERP.
  • Placement des annonces: une page remplie de publicités est intrusive pour beaucoup, et constitue également un problème pour Google. C'est pourquoi, lorsque vous utilisez des annonces, vous devez vous assurer de ne pas enfreindre les consignes relatives au placement des annonces.

Devrix Google évalue les facteurs de mise en page de sites Web mobiles

Commencez par quelques tests

La première chose que vous devez faire est d'examiner si votre site actuel répond de manière adéquate au trafic Web mobile ou non. À cette fin, vous pouvez utiliser l'outil de test mobile de Google.

Exemple de page de test Google Mobile Friendly

Test de compatibilité mobile de Google comme l'un des meilleurs outils pour examiner les mises en page réactives pour mobile de votre site.

Entrez simplement l'URL du site et sélectionnez URL de test . L'analyse ne prendra pas plus de quelques secondes. Si votre site Web est fonctionnel sur les appareils mobiles, l'outil vous le fera savoir, avec une capture d'écran de l'apparence du site sur un smartphone. Ou, si votre site n'est pas adapté aux mobiles, l'outil vous indiquera ce que vous devez ajuster.

Il existe une poignée d'autres outils utiles que vous pouvez utiliser pour tester la compatibilité mobile, tels que:

  • Varvy Mobile SEO
  • Validateur mobile W3C
  • Vérificateur de conception réactif

Les outils sont excellents, mais rien ne vaut une première expérience. Nous vous suggérons toujours de parcourir votre site, d'effectuer des actions que vous considérez comme prioritaires pour vos utilisateurs (comme ajouter un produit à un panier, soumettre un formulaire, naviguer vers une page, partager un article). Soyez à l'affût des problèmes potentiels tout au long du processus. Il s'agit de la forme la plus simple de tests UX.

Testez les performances

La vitesse est plus pertinente que jamais. Google considère la vitesse comme l'un des facteurs de classement les plus importants, et jusqu'à 85% des utilisateurs s'attendent à ce que les sites mobiles se chargent beaucoup plus rapidement que les versions de bureau.

Voici quelques outils que vous pouvez utiliser pour tester la vitesse de votre site Web:

  • PageSpeed ​​Insights
  • GTMetrix
  • Pingdom

Si vous souhaitez accélérer le contenu sur mobile, un CDN peut vous aider à diffuser le contenu plus rapidement grâce à la mise en cache et à la distribution à partir de nombreux emplacements.

Par exemple, disons que votre serveur d'hébergement est à San Francisco, en Californie, et que votre visiteur Web mobile est de Paris. C'est une distance qui peut ralentir le contenu transversalement. Un CDN peut stocker une version de votre site sur un serveur français près de Paris, et ainsi servir votre contenu beaucoup plus rapidement.

De plus, vous devez sélectionner un puissant fournisseur d'hébergement géré pour votre site Web WordPress. Un hôte partagé gère des centaines de sites Web à la fois, et si l'un des sites connaît un pic de trafic plus élevé que la normale, cela diminuera la vitesse des autres sites.

Une mise à niveau vers un hébergement WordPress tel que Pagely peut apporter des améliorations de performances significatives. Pagely utilise une infrastructure de serveur qui accélérera immédiatement votre site Web. Ils utilisent également la dernière version de PHP 7 et incluent un CDN qui peut faire monter en flèche les actifs de votre site.

Maintenez la simplicité

Étant donné que les smartphones ont un écran beaucoup plus petit que les dispositions de bureau, la quantité d'éléments que vous pouvez montrer aux utilisateurs est inférieure. Par conséquent, si vous souhaitez afficher des tonnes de contenu, vous ne ferez que gêner l'expérience utilisateur.

Par exemple, jetons un œil au site Web de la succursale brésilienne de Toyota. Cela a l'air vraiment solide sur un ordinateur portable.

Mise en page du site Web WordPress pour le bureau de Toyota Brésil

Un bon site Web de bureau ne signifie pas que la mise en page mobile suivra. Source de l'image: Toyota Brésil

Mais que faire si vous souhaitez parcourir leurs véhicules sur votre smartphone.

Mise en page WordPress mobile non optimisée de Toyota Brésil

Une mise en page Web mobile encombrée entraîne moins de trafic et un taux de conversion réduit. Source de l'image: Toyota Brésil

Ce n'est pas si mal, mais encore une fois, cette barre supérieure et le menu principal sont un peu trop, ce qui rend toute l'expérience obsolète et encombrée.

Garder les choses simples avec votre conception améliore l'interface utilisateur mobile et les utilisateurs peuvent naviguer plus efficacement dans vos pages. De plus, des mises en page simples améliorent le score de vitesse de votre page mobile, car moins un navigateur doit charger d'éléments, plus la page est rapide.

Swell Bottle Mobile Capture d'écran

Une mise en page WordPress simple pour mobile de Swell

Lorsque vous concevez une mise en page mobile, il est préférable de vous concentrer sur une mise en page à une colonne, pour favoriser plus de défilement sur la page. Réfléchissez - pourquoi Facebook et Instagram ont-ils un tel succès en tant que plates-formes mobiles?

Défilement sur le téléphone GIF

Les utilisateurs glissent naturellement verticalement. Source de l'image: Giphy

En outre, vous devez prendre en compte d'autres fonctionnalités acceptables pour la conception Web mobile simple, telles que le «menu hamburger».

Capture d'écran du site Web AMC avec menu Hamburger

Un bouton Menu Hamburger en haut à gauche. Source de l'image: AMC

Il s'agit désormais d'un composant standard de la conception Web mobile, et lorsque les utilisateurs souhaitent parcourir une autre page, ils recherchent en haut de la mise en page. N'utilisez pas de menus déroulants étendus. Ils sont difficiles à naviguer sur les smartphones et parfois, ils entravent même la convivialité des sites Web de bureau.

Exclure le contenu inutile

En plus de rationaliser la transition de la page vers les appareils mobiles en supprimant les éléments inutiles, vous pouvez également supprimer le contenu supplémentaire. Bien sûr, vous ne devez jamais supprimer de contenu qui améliore votre taux de conversion. Cependant, il y a simplement du contenu qui n'est pas nécessaire pour la version mobile de votre site.

Lorsque vous examinez le contenu qui doit apparaître sur la page, posez-vous les questions suivantes:

  • Dans quelle mesure ce contenu est-il pertinent pour la page?
  • Le contenu est-il crucial pour le parcours de l'utilisateur?
  • Si nous devons inclure ce contenu, comment pouvons-nous le simplifier pour le mobile?
  • Si nous pouvons le supprimer sur mobile, est-il toujours nécessaire sur le bureau?

L'élimination du contenu inutile améliorera l'expérience utilisateur et les taux de conversion. Enregistrez uniquement le contenu le plus important pour vos visiteurs Web mobiles. Simplifiez votre contenu là où vous le pouvez, mais n'éliminez aucun contenu clé qui pourrait convaincre les utilisateurs d'opter pour votre produit.

Capture d'écran du site Web BuildFire simple

Une interface utilisateur simple du site Web mobile BuildFire.

Limiter les zones cliquables

Lorsque les gens visitent des sites Web sur des appareils mobiles, ils ne souhaitent pas cliquer sur trop d'options. Cela peut être écrasant et vous ne parviendrez pas à fournir une UX mobile opérationnelle. Au lieu de cela, vous devez mettre en évidence les appels à l'action les plus importants et les zones cliquables de vos pages.

Bouton d'appel à l'action Todoist

Todoist n'a que l'appel à l'action et de beaux graphismes.

Gardez à l'esprit que la navigation sur un site Web sur un smartphone consiste à regarder et à cliquer sur un écran tactile avec les doigts au lieu de pointer avec des flèches. Par conséquent, le fait d'inclure un nombre limité de liens et de les espacer correctement garantit que vous disposez d'une page accessible sur laquelle les utilisateurs d'appareils mobiles peuvent naviguer.

Grands boutons de site Web mobile Quicksprout

Le site Web mobile Quicksprout comporte de grandes zones cliquables.

Ceci est crucial car si les zones cliquables sont proches sur un écran mobile, les gens peuvent cliquer sur le mauvais lien. De plus, Google peut signaler votre site comme étant peu convivial pour les utilisateurs mobiles, et vous manquerez beaucoup de trafic de recherche organique potentiel.

Conception réactive du harnais

Si vous souhaitez afficher correctement votre site Web sur ordinateur et mobile, vous devez le rendre réactif. Un site Web réactif utilise les mêmes éléments de page pour les versions de bureau et mobiles. Selon l'appareil, le design se remodèle pour s'adapter à l'écran.

Avantages Devrix de la conception réactive

Outre l'amélioration de l'expérience utilisateur pour vos visiteurs Web sur les appareils mobiles, la conception réactive apporte également à votre site les avantages suivants:

  • Flexibilité: avec un design réactif, vous n'avez pas besoin de penser à changer le design sur deux sites Web. Vous ne devez corriger ou ajouter des éléments qu'une seule fois, et vous le faites pour les versions mobile et de bureau.
  • Rentabilité: la gestion d'un site pour ordinateur et mobile peut être coûteuse. En utilisant une conception réactive, vous éliminez ces coûts inutiles.
  • Avantages du référencement: la conception réactive est bénéfique pour votre classement dans les recherches car Google, comme indiqué au début de l'article, donne la priorité aux sites adaptés aux mobiles dans les SERPs.

Cependant, vous devez être prudent. La plupart des sites Web réactifs convertissent simplement trois colonnes de contenu de bureau en une seule colonne.

Un site réactif est celui qui s'adapte à chaque écran. Il charge les mêmes données du bureau vers la version mobile. Par exemple, si vous souhaitez afficher une photo de bureau de 1 200 pixels sur un écran mobile de 300 pixels, l'ensemble des 1 200 pixels se chargera, mais sera rendu plus petit.

Conception réactive Gif

Source de l'image: Giphy

Concernant les images, WordPress a déjà fait des progrès significatifs vers une meilleure expérience. Depuis la version 4.4, le CMS met automatiquement à l'échelle même les plus grandes images via l' attribut HTML srcset .

PNG et JPEG sont les formats de fichiers image les plus courants. Mais, avec les derniers développements technologiques et d'images numériques, les formats WebP et SVG sont de plus en plus présents.

Un SVG est une image vectorielle et il peut être mis à l'échelle pour s'adapter à n'importe quelle taille d'écran. Les SVG sont généralement beaucoup plus petits que les PNG, ce qui permet de gagner un temps précieux lors du chargement.

Cependant, vous devez toujours faire attention. Les éléments visuels tels que les vidéos, les photos et les graphiques peuvent être l'un des principaux consommateurs de performances pour les sites Web. Même s'il n'y a pas de règles strictement définies pour la taille des fichiers multimédias, des fichiers plus petits se traduisent par de meilleurs temps de chargement.

Gardez à l'esprit que les mêmes éléments visuels de la version de bureau de votre site WordPress peuvent ne pas toujours fonctionner sur la conception mobile. C'est pourquoi éliminer les grandes images d'arrière-plan et les remplacer par une image qui n'entrave pas l'expérience utilisateur sur mobile est une bien meilleure option.

Prenons la page d'accueil de HubSpot comme exemple. Les graphiques de la section des héros illustrent parfaitement comment le CRM fait bouger les choses. Imaginez une image réaliste d'un immeuble de bureaux avec autant de personnes dans chaque fenêtre. Cela ne fonctionnerait pas aussi bien que ça.

Capture d'écran Hubspot

Source: HubSpot

Optimiser les formulaires

Remplir des formulaires sur un smartphone peut être un défi, surtout si les utilisateurs doivent soumettre trop de données et parcourir trop de champs. C'est pourquoi vous devez vous assurer de simplifier vos formulaires mobiles et de ne collecter que les informations les plus importantes.

Capture d'écran du formulaire Copyblogger

Gardez les formulaires pour vos pages mobiles aussi simples que possible. Source: Copyblogger

Dans WordPress, vous pouvez installer un plugin tel que WPForms et créer des formulaires réactifs rapidement et facilement qui peuvent vous aider à convertir les visiteurs Web mobiles.

Du point de vue des développeurs, nous utilisons le formulaire de contact 7 car il offre le plus de flexibilité. Bien qu'il soit à noter que son interface utilisateur n'est pas conviviale pour les utilisateurs non techniques qui souhaitent une conception personnalisée pour leurs formulaires.

Processus d'optimisation du formulaire de contact Form 7

Contact Form 7 est le meilleur outil d'optimisation de formulaire du point de vue du développeur.

Emballer

Avoir une mise en page WordPress adaptée aux mobiles est crucial de nos jours. C'est une condition nécessaire pour que vos utilisateurs cibles et vos moteurs de recherche acceptent votre site.

Un site Web WordPress adapté aux mobiles a le pouvoir de générer plus de trafic organique, d'engager de nouveaux prospects et de nouveaux clients.

Maintenant que vous avez une meilleure compréhension de ce qu'il faut tester, comment rechercher les problèmes d'interface utilisateur mobile et identifier les problèmes supplémentaires. Vous pouvez suivre les conseils décrits ci-dessus pour vous assurer que l'UX mobile de votre site WordPress est toujours à jour.

Les personnes derrière le meilleur CMS font également de grands progrès vers une UX mobile native améliorée. De la mise à l'échelle des images sur les navigateurs mobiles à un backend amélioré, vous pouvez être assuré que vous êtes en avance sur les propriétaires de sites Web qui utilisent un autre CMS.

Si vous avez d'autres questions, ou si vous avez besoin d'aide pour résoudre des problèmes UX mobiles et créer une expérience Web moderne sur les appareils, n'hésitez pas à nous contacter.