Suivez le guide et développez un site e-commerce responsive et adapté à tous les supports et écrans avec WordPress et les modules Jetpack

Il existe des centaines de milliers de sites e-commerce sur Internet. Il est alors absolument nécessaire de vous démarquer de la concurrence pour attirer des clients et faire prospérer votre affaire. L’une des étapes essentielles est de créer une plateforme dite responsive, c’est-à-dire adaptée à tous les supports (ordinateur, smartphone, tablette…). Qu’est-ce que cela signifie ? Quels en sont les avantages ? Comment le faire avec WordPress ?

Qu’est-ce qu’un site internet responsive?

Depuis 2015, Google favorise les sites internet dits responsive. Ce terme désigne une plateforme qui adapte automatiquement son contenu à la largeur de l’écran sur lequel elle s’affiche, qu’il s’agisse d’un écran d’ordinateur de bureau, d’un smartphone ou d’une tablette. Le responsive est également appelé design adaptatif. 

Ainsi, lorsque votre site internet s’affichera sur un téléphone portable, la taille des images sera réduite pour apparaître en entier sur l’écran. Les différents modules, eux, se réagenceront tout seuls pour conserver une présentation claire et logique. La taille du texte sera également adaptée. Cela permettra à vos utilisateurs de continuer à utiliser vos services normalement, avec une adaptation minimale.

Les avantages d’un site internet responsive 

Utiliser un site internet responsive présente de nombreux avantages, tant pour vous que pour vos utilisateurs.

Une meilleure gestion de votre site internet 

Le design adaptatif d’un site internet vous permet tout d’abord d’en simplifier le développement et la maintenance. En effet, les différentes versions partageront le même code source, quel que soit le support. Vous n’aurez alors à apporter de modifications qu’une seule fois, sans aucune refonte nécessaire, sans perdre de temps à répéter les mêmes manipulations entre le site desktop et le site mobile, et sans perdre inutilement de l’argent en développement ou en achetant un nom de domaine supplémentaire.

Un meilleur référencement

En 2015, Google a effectué une mise à jour de ses algorithmes, appelée Mobile First. Comme son nom l’indique, elle favorise le référencement des sites internet présentant un design adaptatif à ses utilisateurs. Cette évolution s’explique par le fait que les trois quarts des smartphones et tablettes dans le monde sont équipés d’Android, le système d’exploitation mis au point par l’entreprise, incluant par défaut le navigateur maison, Chrome. Par ailleurs, de plus en plus de monde utilise son appareil mobile pour visiter des sites, qu’il s’agisse d’un média ou d’une plateforme de e-commerce – plus de la moitié des utilisateurs en France.

Le référencement est essentiel pour tout site internet, mais particulièrement pour les boutiques en ligne, dont la majorité du trafic est organique. Le responsive design doit donc être au cœur de vos pensées lorsque vous créerez votre site web.

Une meilleure expérience utilisateur

Vos visiteurs, justement, seront plus enclins à visiter votre boutique en ligne si elle est similaire sur leur ordinateur et sur leurs appareils mobiles. Par ailleurs, le chargement de vos pages sera bien plus rapide grâce au responsive design. C’est un avantage crucial pour élargir votre base de potentiels clients, qui n’ont aucun scrupule à quitter immédiatement un site internet dont les images mettent 20 secondes ou plus à s’afficher.

Ils bénéficieront également des mêmes fonctionnalités que sur la version desktop, ce qui leur évitera d’apprendre deux manières différentes de naviguer sur votre plateforme. Vous avez enfin plus de latitude pour améliorer son ergonomie, permettant à vos visiteurs d’acheter n’importe quel article ou service d’une simple pression du pouce.

Créer un site responsive avec WordPress

Le CMS WordPress est utilisé par plus du tiers des sites internet dans le monde, parmi lesquels de nombreux sites e-commerce. Il peut donc logiquement vous aider à rendre votre boutique en ligne responsive simplement.

Quelques astuces utiles

Avant de vous lancer dans le chantier du responsive design, plusieurs éléments sont à prendre en compte. Tout d’abord, assurez-vous que le thème que vous utilisez pour votre site est bien responsive. S’il est assez ancien, vérifiez qu’il n’existe pas une mise à jour en attente permettant de l’adapter à tous les supports. Dans le cas contraire, assurez-vous que cette option existe avant d’investir dans un nouveau thème. Vous pouvez le tester sur plusieurs résolutions différentes avant de le mettre en ligne.

Vos différents plugins doivent également être responsive, particulièrement ceux facilitant la mise en page. Si un carrousel ou une galerie ne défilent pas correctement sur la version mobile, le visiteur perdra tout intérêt à explorer votre site plus avant.

Vous devez également penser au temps de chargement de votre site sur un appareil mobile, bien souvent moins puissant qu’un ordinateur de bureau. Votre design doit être simple, sans trop de fioritures et avec des images correctement compressées. Plusieurs logiciels vous offrent la possibilité de réduire leur poids sans perdre en qualité.

Enfin, vous ou un membre de votre équipe devez maîtriser les langages HTML et CSS, qui forment la base de tout site internet. Si vous comptez appliquer un design responsive vous-même, le second vous permettra de configurer l’agencement des différents modules de votre plateforme en fonction du périphérique utilisé.

Quelques plugins utiles

L’immense communauté WordPress a pensé depuis longtemps à la question du responsive design, et certains de ses membres ont développé des plugins vous facilitant la tâche.

L’un des plus courants et simples d’utilisation est Jetpack, développé par Automattic, la maison mère de WordPress.com. Il s’agit d’une suite complète de plugins vous permettant d’adapter votre site internet aux appareils mobiles d’un seul clic. Aucune personnalisation n’est possible, mais votre tâche est grandement simplifiée. Il adapte également automatiquement tous vos visuels au support.

WP Mobile Detector, lui, est uniquement dédié au responsive design, et particulièrement aux smartphones. Il possède une base de données de plusieurs milliers de téléphones portables lui permettant d’afficher la meilleure version pour chaque utilisateur parmi un choix entre plusieurs thèmes. Vous aurez également accès à des statistiques sur les types de périphériques utilisés par vos visiteurs.

Enfin, WP Touch Pro est le plus avancé de tous. Sans avoir besoin d’aucune connaissance du code HTML ou de CSS, il vous permet de créer un thème responsive de A à Z pour votre site internet. Il est par ailleurs entièrement compatible avec WooCommerce, le principal plugin de e-commerce sur WordPress.

Développer un site responsive pour votre boutique en ligne ne présente que des avantages. Vous bénéficierez d’un meilleur référencement naturel, votre taux de conversion sera plus élevé, et vous gagnerez du temps et de l’argent sur le développement. De plus, en passant par WordPress, vous aurez une foultitude de plugins pour vous aider à chaque étape du processus.