Comment rendre un site WordPress mobile responsive

Les sites Web réactifs sont désormais la norme de l'industrie, en raison du grand nombre d'utilisateurs naviguant principalement sur des appareils mobiles. Pour illustrer l'ampleur de cet impact, des géants de l'industrie tels que Google récompensent désormais les sites adaptés aux mobiles dans les classements de recherche, afin d'aider à pousser davantage de sites à répondre aux besoins des appareils autres que les ordinateurs de bureau.

En bref, les sites Web réactifs utilisent le même code de site sur toutes les plateformes, mais offrent une optimisation pour chaque expérience, quel que soit le support de visualisation. Par conséquent, la mise en place d'un site réactif peut signifier reconstruire l'intégralité de votre conception ou simplement apporter quelques modifications à votre site existant.

Dans cet article, vous apprendrez comment les sites WordPress peuvent être adaptés aux mobiles à l'aide d'un design réactif. Nous expliquerons également l'importance de la réactivité pour l'optimisation des moteurs de recherche (SEO). Allons craquer !

WordPress est-il compatible avec les mobiles ?

WordPress est un système de gestion de contenu (CMS) qui vous permet de concevoir le front-end de votre site pour répondre à vos besoins précis. Cela signifie qu'il peut facilement être adapté aux mobiles.

Des thèmes réactifs par défaut sont disponibles depuis 2011. De nombreux thèmes tiers offrent désormais également une conception réactive prête à l'emploi. Ceux qui ne le sont pas sont souvent obsolètes dans de nombreux autres domaines.

Qu'est-ce que la conception réactive ?

Voyons comment la conception réactive s'appliquera à votre site WordPress. La conception réactive est un moyen d'organiser le contenu de votre site Web afin qu'il puisse répondre de manière dynamique à la taille de l'écran sur lequel il apparaît. Cela signifie que l'expérience utilisateur est aussi bonne sur un smartphone que sur un ordinateur portable.

Pour obtenir cette excellente expérience sur tous les appareils, les concepteurs créeront des grilles de contenu fluides et une flexibilité de code dans les images via le CSS d'un site afin de réorganiser le HTML en réponse directe à la taille et à la résolution d'un écran.

Si vous voulez un bon exemple, ouvrez Mashable.com dans une nouvelle fenêtre (en supposant que vous n'êtes pas déjà sur un appareil mobile). Une fois que vous y êtes, redimensionnez la fenêtre de votre navigateur pour la rendre de plus en plus petite et observez comment le site Web se réorganise en conséquence

Au fur et à mesure que vous réduisez la fenêtre, les images et les blocs de contenu se bousculent pour s'adapter à la fenêtre de plus en plus petite selon les grilles fluides créées par le concepteur. Au plus petit, il vous reste à quoi ressemblerait le site de Mashable sur un iPhone. C'est beau, et facile à lire. Agrandissez à nouveau la fenêtre, et ils répondent en revenant à leur configuration de « bureau ».

Le site se réorganise car il existe des requêtes média CSS qui appliquent différentes règles à la page, en fonction de la taille de l'appareil (dans ce cas, la fenêtre du navigateur) qui consulte le site. Le HTML reste le même, il est simplement réarrangé par le CSS. Les règles CSS peuvent être appliquées pour tout réorganiser sur le site, y compris la diffusion de différentes tailles d'image en fonction de la résolution de l'appareil. C'est vraiment cool quand vous voulez faire des choses comme servir des images améliorées par la rétine aux appareils iOS en particulier.

Applications mobiles vs sites réactifs

Le choix d'une application par rapport à un site réactif dépend de l'objectif du site. La plupart des sites Web iront très bien avec une conception réactive qui peut s'adapter aux appareils. Une application mobile entre en jeu lorsque vos utilisateurs veulent des fonctionnalités très spécifiques sur leur appareil mobile, différentes de celles fournies par le site complet. Votre banque propose probablement une application mobile afin que vous puissiez rapidement vérifier votre solde en ligne chez Starbucks. Facebook et Twitter ajustent également leurs fonctionnalités dans leurs applications pour s'adapter à l'utilisation du mobile.

Ce n'est que si vos utilisateurs ont besoin d'un ensemble spécifique de fonctions sur leur téléphone, distinct de ce dont ils ont besoin sur votre site Web principal, qu'une application native est quelque chose à considérer.

Considérations relatives aux performances pour les sites réactifs

Un design réactif affectera les performances globales de votre site. Le chargement de beaucoup de CSS et de différentes tailles d'images afin de répondre à la taille des appareils peut être coûteux du point de vue du traitement backend. Dans le cadre de l'évaluation de la conception réactive, il est important de donner la priorité aux performances en tant que fonctionnalité. Les utilisateurs s'attendent toujours à ce qu'un site mobile soit un peu plus lent, mais ils ne pardonneront pas s'ils essaient d'afficher votre site pour montrer un ami ou leur rendez-vous, et ils doivent attendre plus de quelques secondes.

D'un point de vue technique, la livraison de votre site sur un appareil mobile qui utilise des données cellulaires vous handicape jusqu'à 0,5 seconde dès le départ. Par exemple, récupérer 40 Ko sur 4G prend 700 ms dans des conditions optimales. La latence du réseau et les variations de situation ne feront qu'ajouter à votre temps de chargement. Vous ne pouvez pas contrôler les variables du réseau cellulaire, il est donc essentiel que vous construisiez votre site réactif avec la performance comme fonctionnalité dès le départ.

Assurez-vous d'avoir effectué les opérations suivantes pour vous assurer que votre site est optimisé pour les mobiles.

• Optimisez vos images : détectez automatiquement la taille de l'écran de l'appareil pour créer, mettre en cache et fournir la bonne taille d'image.
• Réduisez vos requêtes HTTP : minimisez la quantité de CSS et de JavaScript que vous devez utiliser, puis mettez en cache tout le reste.
• Chargement conditionnel des actifs : les gros boutons de médias sociaux, les images, etc. sont parfaits pour un appareil plus grand, mais n'affecteront pas l'expérience utilisateur pour les plus petits. Planifiez votre conception pour ne charger que ce qui est absolument nécessaire.
• Chargement paresseux : si vous pouvez vous en tirer en chargeant certains actifs, JavaScript en particulier, après les éléments de page les plus importants, faites-le. Au moment où vos utilisateurs auront consommé le contenu qu'ils voulaient en premier lieu, ces autres ressources auront été chargées.

Votre site WordPress doit-il être responsive ?

De plus en plus, la réponse par défaut à cette question sera oui, en particulier avec la large disponibilité de thèmes WordPress réactifs. Si votre site doit faire l'objet d'une refonte ou est en cours de conception, il est important d'offrir à vos utilisateurs une expérience de qualité sur n'importe quel appareil sur lequel ils se trouvent.

Dans cet esprit, je vais conclure avec quelques questions à vous poser, ainsi qu'à votre équipe, pour évaluer si votre WordPress doit être conçu de manière réactive.

• Quel est le cas d'utilisation de votre site ? La consommation mobile sera-t-elle importante ? Il y a de fortes chances que la réponse à cette question soit "oui, et de plus en plus chaque année". Il y aura des exceptions, mais pas beaucoup.
• Qui sont vos utilisateurs ? Plus ils sont techniques, plus ils sont à la pointe de la technologie, plus ils s'attendront à un site réactif pour chaque marque à laquelle ils s'associent.
• Avez-vous le budget? C'est un grand. Un site réactif est un peu plus cher à construire au départ, mais il est moins cher de créer un seul site réactif que de prévoir de créer deux versions distinctes de votre site, puis de gérer l'entretien des deux.
• Êtes-vous prêt à apprendre un nouveau type de design ? La conception réactive introduit de nombreux nouveaux concepts et façons de comprendre le contenu numérique. il sera important de travailler avec une équipe de conception qui peut non seulement concevoir quelque chose de beau, mais aussi vous éduquer en cours de route.

Créer une conception Web WordPress réactive

Les conceptions statiques existantes peuvent souvent être converties en thèmes réactifs. Voici quelques-uns des éléments à considérer tout au long du processus de conversion :

• Zoom du navigateur par défaut
• Largeurs et hauteurs des éléments fluides
• Optimisation des images
• Points d'arrêt spécifiques à la conception
• Menus réactifs séparés pour les appareils mobiles

Vous devez également tester votre conception mise à jour sur plusieurs appareils et envisager des éléments supplémentaires tels que des tableaux réactifs dans vos tests. Cependant, le moyen le plus simple de rendre WordPress réactif est de choisir un thème réactif prédéfini dès le départ.

Choisir le bon thème WordPress

Avant de commencer à chercher parmi les plus de 10 000 thèmes WordPress disponibles aujourd'hui, c'est une bonne idée de dresser une liste des fonctionnalités que vous souhaitez que votre site ait et d'utiliser cette liste comme point de départ.

Si vous n'êtes pas sûr des types de fonctionnalités à rechercher, vous pouvez insister sur quelques lignes de base pour vous aider à affiner les choses : l'optimisation des moteurs de recherche (SEO) et les temps de chargement rapides des pages (quel que soit l'appareil) sont deux choses que tout thème devrait avoir.

Bien qu'il existe de nombreux thèmes WordPress qui n'ont pas cette fonctionnalité intégrée, l'utilisation d'un thème qui possède ces deux fonctionnalités améliorera l'expérience de l'utilisateur final sur votre site.

La suite de thèmes WordPress Premium de WP Engine, par exemple, sont tous optimisés pour les moteurs de recherche et adaptés aux mobiles, ce qui signifie qu'ils se chargent tous rapidement sur n'importe quel appareil. Ces superbes thèmes ont été conçus pour une grande variété de cas d'utilisation, et les entreprises de toutes formes et tailles les utilisent pour alimenter leur présence en ligne.

L'accès à ces thèmes est également inclus dans chaque plan WP Engine, ce qui signifie que les clients WP Engine peuvent tous les utiliser sans frais supplémentaires.

Plugins WordPress mobiles

Les téléphones portables ouvrent beaucoup de potentiel pour des fonctionnalités telles que les notifications push et le chargement persistant sur des connexions lentes. Cependant, bien qu'il existe des solutions pour transformer votre site Web en une application Web mobile et faire passer le concept adapté aux mobiles au niveau supérieur, beaucoup sont encore en phase de développement et de test.

Cela signifie que certaines des fonctionnalités auxquelles vous vous attendez pourraient faire défaut. Cependant, il existe un certain nombre de plugins WordPress mobiles qui peuvent vous aider à améliorer votre site de différentes manières.

1. Jet Pack

Bien qu'il existe de nombreuses solutions disponibles, le plugin Jetpack est une option très populaire. Vous le trouverez dans le répertoire des plugins, mais il propose également des options pour créer un thème mobile simple sur votre site.

L'une des meilleures choses à propos de Jetpack est qu'il est bien entretenu. Cela signifie qu'il y aura des mises à jour fréquentes pour assurer sa sécurité et sa fonctionnalité. C'est aussi l'un des outils les plus complets que vous puissiez trouver. Le plugin de base est gratuit et contient de nombreuses options. L'inconvénient est qu'il y a tellement de fonctionnalités que l'interface peut sembler déroutante au premier abord.

De plus, si vous souhaitez des sauvegardes quotidiennes, des thèmes personnalisés et des outils de référencement, vous devrez investir dans la version premium de Jetpack. Selon vos besoins, vous pouvez obtenir le plugin premium pour un usage personnel à 39 $ par an, le niveau supérieur étant de 299 $ par an.

2. WPtouch

De plus, vous pouvez explorer WPtouch, un plugin populaire qui peut créer un site Web mobile à partir de votre site existant. L'un des principaux avantages de l'utilisation de ce plugin est que vous pouvez personnaliser la version mobile sans perturber ni modifier votre site Web d'origine.

La version gratuite a également une fonctionnalité assez robuste. Si vous recherchez une apparence et une convivialité différentes, vous devrez acheter la version pro. Les plans tarifaires Pro commencent à 79 $ par an et vont jusqu'à 359 $ par an pour les licences d'entreprise.

3. Pack mobile WordPress

Bien que WordPress Mobile Pack n'ait pas été testé avec la dernière version de WordPress, il s'agit d'un plugin populaire pour créer une application Web progressive (PWA) à partir de votre site Web existant. Cela signifie que les utilisateurs de votre site bénéficieront d'une expérience "semblable à une application", sans que vous ayez à consacrer des ressources à la programmation d'une application téléchargeable pour une boutique d'applications.

Avec ce plugin, vous pourrez envoyer des messages de bannière aux utilisateurs, les alertant de la possibilité d'ajouter votre site Web à leurs écrans d'accueil. Vos pages seront alors mises en cache et chargées très rapidement. La fonctionnalité de base est gratuite pour ce plugin, mais vous devrez acheter la version pro pour accéder à plus de thèmes, d'options de personnalisation et la possibilité de synchroniser certains contenus.
La version pro du plugin a trois niveaux parmi lesquels choisir. Le forfait Freelancer commence à 99 $ par an et peut être utilisé sur trois domaines. Les niveaux de prix se terminent par l'option VIP, à 499 $ par an pour dix licences de domaine.

Images réactives

WordPress propose des images réactives en vedette par défaut depuis la version 4.4. Cependant, en particulier pour les sites utilisant l'ancien code, il existe un simple extrait que vous pouvez ajouter à votre feuille de style pour vous assurer que les images ne semblent jamais trop grandes sur les petits appareils :

img {
max-width: 100%;
height: auto;
}

Bien qu'il existe de nombreuses façons d'assurer des performances d'image réactives optimales, cet extrait garantit que toutes vos images sont réactives comme référence.

Enfin, la plupart des images peuvent être incluses sur un site réactif, bien que l'évolutivité doive être un facteur. Par exemple, si vous incluez une image avec beaucoup de texte, il se peut qu'elle ne soit pas facile à lire sur les appareils mobiles. Dans ce cas, vous feriez peut-être mieux de choisir une image différente ou de fournir un moyen de lire le texte indépendamment de l'image.

Menus réactifs

Il existe deux écoles de pensée principales concernant la création de menus réactifs :

1. Faites un menu qui fonctionne à toutes les tailles.
2. Créez deux menus : un pour les grands écrans et un pour les expériences sur les petits écrans. Un seul s'affichera à la fois, selon la taille de l'écran utilisé.

L'approche unique fonctionne mieux pour les menus plus petits, car l'optimisation du CSS pour la lisibilité mobile ne nécessite que quelques ajustements simples. Dans cette situation, le menu est toujours visible pour l'utilisateur, quelle que soit la taille de l'appareil.

Cependant, si un menu est trop volumineux pour être facilement réduit pour les appareils mobiles, vous aurez peut-être besoin d'une deuxième version dédiée aux écrans plus petits. Dans ce cas, le grand menu n'est visible que sur les grands écrans, et une icône de menu mobile est présente sur les petits écrans.

Un exemple typique de cette approche est l'icône du menu hamburger, qui fait glisser le menu complet du mobile lorsqu'on clique dessus. Vous pouvez également utiliser la sélection variée de plugins de WordPress pour vous aider dans la création de votre menu réactif. Examinons trois options.

1. UberMenu

Une option que vous pouvez essayer est UberMenu. Pour 25 $, vous aurez accès aux futures mises à jour et à six mois de support. UberMenu peut vous aider à créer des menus entièrement réactifs et tactiles. Malheureusement, à moins que votre thème ne soit spécifique à UberMenu, vous devrez probablement apporter des modifications manuelles pour que votre thème fonctionne correctement.

2. Max Méga Menu

Une autre option est le plugin Max Mega Menu. Cet outil a une option gratuite dans le répertoire des plugins WordPress et fonctionne avec vos menus existants pour les convertir en "méga" menus :

La version gratuite propose également de nombreuses fonctionnalités de menu mobile, telles que la prise en charge native des écrans tactiles. Pour accéder à plus de polices et d'options de basculement mobile, vous devrez consulter l'un des trois niveaux de tarification. La version premium du plugin commence à 29 $ par an et va jusqu'à 99 $ par an pour les licences multi-sites.

3. Menu réactif

Un autre plugin bien noté et populaire que vous pouvez consulter pour rendre vos menus adaptés aux mobiles est le plugin Responsive Menu. Cette solution propose plus de 150 options de personnalisation différentes, le tout dans une interface facile à utiliser.

Vous aurez la possibilité de modifier presque tous les aspects de vos menus à partir de la page des paramètres de votre plugin. Si vous recherchez des animations et plus de polices, vous devrez consulter la mise à niveau du plug-in Responsive Menu.

La version gratuite du plugin peut apporter les fonctionnalités dont vous avez besoin, car la liste des options est assez longue. Si vous effectuez une mise à niveau, vous pouvez obtenir une licence de site unique pour 29 $ ou des licences illimitées pour 99 $. Le coût du plugin est une redevance unique et vous recevrez des mises à jour gratuites à vie.

Tableaux réactifs

Par défaut, les tableaux occupent autant d'espace que leur contenu (voire plus). Cela peut conduire à des tableaux extra-larges ruinant les mises en page mobiles.

Malheureusement, les tableaux pleins de contenu deviennent difficiles à lire lorsqu'ils sont réduits pour s'adapter à la largeur d'une page mobile. La conception réactive ne consiste pas uniquement à écraser des données sur un petit écran. Au lieu de cela, il s'agit de rendre tout convivial, quel que soit l'appareil.

Pour une solution simple et rapide, vous pouvez ajouter une réactivité de base à vos tableaux avec cet extrait CSS :

table {
width: 100%;
border-collapse: collapse;
}

Cependant, vous ne devez pas vous arrêter là. À moins que vous n'ayez de petits tableaux, nous vous recommandons d'optimiser chacun en fonction du type de contenu qu'il présente. En fonction des données contenues dans vos tableaux, vous pouvez choisir parmi plusieurs options réactives pour la meilleure lisibilité possible.

Si vous recherchez une solution de plugin pour les tableaux réactifs, vous avez de la chance ! Il existe plusieurs options, mais nous allons en recommander trois en particulier.

1. TablePress

Tout d'abord, le plugin TablePress est une option populaire, bien entretenue et très appréciée. Vous pourrez créer et intégrer de belles tables avec des codes courts. Cependant, pour obtenir des tableaux vraiment réactifs, vous devrez installer une extension TablePress. Bien que ceux-ci soient également gratuits, il est recommandé de faire un don au développeur.

2. Générateur de tableaux WP

Si vous recherchez une option de création de tableau cinq étoiles par glisser-déposer, WP Table Builder pourrait être fait pour vous. Un plugin quelque peu nouveau mais bien reçu, son interface glisser-déposer facilite la création de tableaux réactifs pour votre site Web.

Il s'agit également d'un plugin entièrement gratuit. Le seul véritable inconvénient de cette option est qu'elle ne propose que cinq options de données pour le moment. Vous êtes quelque peu limité au texte, aux images, aux boutons, aux listes et aux notes par étoiles.

3. wpDataTables

Le troisième plugin que nous vous recommandons de vérifier est wpDataTables. Avec cet outil, vous pouvez créer rapidement des tableaux et des graphiques à partir d'Excel, CSV, PHP ou d'autres données existantes. Cela signifie que vous pouvez prendre de grands ensembles de données et les rendre accessibles sur votre site Web.

Ce plugin est également prêt pour Gutenberg, ce qui facilite l'ajout de tableaux aux pages et aux publications de votre site une fois que vous les avez personnalisés dans les paramètres du plugin. Cependant, vous serez quelque peu limité par la version gratuite de ce plugin.
Par exemple, vous ne pourrez pas créer de tables basées sur des requêtes MSQL ou extraire des informations de Google Spreadsheets à moins d'effectuer une mise à niveau. La version premium commence à 59 $ par an pour le niveau de tarification de base et atteint 249 $ par an pour le package développeur.

Ajout de capacités multilingues

Alors que l'adoption de WordPress a continué d'augmenter dans le monde, elle a suscité un besoin croissant de fonctionnalités multilingues, qui permettent aux sites d'être traduits dans les langues locales en fonction de l'emplacement de l'utilisateur.

Ce type de fonctionnalité est énorme pour les entreprises ayant des clients dans plusieurs pays, et avec WordPress, l'ajouter à votre site n'est pas aussi difficile que vous pourriez le penser. En fait, cela peut être accompli en installant un plugin tel que Weglot, qui vous permet de rendre votre site Web multilingue en quelques minutes - sans avoir besoin de code.

Weglot est également compatible avec tous les thèmes et plugins WordPress, ce qui signifie qu'il fonctionnera sur n'importe quel thème que vous finirez par utiliser et qu'il ne causera pas de problèmes avec vos autres plugins. Lorsqu'il est ajouté à l'un des thèmes WordPress Premium de WP Engine, Weglot aide les propriétaires de sites à créer un site mobile réactif et compatible SEO, accessible dans n'importe quelle langue.

Consultez ce guide pour en savoir plus et visitez WP Engine pour en savoir plus sur nos différents plans et les autres caractéristiques et fonctionnalités fournies avec notre plate-forme d'expérience numérique pour WordPress.

Réactivité mobile pour le référencement

En termes simples, les sites Web adaptés aux mobiles sont récompensés par Google dans les résultats de recherche organiques. Entre 2015 et 2016, un certain nombre de mises à jour ont été ajoutées à l'algorithme de classement pour favoriser les sites Web réactifs. Il est important de noter que parce que la vitesse joue un rôle énorme dans la convivialité pour les utilisateurs mobiles, cela contribue également à un meilleur classement dans les moteurs de recherche.

Bien sûr, les sites Web réactifs à chargement rapide s'appuient sur un hébergement exceptionnel pour réussir. Lorsque vous choisissez une société d'hébergement de qualité telle que WP Engine (nous proposons PHP 7 en standard et un réseau de diffusion de contenu gratuit sur les plans de niveau supérieur), vous remarquerez des temps de chargement plus rapides et un fonctionnement plus fluide tout autour.

Construire de manière réactive avec WP Engine

Travailler vers un site Web réactif devrait être une priorité dans notre monde dépendant du mobile. Il y a beaucoup à suivre, mais ici, chez WP Engine, nous pouvons vous aider à vous diriger vers les meilleures ressources pour développeurs WordPress et des thèmes hautement réactifs pour les utilisateurs mobiles.

De plus, nous avons une grande variété de plans et de solutions pour votre site Web. Nous vous aiderons à construire de manière réactive sur notre plateforme d'expérience numérique, et vous n'aurez pas à vous soucier de perdre des visiteurs à cause de la taille de l'écran !