Ce n’est un secret pour personne que les sites WordPress adaptés aux mobiles sont la nouvelle norme, mais malgré leur apparence courante, la création d’un site magnifique et réactif peut 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:
-Comprendre pourquoi la conception Web réactive est importante
-Faites le test Google Adapté aux mobiles
-Utilisez un thème WordPress réactif (ou créez le vôtre)
-Envisagez des plugins WordPress adaptés aux mobiles
-Penser en termes de médias réactifs
1. Pourquoi les sites adaptés aux mobiles sont-ils importants?
En 2016, 52,7% des internautes y ont accédé via des appareils mobiles. Cela signifie que plus de la moitié de la population se tourne vers les téléphones et les tablettes plutôt que sur les appareils de bureau traditionnels.Par conséquent, pour suivre le rythme, votre site Web doit être prêt à s’afficher sur n’importe quelle taille d’écran. Une conception adaptée aux mobiles garantit 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, Google a mis en œuvre une refonte majeure de son algorithme de recherche pour récompenser les sites jugés «adaptés aux mobiles». Le changement se résume à un point de données crucial: si votre site Web est réactif ou non.
Cela signifie que si votre site se lit bien sur les appareils mobiles, il obtiendra de meilleures performances dans les résultats de recherche que les sites qui ne le font pas. C’est un avantage très intéressant 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 l’affichage sur des appareils 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 de compatibilité mobile
Votre site Web peut avoir fière allure sur un appareil mobile (comme votre propre téléphone portable), mais vous devez vraiment le tester sur une large gamme de tailles d’écran pour savoir s’il est vraiment réactif. Même si vous avez tout un tas de vieux téléphones qui traînent, cela peut prendre du temps pour le tester sur chaque écran.
Pour simplifier les choses, Google nous a offert à tous un outil de test gratuit adapté aux mobiles qui vous dira si votre site est qualifié ou non “adapté aux mobiles”. 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 du rouge, vous avez un peu de travail à faire. (Nous y reviendrons dans une seconde!)
Un petit outil assez soigné, 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. But!
Une fois que vous avez utilisé l’outil adapté aux mobiles 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 bonnes chances que vous soyez d’accord dans ce département. Si votre thème existe depuis un certain temps, il est peut-être temps pour 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 responsives (vous pouvez tout lire à ce sujet ici).
Si les mises à jour ne font pas l’affaire, il est probablement temps de rechercher 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 nombreux thèmes WordPress de nos jours 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 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 la combinaison parfaite, il y a tellement de thèmes WordPress à choisir que je vous garantis que vous en trouverez un autre qui fonctionnera pour votre site.
Si vous recherchez 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. comme vous le souhaitez sur mobile.
Comment créer votre propre thème WordPress réactif
Si vous préférez opter pour le bricolage pour créer un site adapté aux mobiles, assurez-vous de partir de zéro ou avec un thème enfant – vous ne devriez jamais faire de changements drastiques comme celui-là sur votre site en ligne.
Je vous recommande d’utiliser Local pour créer un site WordPress local directement sur votre ordinateur. Cet outil gratuit vous permettra d’expérimenter à votre guise sans jamais casser votre site actuel (ce qui est essentiel lors d’une refonte).
La meilleure partie du développement avec Local? Vous pouvez utiliser la fonction Liens en direct pour générer 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 créez votre propre thème, assurez-vous simplement d’utiliser des requêtes multimédias pour définir les limites de la conception et réfléchir aux éléments un par un.
4. Utilisez des plugins réactifs
Les plugins ajoutent des fonctionnalités à votre site WordPress, de sorte qu’ils n’ajoutent toujours rien 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.
Un widget de la barre latérale est un merveilleux ajout à un site pour ordinateur, mais s’il domine la conception mobile ou ne se réduit pas, cela ne va pas offrir une très bonne expérience utilisateur.
rendre-wordpress-site-mobile-friendly-phone
Comme les thèmes, faites simplement attention aux fonctionnalités d’un plugin et essayez de lire les critiques ou de trouver une démo avant de l’acheter.
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. Cependant, il y a une dernière chose à laquelle vous devriez penser pour vraiment vous assurer que vous suivez les meilleures pratiques.
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’options sur votre site. La plupart des formulaires d’inscription par e-mail fonctionnent très bien sur les appareils mobiles (en supposant qu’ils évoluent et soient 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 fenêtres contextuelles (qu’elles s’affichent immédiatement ou après qu’un utilisateur a été sur le site pendant un certain temps) et tout autre type d’acceptation qu’un utilisateur doit ignorer avant d’accéder au contenu de la page. Vous pouvez tout savoir sur la position de Google à ce sujet ici.
Pour garder votre site WordPress adapté aux mobiles et suivre les meilleures pratiques, évitez les pop-ups sur la conception de votre mobile. La façon dont vous procédez dépendra du service qui alimente vos opt-ins, mais la plupart des fournisseurs devraient avoir une option pour désactiver les fenêtres contextuelles intrusives sur les appareils mobiles.
6. Élaborer une stratégie pour des médias réactifs
Que vous travailliez avec un site de portfolio, un blog quotidien ou un site de commerce électronique, la dernière pièce du puzzle réactif consiste à prendre en compte les médias de 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. Alors, règle numéro un pour les 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 du fichier du média que vous incluez sur votre site. Cela améliorera non seulement l’expérience mobile, mais également 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 vous aider à rationaliser votre site et à améliorer les performances mobiles, essayez d’utiliser la plus petite taille de fichier possible tout en conservant la qualité dont vous avez besoin. (Par exemple, votre site mobile charge peut-être une version plus petite d’une image que le bureau!) L’optimisation de l’image peut également aider beaucoup dans le domaine.
Pour plus d’information concernant le Création de Site web cliquez ici