Meilleures pratiques pour créer un thème WordPress WooCommerce adapté aux mobiles

Créer un thème WordPress WooCommerce adapté aux mobiles peut être délicat. De nombreux facteurs doivent être pris en compte en matière de performances mobiles, de la vitesse de chargement aux plugins en passant par l'optimisation des images.

Un thème WooCommerce doit bien fonctionner sur mobile pour des raisons évidentes ; Les acheteurs de commerce électronique cliqueront si un site Web peut être plus attrayant à utiliser sur mobile.

En plus de cela, Google utilise les meilleures pratiques d'indexation mobile d'abord, ce qui signifie qu'ils donneront la priorité aux versions mobiles des sites Web en ce qui concerne l'indexation et le classement. Il est donc très important de s'assurer que votre thème WooCommerce est aussi adapté aux mobiles que possible.

Si vous êtes nouveau sur WooCommerce et que vous souhaitez créer un thème adapté aux mobiles ou améliorer les performances mobiles d'un thème actuel, voici quelques facteurs clés que vous voudrez peut-être prendre en compte.

1. Choisissez un thème réactif

Choisir un thème responsive sera primordial en matière de performances mobiles. Si vous avez le même thème depuis un certain temps, c'est une bonne idée de le tester en utilisant un outil de test adapté aux mobiles (plus d'informations à ce sujet dans la section suivante).

Si votre version de WordPress ou de votre thème nécessite des mises à jour, c'est le moment ; même des ajustements mineurs peuvent rendre votre thème plus fluide sur mobile et résoudre certains petits problèmes dont vous devez être conscient.

Vous devriez pouvoir le voir dans votre menu d'administration WordPress ; aller à Tableau de bord> Mises à jour devrait signaler toutes les nouvelles mises à jour que vous devez installer. Cela peut prendre un peu de temps, mais il vaut la peine de s'assurer que votre site Web fonctionne correctement.

Assurez-vous simplement de tester le thème après la mise à jour pour vous assurer que tout fonctionne comme il se doit.

Choisir un nouveau thème : quelques conseils

Choisir un nouveau thème est plus complexe qu'il n'y paraît ! Il existe des milliers de thèmes WooCommerce pour WordPress ; les passer au crible prend un peu de temps, mais il y a quelques points que vous pouvez garder à l'esprit pour faciliter le processus :

• Testez le thème pour voir comment il fonctionne sur un écran de taille mobile. Vous pouvez le faire en utilisant la démo, ce qui vous donne une bonne idée de son apparence sur un écran plus petit.
• Consultez les avis des autres utilisateurs. Vous pouvez appuyer sur Ctrl+F et saisir « réactif » ou « mobile » pour voir ce qui se passe. S'il y a des problèmes dans ce domaine, vous pourrez peut-être trouver des critiques plus détaillées.
• Regardez la vitesse. Encore une fois, vérifier les avis ici peut aider, mais vous pouvez également lire la description du thème pour vous assurer que le thème fonctionne correctement et rapidement. (Nous aborderons la vitesse plus en détail plus loin dans cet article. Il existe des moyens d'améliorer la vitesse de votre thème existant, mais il est bon de savoir si un nouveau thème que vous êtes sur le point de payer/d'installer est conçu pour être aussi le plus vite possible.)

Vous pouvez voir dans l'exemple ci-dessus (Presence by WPZoom) que vous pouvez afficher le thème sur différents appareils ; c'est un excellent moyen de vous assurer que votre site Web s'affiche bien sur les ordinateurs de bureau, les mobiles et les tablettes.

L'article continue ci-dessous

2. Utilisez un outil de test adapté aux mobiles

Vous pouvez tester votre thème existant ou nouvellement installé en utilisant un outil de test adapté aux mobiles, comme cet outil gratuit de Google. Copiez et collez simplement votre URL dans la barre de recherche.

Cela prendra quelques instants, mais il arrivera avec un verdict : soit vous obtiendrez une coche verte ou une croix rouge. Si l'outil décide que votre site n'est pas utilisable sur mobile, il vous dira pourquoi (par exemple, il pourrait dire "texte trop petit pour être lu").

Cela signifie que vous pouvez apporter les modifications nécessaires pour rendre votre thème WooCommerce facile à naviguer pour les utilisateurs mobiles. Passez en revue les modifications suggérées et voyez si vous pouvez ajuster votre thème pour les adapter. Même des corrections mineures (comme un texte légèrement trop petit) peuvent faire une grande différence pour les utilisateurs mobiles !

3. Pensez aux plugins

Vous pouvez maintenant commencer à penser aux plugins. Les plugins peuvent ajouter beaucoup en termes de conception et de fonctionnalités sur un ordinateur de bureau, mais ces mêmes fonctionnalités peuvent causer des problèmes sur mobile. Ainsi, chaque fois que vous installez un nouveau plugin pour le thème que vous avez choisi, prévisualisez son apparence sur mobile et sur ordinateur.

Certains plugins sont spécifiquement conçus pour aider à augmenter les performances de votre site Web - vous pouvez en savoir plus à ce sujet dans notre guide des plugins WordPress indispensables pour améliorer votre site Web pour des performances optimales.

Bien que ce ne soit pas une bonne idée de surcharger les plugins (cela peut ralentir votre site), quelques plugins bien choisis peuvent faire une énorme différence en termes de performances et de facilité d'utilisation du point de vue du visiteur.

4. Pensez à la vitesse

Plus votre thème WordPress WooCommerce se charge rapidement, mieux c'est ! Les clients se détourneront si votre site Web prend beaucoup de temps à charger, mais aller au fond des temps de chargement lents peut prendre du temps et des efforts.
Vous pouvez utiliser un outil gratuit pour évaluer honnêtement le temps de chargement de votre page : PageSpeed ​​Insights de Google est une excellente option.

Si vous collez votre URL dans la barre de recherche, vous obtiendrez une ventilation détaillée dans quatre domaines clés : performances, accessibilité, meilleures pratiques et référencement.

Cela vous permet de faire des ajustements pour améliorer les domaines clés. Le principal domaine sur lequel se concentrer est la performance (si vous essayez d'améliorer la vitesse de chargement) : ce domaine décompose certains facteurs clés afin que vous puissiez identifier tout ce qui cause un retard dans votre vitesse de chargement. Si vous avez besoin d'aide pour comprendre ce que ces mesures signifient, Google dispose d'une bonne base de connaissances avec plus d'informations.

Vous pouvez également trouver des widgets de mise en cache pour améliorer la vitesse du site, ce qui peut être la solution si vos temps de chargement sont trop longs.
Enfin, vous pouvez utiliser un outil payant pour tester la vitesse des pages : Synthetic by Sematext, par exemple, propose une surveillance du site Web pour diagnostiquer et signaler tout problème de performance. Cela peut être une bonne option si vous exploitez une grande boutique de commerce électronique et que vous souhaitez être automatiquement alerté des problèmes potentiels.

L'article continue ci-dessous

5. Optimisez les images

L'optimisation des images sera également importante. Par exemple, certains thèmes WordPress WooCommerce sont magnifiques sur le bureau, mais les images doivent mieux être réduites pour le mobile.

Vous pouvez trouver des plugins d'optimisation d'image pour vous aider - consultez notre revue WP Compress pour plus de détails.

Deux choses essentielles que vous pouvez faire pour optimiser vos images pour mobile :

• Compressez vos images – regardez la taille de vos images, y compris les photos que vous utilisez dans votre thème. La réduction de la taille de leur fichier peut contribuer à améliorer les performances des ordinateurs de bureau et mobiles. Lisez notre revue Optimus pour en savoir plus à ce sujet !
• Supprimez les images inutiles – alors que certains thèmes de photographie sont beaux, c'est une bonne idée de vérifier si toutes les images sont nécessaires du point de vue du client. Un outil de test fractionné peut aider ici; vous pouvez exécuter un test A/B avec certaines images supprimées pour voir comment cela modifie le parcours du client sur votre site.
• Utilisez un CDN pour accélérer la livraison des images - l'utilisation d'un service de réseau de diffusion de contenu peut vous aider ici. Il permet aux pages de se charger plus rapidement en réduisant la charge sur le serveur de votre site. Bien que cela implique quelques étapes supplémentaires, cela en vaut la peine.

L'optimisation des images peut faire une énorme différence de vitesse, donc passer un peu de temps à parcourir les images existantes pour réduire autant que possible la taille de leur fichier sans compromettre la qualité est un bon investissement.

6. Quelques pièges à éviter

Il y a quelques choses que vous devriez éviter lorsqu'il s'agit de créer un thème WordPress WooCommerce adapté aux mobiles :

• Évitez les pop-ups sur mobile. Les pop-ups peuvent être incroyablement frustrants et difficiles à quitter pour les utilisateurs mobiles. Si les visiteurs sont bombardés de pop-ups, ils peuvent très bien cliquer dessus. Même les fenêtres contextuelles d'inscription aux e-mails (idéales pour élargir votre liste de marketing par e-mail) peuvent être fastidieuses et ennuyeuses pour les utilisateurs mobiles.
• Vérifiez vos plugins. Les plugins qui ajoutent du contenu supplémentaire et des menus dynamiques doivent également être testés sur mobile : parfois, ils ne s'adaptent pas bien sur mobile et peuvent rendre la navigation frustrante sur un écran plus petit.
• Faites attention à vos analyses. Si vous êtes préoccupé par la façon dont les utilisateurs interagissent avec votre nouveau thème, consultez le taux d'engagement : il mesure la façon dont vos utilisateurs interagissent avec votre site Web et le temps qu'ils y passent. Par exemple, si les utilisateurs mobiles cliquent rapidement, ils peuvent trouver l'expérience mobile frustrante.
• Pensez à le tester ! Lorsque votre thème est défini, consultez-le sur un appareil mobile. Vérifiez chaque page, de vos pages de produits à votre blog. Les images sont-elles toujours belles ? Les menus sont-ils compatibles avec les écrans tactiles ?

N'oubliez pas les utilisateurs d'iPad/tablette. C'est aussi une bonne idée de vérifier le fonctionnement de votre site Web sur une tablette : les images sont-elles suffisamment réduites ? Les menus sont-ils utilisables sur un écran de la taille d'une tablette ?

Questions fréquemment posées

Avant de partir, voici quelques questions fréquemment posées que vous voudrez peut-être connaître :

WooCommerce convient-il aux débutants ?

A notre avis, oui. L'installation d'un thème WooCommerce pour WordPress prend quelques étapes ; mais une fois que vous l'avez fait, WooCommerce lui-même est génial pour le commerce électronique. Il propose des guides pour les nouveaux propriétaires de magasins, qui sont utiles, et l'interface WooCommerce est facile à naviguer.

Combien coûte la gestion d'un site WordPress ?

Le coût réel de fonctionnement d'un site WordPress varie en fonction de l'utilisation que vous en faites. Vous pouvez voir une ventilation détaillée dans notre guide : Combien cela coûte-t-il de créer un site Web WordPress ?

Certains des plugins mentionnés dans cet article ont un coût supplémentaire. Ainsi, bien que WooCommerce soit gratuit, certains outils d'optimisation mobile constitueront un investissement supplémentaire. (Bien que nous pensons qu'ils valent bien l'argent !)

L'article continue ci-dessous

Tous les thèmes WooCommerce sont-ils compatibles avec les mobiles ?

Pas nécessairement. La plupart des nouveaux thèmes sont conçus pour les utilisateurs mobiles, mais certains thèmes plus anciens peuvent ne pas fonctionner aussi bien sur mobile que sur ordinateur.

Le propre thème de WooCommerce, Storefront, est conçu pour être adapté aux mobiles, donc si vous voulez garder les choses simples, vous pouvez toujours vous en tenir à Storefront et le personnaliser en fonction de votre marque.

Création d'un thème adapté aux mobiles : principes clés

J'espère que cela vous a aidé à acquérir une idée de base pour vous assurer que votre thème WooCommerce choisi pour WordPress fonctionne bien sur mobile.

Les éléments clés à considérer sont la vitesse et la navigation. Vous devrez vous assurer que votre site Web fonctionne aussi rapidement que possible, de la page d'accueil au paiement.

La navigation est un facteur énorme. Tout menu maladroit et difficile à utiliser sur mobile frustrera vos clients, il est donc essentiel de tester votre thème sur des appareils mobiles. de superbes menus sur un bureau peuvent être ennuyeux à utiliser avec vos pouces sur un petit écran.

En fin de compte, la plupart des nouveaux thèmes sont conçus pour le mobile, mais cela vaut toujours la peine de s'assurer que le thème que vous avez choisi fonctionne sur tous les appareils. À long terme, cela peut augmenter la satisfaction client et améliorer les ventes, et une expérience mobile particulièrement fluide peut même inciter les clients à revenir à l'avenir !