Comment rendre votre site WordPress compatible avec les mobiles

Ce n'est un secret pour personne que les sites WordPress adaptés aux mobiles sont la nouvelle norme, mais malgré leur apparence commune, la création d'un beau site réactif peut encore demander un peu de travail. Ce guide vous aidera à comprendre pourquoi il est important d'avoir un site adapté aux mobiles, comment en créer un sur WordPress et vous présentera les meilleurs outils pour créer un site réactif.

Pour rendre votre site WordPress adapté aux mobiles, vous devez :

1. Comprendre pourquoi la conception Web réactive est importante
2. Faites le test Google Mobile-Friendly
3. Utilisez un thème WordPress réactif (ou créez le vôtre)
4. Envisagez des plugins WordPress adaptés aux mobiles
5. Utilisez des opt-ins adaptés aux mobiles
6. Penser en termes de médias réactifs
7. Prioriser les performances du site

Prêt? Plongeons-nous !

1. Pourquoi les sites adaptés aux mobiles sont-ils importants ?

Au quatrième trimestre 2019, 61 % des recherches Google ont eu lieu sur un appareil mobile. Cela signifie que plus de la moitié de la population se tourne vers les téléphones et les tablettes sur les appareils de bureau traditionnels, donc pour les suivre, votre site Web doit être prêt à s'afficher sur n'importe quelle taille d'écran. Une conception adaptée aux mobiles offre une expérience utilisateur positive et aidera vos utilisateurs à trouver ce qu'ils recherchent lors de leurs déplacements.

Outre l'expérience utilisateur, il existe une autre raison importante pour laquelle votre site doit être adapté aux mobiles : Google. À partir de 2015 (l'année de "Mobilegeddon"), Google a mis en œuvre une refonte majeure de son algorithme de recherche pour récompenser les sites jugés "mobile-friendly". Le changement se résumait à un point de données crucial : si votre site Web était réactif ou non.

Cela signifie que si votre site se lit bien sur les appareils mobiles, il sera plus performant dans les résultats de recherche que les sites qui ne le font pas. C'est un joli avantage si vous avez fait le travail pour créer un site adapté aux mobiles ! Mais cela peut également nuire au trafic de votre site s'il n'est pas tout à fait à la hauteur de la tâche d'affichage sur des écrans plus petits.

Heureusement, si votre site WordPress n'est pas encore adapté aux mobiles, il existe de nombreux outils pour vous aider à vous mettre à niveau et à créer un site entièrement fonctionnel et réactif. Le premier pas? Comparez votre conception actuelle.

2. Faites le test adapté aux mobiles

Votre site Web peut avoir fière allure sur un appareil mobile (comme votre téléphone portable personnel), mais vous devez vraiment le tester sur une large gamme de tailles d'écran pour savoir s'il est vraiment réactif. Même s'il vous arrive d'avoir tout un tas de vieux téléphones qui traînent, cela peut prendre beaucoup de temps pour le tester sur chaque écran.

Pour simplifier les choses, Google nous a tous offert un outil de test gratuit adapté aux mobiles qui vous dira si votre site est qualifié de "mobile-friendly" ou non. Entrez simplement l'URL de votre site pour une évaluation rapide de la conception mobile de votre site. Si votre site Web est entièrement optimisé pour les appareils mobiles, vous recevrez un petit message de réussite enthousiaste qui ressemble à ceci :

Si vous voyez rouge, vous avez un peu de travail à faire. (Nous y reviendrons dans une seconde !)

Un petit outil plutôt sympa, non ? Eh bien, ça va encore mieux.

Pour tous les développeurs, Google a également publié une API de test adaptée aux mobiles qui vous permet de tester les URL avec des outils automatisés. L'avantage est que vous pouvez tester rapidement plus de pages, mais vous pouvez également surveiller les pages les plus importantes de votre site sans avoir à vous tourner manuellement vers l'outil de navigation tout le temps. Score!

Une fois que vous avez utilisé l'outil mobile de Google pour évaluer votre site, il est temps de commencer à apporter des améliorations. Commençons par votre thème WordPress.

3. Utilisez (ou créez) un thème WordPress réactif

Si vous avez récemment installé un nouveau thème WordPress, il y a de fortes chances que vous soyez d'accord dans ce département. Si votre thème existe depuis un certain temps, il est peut-être temps de faire une petite mise à jour.

Tout d'abord, vérifiez votre version de WordPress et la version actuelle du thème. S'il y a des mises à jour en attente, commencez par celles-ci. Je ne peux pas parler pour tous les thèmes, mais certaines mises à jour contiendront des éléments adaptés aux mobiles et pourront suffire à résoudre vos problèmes. WordPress 4.4, par exemple, a ajouté des fonctionnalités vraiment intéressantes pour les images réactives (vous pouvez tout lire à ce sujet ici).

Si les mises à jour ne fonctionnent pas, il est probablement temps de chercher un nouveau thème ou d'envisager de créer le vôtre. Explorons les deux options.

Les meilleurs thèmes WordPress adaptés aux mobiles

De manière réaliste, de nos jours, de nombreux thèmes WordPress sont réactifs – il est probablement plus rare qu'un thème ne soit pas adapté aux mobiles. Cela étant dit, avant d'acheter un thème, vérifiez qu'il s'affiche bien sur n'importe quelle taille d'écran. Testez le site de démonstration, mettez à l'échelle la fenêtre de votre navigateur et lisez tous les avis que vous pouvez trouver pour rechercher l'expérience d'utilisateurs réels.

Si vous êtes satisfait de ce que vous voyez, allez-y ! Mais si quelque chose ne va pas, évitez. Même si vous pensiez que c'était le match parfait, il y a tellement de thèmes WordPress parmi lesquels choisir que je vous garantis que vous en trouverez un autre qui fonctionnera pour votre site.

Si vous cherchez des thèmes gratuits, assurez-vous de voir à quoi cela ressemble avec votre propre contenu en place - comme je suis sûr que vous le savez, les choses ne se ressemblent pas toujours, alors assurez-vous qu'il affiche votre contenu le comme vous le voudriez sur mobile.

Vous ne savez pas par où commencer ? Lorsque vous hébergez votre site WordPress sur WP Engine, vous aurez accès aux thèmes StudioPress (y compris Genesis Framework !) gratuitement avec votre forfait. Ces thèmes sont entièrement réactifs afin qu'ils aient fière allure sur n'importe quel appareil, et vous pouvez facilement basculer entre eux (au lieu de vous sentir coincé avec le thème premium "celui" que vous avez décidé d'acheter).

Comment créer votre propre thème WordPress réactif

Si vous préférez opter pour la voie du bricolage pour créer un site adapté aux mobiles, assurez-vous de repartir de zéro ou dans un environnement de test - vous ne devriez jamais apporter de changements drastiques comme celui-ci sur votre site en ligne.

Je vous recommande d'utiliser Local pour créer un site WordPress local directement sur votre machine. Cette application gratuite vous permettra d'expérimenter à votre guise sans jamais casser votre site actuel (ce qui est essentiel lors d'une refonte). Vous pouvez même importer votre site existant dans Local, vous n'avez donc qu'à recommencer à zéro si vous le souhaitez.

Il existe également une fonctionnalité appelée Live Links, qui génère une URL partageable vers le site local. Cela vous permet de l'envoyer à un client ou de le récupérer sur votre téléphone, afin que vous puissiez facilement tester l'apparence du site sur un appareil mobile.

Si vous créez un thème enfant basé sur un thème parent réactif, vous serez en assez bonne forme. Si vous partez d'une ardoise totalement vierge et que vous créez votre propre thème, assurez-vous simplement d'utiliser des requêtes multimédias pour établir les limites de la conception et réfléchissez aux éléments un par un.

Demandez-vous comment les images doivent être mises à l'échelle, à quoi doit ressembler la navigation et si une partie du contenu sera masquée sur un appareil mobile. Voici quelques tutoriels qui peuvent vous aider :

• Comment créer un menu de navigation réactif dans WordPress
• 7 conseils de bonnes pratiques pour une conception Web réactive
• Travailler avec des images réactives dans WordPress

4. Utilisez des plugins réactifs

Les plugins ajoutent des fonctionnalités à votre site WordPress, de sorte qu'ils n'ajoutent pas toujours quelque chose visuellement au front-end. Mais dans le cas où ils ajoutent un élément physique à votre site (comme un widget ou un bouton CTA), assurez-vous qu'il s'adapte bien à toutes les tailles d'écran, ou au moins vous donne la possibilité de le désactiver sur des tailles d'écran plus petites.

Par exemple, un widget de barre latérale est un merveilleux ajout à un site de bureau, mais s'il domine la conception mobile ou ne se réduit pas, il ne constituera pas une très bonne expérience utilisateur.

Comme pour les thèmes, faites simplement attention aux fonctionnalités d'un plugin et essayez de lire les avis ou de trouver une démo avant d'en acheter un. Et chaque fois que vous activez un nouveau plugin, n'oubliez pas d'effectuer une vérification rapide de la qualité de votre site pour vous assurer qu'il s'adapte correctement à toutes les tailles d'écran.

Tant que vous avez un thème réactif et des plugins qui se comportent bien sur mobile, votre site sera en très bon état pour s'afficher sur des écrans plus petits.

5. Évitez d'ajouter des pop-ups sur les appareils mobiles

Si vous essayez de créer une liste de diffusion avec votre site WordPress, je suppose que vous avez une variété d'opt-ins sur votre site. La plupart des formulaires d'inscription par e-mail fonctionnent très bien sur les appareils mobiles (en supposant qu'ils soient évolutifs et faciles à utiliser).

Les pop-ups, cependant, sont une bête différente. Google a commencé à pénaliser les sites avec des interstitiels intrusifs, c'est-à-dire des opt-ins qui couvrent le contenu d'un site. Cela inclut les pop-ups (qu'ils s'affichent immédiatement ou après qu'un utilisateur a été sur le site pendant un certain temps) et tout autre type d'opt-in qu'un utilisateur doit rejeter avant d'accéder au contenu de la page. Vous pouvez lire tout sur la position de Google à ce sujet ici.

Pour que votre site WordPress reste convivial et conforme aux meilleures pratiques, évitez les pop-ups sur votre conception mobile. La façon dont vous procéderez dépendra du service qui alimente vos opt-ins, mais la plupart des fournisseurs devraient avoir la possibilité de désactiver les fenêtres contextuelles intrusives sur les appareils mobiles.

6. Élaborez une stratégie pour des médias réactifs

Que vous travailliez avec un site de portefeuille, un blog quotidien ou un site de commerce électronique, une pièce importante du puzzle réactif consiste à prendre en compte les médias sur votre site. Cette grande image d'arrière-plan sur votre page d'accueil peut avoir fière allure sur un ordinateur de bureau, mais si elle ne s'adapte pas correctement, elle peut perdre tout son contexte et entraîner une expérience de visualisation difficile sur un téléphone. Alors règle numéro un aux médias réactifs ? Pensez à la façon dont les choses évoluent.

Si la mise à l'échelle n'est pas réellement la meilleure solution pour votre site, vous pouvez également envisager de masquer certains éléments lorsque votre site est chargé sur un appareil mobile. Cela aiderait à simplifier l'expérience et à amener les utilisateurs au contenu le plus important plus rapidement.

Enfin, vous devez également garder à l'esprit la taille de fichier des médias que vous incluez sur votre site. Non seulement cela améliorera l'expérience mobile, mais aussi le temps de chargement du bureau ! Les fichiers multimédias sont souvent parmi les plus volumineux d'un site Web, ce qui en fait la cause de barres de chargement et de longs temps d'attente. Pour aider à rationaliser votre site et améliorer les performances mobiles, essayez d'optimiser vos images en utilisant la plus petite taille de fichier possible tout en conservant la qualité dont vous avez besoin. (Par exemple, peut-être que votre site mobile charge une version plus petite d'une image que le bureau !)

7. Prioriser les performances du site

La vitesse des pages a longtemps été importante pour le classement de votre site dans les recherches Google sur ordinateur, mais depuis juillet 2018, c'est désormais également le cas pour les classements mobiles. Associez cela à la statistique ci-dessus selon laquelle plus de 60 % des recherches sur Internet utilisent des appareils mobiles, et les performances de votre site (sur chaque appareil) sont désormais plus importantes que jamais.

Les images sont une grande partie de l'équation de performance, mais votre code et votre hébergeur WordPress jouent également un rôle important.

En ce qui concerne votre code, envisagez des actions telles que la minification (surtout si vous travaillez avec un thème personnalisé). Faites l'inventaire de tous les plugins installés sur votre site, et désactivez et désinstallez ceux qui ne sont plus nécessaires. Fondamentalement, plus vous organisez les éléments qui alimentent votre site, mieux vous vous porterez.

En ce qui concerne votre hébergeur WordPress, assurez-vous d'utiliser un partenaire de qualité qui inclut des services tels que la technologie de mise en cache, le CDN et une infrastructure alimentée par des fournisseurs fiables tels que Google Cloud Platform. Si vous hébergez votre site sur WP Engine, vous êtes défini dans tous ces domaines.

Alors que de plus en plus de personnes utilisent leur smartphone ou leur tablette pour accéder à Internet, les concepteurs de sites doivent s'adapter pour répondre à ces habitudes d'utilisation. Alors, votre site est-il prêt pour vos visiteurs mobiles ? Quels aspects de votre site avez-vous dû modifier ? Quels outils avez-vous utilisé pour créer un design réactif ? Partagez votre expérience dans les commentaires !

Accédez à plus de 30 thèmes Premium (et adaptés aux mobiles !)

Gagnez du temps (et de l'argent !) avec l'hébergement WordPress par WP Engine et accédez aux thèmes StudioPress et au framework Genesis. Les thèmes sont entièrement réactifs et faciles à personnaliser, ce qui vous fait gagner du temps lorsque vous essayez de créer un site adapté aux mobiles. De plus, la plate-forme puissante de WP Engine maintiendra les performances de votre site optimisées, aidant ces vitesses de page à rester rapides et votre site à bien se classer.