WordPress est un CMS qui permet de créer facilement son site web vitrine ou même un site e-commerce. Cependant, avoir un site web n’est désormais plus suffisant, il faut aussi que ce site internet soit moderne et conçu de manière à ce que tous les utilisateurs puissent le consulter sur tous les supports existants (mobile, tablette et ordinateur).
Plusieurs extensions et thèmes WordPress sont disponibles pour rendre un site adapté à tous les types d’écrans, mais faut-il encore savoir comment les choisir. La création de site responsive peut paraître complexe, mais nous sommes là pour vous aider à créer votre site avec succès !
Dans cet article, nous vous expliquerons comme rendre votre site responsive avec WordPress en vous proposant diverses solutions comme le choix d’une extension ou d’un thème particulier.
Sommaire :
On entend souvent parler de site responsive, mais savez-vous ce qu’est un site web « responsive » ?
Vous utilisez tous les jours des sites responsives sans même le savoir puisque vous consultez des sites internet sur votre ordinateur, sur votre tablette ou votre smartphone. Le responsive est une manière de concevoir un site, plus précisément son design pour qu’il s’adapte à toutes les résolutions d’écran.
Un site responsive est donc un site web qui peut être consulté sur n’importe appareil comme un smartphone ou une tablette qui ont des tailles d’écrans différentes de celui d’un ordinateur. L’affichage du site responsive doit être pensé pour que la navigation et la consultation des pages du site soient adaptables à toutes les résolutions d’écran.
Le contenu d’un site responsive sera sensiblement le même si vous le consultez à partir d’un ordinateur ou un smartphone, seule la mise en page sera adaptée.
Côté tarif, le prix d’un site WordPress responsive est sensiblement le même qu’un site traditionnel. Pourquoi cela ? Parce que la plupart des thèmes WordPress sont nativement responsive.
La première raison pour laquelle il est important d’avoir un site responsive est pour améliorer l’expérience utilisateur. En effet, si vous consultez un site web qui n’est pas responsive à partir d’un smartphone, vous aurez souvent un site qui a un affichage trop petit. Les textes seront difficilement lisibles sans effectuer de zoom dessus et il y aura d’autres éléments avec lesquels il sera compliqué d’interagir.
L’expérience utilisateur est un facteur essentiel à prendre en compte dans la création d’un site web puisque c’est ce qui déterminera souvent si un visiteur reste longtemps sur votre site ou s’il le quitte en peu de temps. Par exemple, un site conçu sans penser à un affichage optimal sur smartphone peut vite agacer, car trop compliqué à utiliser sur une taille d’écran plus petite qu’un ordinateur.
De plus, avoir une expérience utilisateur optimisée et un site responsive sont des critères de plus en plus pris en compte par les moteurs de recherche, dont Google, dans le référencement naturel des sites web. Un site responsive aura donc plus de chances d’être mieux positionné qu’un site qui ne l’est pas sur un des critères identiques.
WordPress est un bon choix pour créer un site responsive car il existe de nombreux thèmes déjà conçus avec un affichage responsive. Vous aurez plus qu’à concevoir votre site WordPress avec l’un de ces thèmes pour créer un site responsive facilement. Si vous avez déjà un site WordPress, mais qui n’est pas responsive vous avez toujours la possibilité de rendre votre site responsive grâce à des extensions de constructeur de pages.
Les utilisateurs mobiles sont de plus en plus nombreux et le smartphone devient l’appareil le plus utilisé pour naviguer sur internet. De ce fait, il est impératif de proposer un affichage adapté aux mobiles sur votre site.
Si vous débutez dans la création de votre site ou que vous avez déjà un site sur WordPress, vous trouverez tous les outils sur ce CMS pour créer un site responsive efficace.
La première solution pour créer un site responsive sur WordPress est d’utiliser un thème qui propose des éléments de design conçu pour s’adapter à toutes les résolutions d’écran. La seconde possibilité que vous ayez et d’utiliser un plugin qui va vous permettre de rendre votre site responsive.
Grâce au thème, les modules que vous pourrez utiliser seront déjà conçus pour être responsives, vous n’aurez que peu de réglages à faire pour rendre votre site responsive. Le choix du thème est donc le plus important puisque vous devrez vous satisfaire du design qu’il propose.
L’utilisation d’une extension pour rendre votre site responsive vous offre de plus grandes possibilités, car vous pourrez configurer l’affichage de chaque élément sur plusieurs résolutions d’écran.
Un thème WordPress est le cœur du design de votre site web. Celui-ci déterminera majoritairement l’apparence des éléments de votre site et donc celle de votre site tout entier. Lorsque vous choisissez un thème, il est important de regarder les éléments de design que propose le thème à travers une démonstration du thème par exemple.
Mais le design ne fait pas tout et que le site soit responsive est tout aussi important pour faciliter la navigation sur le site avec un smartphone. Dans l’optique de réunir ces deux critères essentiels à un site web, un bon design responsive, nous avons sélectionné pour vous 5 thèmes qui vont vous permettre de créer un beau site avec une expérience utilisateur optimale.
Il existe bien sûr d’autres nombreux thèmes WordPress qui sont excellents dans leur domaine. Donc, si vous trouvez un thème qui n’apparaît pas dans cette liste, mais qui vous plaît, n’hésitez pas à consulter la démonstration de ce thème pour vérifier qu’il soit bien responsive avant de l’acheter.
Voici sans plus attendre les thèmes qui ont retenu notre attention pour créer un site responsive sur WordPress.
Divi n’est pas qu’un simple thème. Si vous achetez le thème sur le site du concepteur ElegantThemes, il vous sera offert avec le « page builder » du même nom. En effet, beaucoup de gens connaissent Divi pour son constructeur de pages qui est très complet et pratique pour créer un site avec un large panel d’options personnalisables, mais son thème est tout aussi performant.
Le thème Divi est entièrement responsive et s’adapte parfaitement à tous les appareils. En bonus, vous aurez accès à une grande librairie de modèles de pages et d’éléments que vous pourrez importer directement sur votre site. Ces modèles vous permettront de créer votre site encore plus rapidement, car vous n’aurez plus qu’à personnaliser des éléments design déjà conçus par l’équipe de Divi.
Pour ce qui est du constructeur de pages, celui-ci vous apporte de nombreuses options pour modifier votre site comme bon vous semble, dont la gestion du responsive, mais nous vous en reparlerons plus tard dans la suite de cet article.
Tout aussi connu que le thème précédent, Astra est un thème complet qui peut convenir pour tout type de site. Que vous ayez un site vitrine ou un site e-commerce dans n’importe quel domaine d’activité, vous pourrez le créer avec le thème Astra.
Ce thème responsif se veut léger et flexible pour vous permettre de concevoir rapidement un site web sans avoir à toucher une seule ligne de code. Il est accompagné par de nombreuses options de personnalisations, dont certaines dédiées à la gestion de l’en-tête du site ce qui vous sera très utile pour afficher un en-tête adapté à une utilisation sous mobile.
Livré avec un grand nombre de fonctionnalités, le thème OceanWP est un outil idéal pour créer tout genre de site. Avec OceanWP, vous pourrez créer un site avec un design épuré et efficace sur toutes les tailles d’écran.
L’une des particularités de ce thème est qu’il est très léger et offre de bonnes performances lors du chargement des pages du site. C’est un bon point pour l’expérience utilisateur et les critères de référencement imposés par les moteurs de recherche.
Le thème Authority Pro est conçu pour mettre en avant les compétences d’une personnalité. Bien que vous puissiez créer n’importe quel site avec, c’est un thème dédié à la vente de formations et cours en ligne.
Authority Pro est gratuit, mais peut être acheté avec pour profiter du constructeur de pages « Genesis Pro » conçu par StudioPress qui est aussi à l’origine du thème. Genesis Pro vous donnera davantage de possibilités dans la personnalisation du thème Authority Pro, mais aussi dans la gestion de votre site web.
Ultra est un thème généraliste qui n’est pas destiné à un type de site en particulier. Grâce à ce thème et son fonctionnement en « drag-and-drop » vous pourrez créer facilement un site responsive et en quelques clics seulement grâce à plusieurs modèles de sites que vous pourrez importer à n’importe quel moment.
Vous trouverez avec ce thème de nombreuses fonctionnalités comme un compteur, l’intégration de Google Maps, plusieurs types de carrousels ou des animations.
Choisir un bon thème est essentiel pour avoir un beau site qui soit responsive, cependant parfois le thème que vous utiliserez n’aura pas tous les éléments de design ou la personnalisation de l’affichage que vous aimeriez avoir.
Dans ce cas et aussi lorsqu’un thème n’est pas responsive par défaut, il est possible d’utiliser une extension WordPress qui vous offrira davantage de fonctionnalités qu’un thème ne pourra jamais vous offrir.
Nous avons déjà parlé de ces extensions plus tôt dans cet article, ce sont les constructeurs de pages qui permettent de créer des sites quasiment 100% personnalisables. Mais il existe aussi un autre type d’extension que nous vous présenterons qui vous permettra d’ajouter des options d’affichage pour rendre votre site responsive.
Commençons par la présentation des constructeurs de pages les plus populaires sur WordPress.
Les constructeurs de pages sont des extensions à installer sur votre WordPress qui permettent de concevoir des sites web plus complexes qu’avec l’éditeur Gutenberg proposé par défaut sur WordPress.
L’avantage principal de ces constructeurs est que vous pourrez faire toutes ces modifications sans avoir à toucher une seule ligne de code, ce qui est idéal pour les débutants en création de sites et les allergiques au code.
À l’heure actuelle, il existe plusieurs constructeurs de pages qui se battent pour la première place du meilleur constructeur de pages sur WordPress. Mais sans aucun doute, si vous recherchez un constructeur qui vous offre un maximum de fonctionnalités et de liberté pour créer votre site responsive, vous devrez vous tourner vers l’un de ces 5 constructeurs de pages :
Sur chacun de ces constructeurs de pages, vous pourrez paramétrer l’affichage de chacun des éléments de votre site selon différentes résolutions d’écrans. Ainsi, vous aurez un contrôle total sur le côté responsive de votre site WordPress.
Bien qu’il n’y ait pas réellement de « meilleurs » constructeur parmi ceux proposés ci-dessus, certains pourraient plus vous convenir que d’autres. Ainsi :
Enfin, l’une des dernières possibilités que vous ayez pour rendre votre site WordPress responsive est d’utiliser une extension comme « WPTouch Pro ». Concrètement, WP Touch Pro va modifier le comportement de votre site lorsque vos visiteurs viendront naviguer sur votre site WordPress à partir d’un terminal mobile.
L’extension proposera à vos utilisateurs un thème entièrement responsive lorsqu’ils sont sur smartphone, même si votre thème de base n’est pas conçu pour être adapté à d’autres tailles d’écrans que celui d’un ordinateur.
WPTouch Pro propose même à travers plusieurs options d’afficher des éléments différents de la version « Ordinateur » à vos visiteurs « Smartphone ». Si vous ne souhaitez pas utiliser un thème responsive ou que vous ne voulez pas refaire entièrement votre site WordPress avec un constructeur de pages, alors l’extension WPTouch Pro sera votre ultime solution !
Si votre site WordPress n’est pas encore responsive, vous pouvez choisir l’une des solutions proposées dans cet article pour adapter rapidement votre site à tous les appareils. Rendre son site responsive est important pour que tous vos utilisateurs puissent consulter votre site sans difficulté de navigation.
Il se peut cependant que vous ayez besoin de refaire entièrement votre site web pour le rendre responsive, ce qui est un gros projet qui nécessite plusieurs compétences. Dans ce cas, n’hésitez pas à poster une annonce gratuitement sur Codeur.com pour trouver rapidement l’aide d’un développeur WordPress freelance qui pourra vous aider à rendre votre site WordPress responsive.