Créer des sites Web réactifs sur mobiles – Pourquoi et comment ?

L’utilisation du Web sur téléphone mobile a dépassé celle des ordinateurs en 2016. Depuis, elle n’a montré aucun signe de ralentissement. Selon Broadband Search, en janvier 2022, les appareils mobiles détenaient la première place avec 55 % de part de marché, les ordinateurs de bureau arrivant à 42 % et les tablettes à 3 %.

Cela signifie que, selon votre niche commerciale, plus de la moitié de vos visiteurs de site sont susceptibles de consulter votre site Web depuis leur appareil mobile.

En tant que propriétaire de site Web, vous devez vous assurer que celui-ci a fière allure sur n’importe quel appareil afin de garantir que votre marque, votre activité et vos ventes ne souffrent pas. C’est pourquoi il est important que votre site Web soit adapté aux mobiles.

Si votre site n’est pas « mobile-friendly », les gens risquent de ne pas le trouver et votre activité risque fort d’en pâtir. Des plateformes populaires comme WordPress.com vous facilitent la vie, car tous leurs thèmes sont adaptés aux mobiles, même les gratuits.

Dans cet article, nous allons examiner ce qui entre dans la création de sites Web adaptés aux mobiles et pourquoi c’est important pour votre activité.

Mettons tout cela en contexte avant de commencer.

Design adapté aux mobiles vs design réactif – quelle est la différence ?

Avant de plonger dans la façon de créer un site Web réactif, passons en revue les principales différences entre les designs adaptés aux mobiles et les designs réactifs.

Design adapté aux mobiles

Un design adapté aux mobiles signifie que le site Web est construit pour fonctionner exactement de la même manière sur différents appareils. Autrement dit, que vous consultiez le site sur un ordinateur de bureau ou un mobile, vous aurez essentiellement la même expérience. 

Par défaut, des fonctionnalités telles que la navigation complexe, les longues animations ou les grandes images ne fonctionnent pas bien sur les mobiles, donc un site adapté aux mobiles devrait être construit sans ces fonctionnalités, peu importe la plateforme sur laquelle vous le consultez. Les utilisateurs mobiles peuvent interagir avec des formulaires, utiliser des menus déroulants et voir des animations comme s’ils utilisaient un ordinateur de bureau. 

Cela est communément appelé l’expérience mobile « classique », car on a souvent l’impression d’essayer de naviguer sur un site qui n’a pas été conçu avec les utilisateurs mobiles à l’esprit, même si le design du site a été modifié pour accommoder les utilisateurs mobiles et améliorer son « amitié » globale avec les mobiles.

Design réactif

Une option plus courante et moderne pour les sites Web est le « design réactif » (ou « design responsive »). Il garantit que le site Web réagit en fonction des besoins de l’appareil sur lequel il est consulté. 

Par exemple, la mise en page peut passer de trois colonnes à une colonne lorsque l’utilisateur passe du mode paysage au mode portrait sur mobile. Le design réactif redimensionne également les images pour qu’elles s’ajustent à la largeur de l’écran, assurant ainsi que les visiteurs voient les images de manière optimale, quelle que soit la taille de l’écran de leur appareil. Enfin, le design réactif ajuste aussi le menu de navigation en fonction de l’appareil – apparaissant comme une barre latérale sur un ordinateur de bureau, mais comme un menu hamburger rétractable sur mobile.

Comment créer des sites Web réactifs ?

L’outil de test de compatibilité mobile de Google vous permet de vérifier si Google considère votre site Web comme adapté aux mobiles ou non. Oui, nous savons que nous venons de dire que nous nous concentrons sur la réactivité mobile plutôt que sur l’adaptabilité mobile. Cet outil teste en fait si votre site est réactif, mais qui sommes-nous pour dire à Google d’utiliser une terminologie cohérente ?

Il vous suffit d’entrer l’URL de votre site et vous obtiendrez votre résultat immédiatement. Si votre site n’est pas mobile friendly, Google pourrait vous pénaliser dans les classements de recherche mobile, permettant à moins de personnes de trouver votre site dans leurs résultats de recherche.

Si vous constatez que les performances mobiles de votre site sont insuffisantes, voici ce que vous pouvez faire pour offrir à vos utilisateurs la meilleure expérience possible :

Utilisez une plateforme qui prend en charge le design réactif

Tout d’abord, vous devez vous assurer que vous utilisez une plateforme qui prend en charge le design réactif.

Si vous décidez de construire votre site Web avec WordPress.com, vous pouvez choisir parmi plus de 100 thèmes magnifiques qui vous permettent de changer l’apparence et la sensation de votre site Web.

Ces modèles personnalisables permettent aux utilisateurs de changer le design et l’esthétique globaux de leurs sites. Les thèmes WordPress.com sont disponibles pour chaque secteur, y compris l’éducation, l’immobilier, la publicité, la santé et le fitness, la cuisine, la pâtisserie, les logiciels ou la photographie… La liste est encore longue.

Chaque thème WordPress.com est réactif. Peu importe le thème que vous décidez d’utiliser, votre site Web se chargera exactement comme vous le souhaitez sur les appareils mobiles, tablettes et ordinateurs de bureau.

Par exemple, si vous décidez de mettre une image sur la page d’accueil de votre site Web, elle apparaîtra exactement où vous le souhaitez pour les personnes visitant votre site, peu importe le type d’appareil qu’elles utilisent pour y accéder. Cela aide à améliorer l’expérience utilisateur sur votre site Web et son classement dans les résultats de recherche mobile. Chaque thème WordPress présente une mise en page différente de menus, de widgets, de pages, etc., mais chaque élément se présente de façon optimale sur chaque appareil.

Testez soigneusement les personnalisations

De nombreux créateurs de sites Web proposent des thèmes et des expériences réactives clé en main. Mais parfois, ils ne répondent pas aux besoins spécifiques des propriétaires d’entreprise, car ils sont destinés à des sites Web simples. Une fois que vous commencez à ajouter des personnalisations à votre site, vous pouvez rencontrer des problèmes inédits.

Par exemple, disons que vous ajoutez des éléments CSS à votre site Web pour attirer l’attention sur un texte important. Une fois qu’un utilisateur mobile visite votre site Web, le texte peut ne pas apparaître comme vous le souhaitiez. Les utilisateurs mobiles ne bénéficient alors pas de la même expérience utilisateur.

Si vous utilisez le plan avec extensions WordPress.com, vous avez la possibilité d’ajouter des éléments personnalisés à votre site Web, ainsi que d’ajouter du CSS et des extensions tierces. Assurez-vous toujours de tester, tester et retester lorsque vous utilisez différentes options de personnalisation pour vous assurer que votre site Web a une compatibilité mobile maximale.

De même, vous devriez vérifier si les extensions que vous souhaitez utiliser disposent d’un design réactif avant de les installer sur votre site Web. Ainsi, vous n’aurez pas à vous demander pourquoi votre site n’est pas réactif alors que votre thème l’est.

Il est également conseillé d’éviter les fenêtres contextuelles (ou pop-ups) en plein écran, qui peuvent être désagréables sur les téléphones mobiles. Par exemple, si un utilisateur mobile est en train de lire un article sur votre blog, une fenêtre contextuelle plein écran est la dernière chose qu’il souhaite voir sur un espace déjà limité.

De plus, vous pouvez utiliser des requêtes média CSS et des points de rupture pour appliquer différents ensembles de règles aux éléments personnalisés en fonction de conditions telles que la largeur du navigateur ou le type d’appareil. Cela signifie que chaque fois qu’un utilisateur mobile visite votre site Web, les éléments CSS changeront automatiquement et s’adapteront à la taille de l’écran de l’utilisateur. Cela entre dans des détails techniques qui sont quelque peu en dehors du cadre de l’article ; vous pouvez trouver plus d’informations sur l’utilisation des points de rupture pour les appareils mobiles ici.

Compressez vos fichiers

La compression des fichiers sur votre site Web est un excellent moyen d’améliorer la réactivité des appareils mobiles. La plupart des appareils mobiles étant moins puissants et utilisant moins de bande passante que les ordinateurs de bureau, il est essentiel de réduire au minimum l’utilisation des données et de l’énergie pour garantir une bonne expérience mobile. D’un point de vue technique, cela signifie que les images et les animations en haute résolution sur votre site Web peuvent ralentir l’expérience de certains utilisateurs mobiles.

La bonne nouvelle, c’est qu’avec WordPress.com, votre site prend automatiquement en charge la compression des fichiers CSS, HTML et JavaScript. Vous n’avez pas à vous soucier de trouver des extensions tierces pour le faire.

Une fois que vous avez terminé d’ajouter tous vos éléments CSS et votre code à votre site Web, vous n’avez pas à vous inquiéter qu’ils rendent votre site non réactif pour les utilisateurs mobiles. De plus, les sites WordPress.com présentent les images en utilisant le réseau de diffusion de contenu Photon de Jetpack (CDN). Cela aide à garantir que les images se chargent à une vitesse fulgurante, où que se trouvent vos utilisateurs, ce qui entraîne une expérience utilisateur beaucoup plus fluide.  

Simplifiez la navigation

Que votre menu de navigation se replie en une seule icône ou s’affiche horizontalement en haut d’une fenêtre mobile, la même règle s’applique : gardez-le simple.

Trop de choix de navigation ou de sous-menus peuvent être écrasants, voire créer des problèmes de formatage sur les appareils mobiles.

Lorsqu’un utilisateur mobile visite un site Web, les options de navigation compliquées sont la dernière chose qu’il souhaite voir. Elles peuvent être source de confusion sur les appareils mobiles, où il est impossible de voir toutes les options à la fois. En gardant les choses simples, vous vous assurez qu’un utilisateur mobile peut facilement naviguer sur votre site Web.

Par exemple, si vous vendez des vêtements, au lieu de fournir une option de navigation pour chaque sous-catégorie de jeans, vous pouvez choisir d’afficher uniquement les catégories principales. Ainsi, au lieu de créer un élément de menu pour Jeans ajustés et Jeans droits, vous pouvez créer un élément de menu pour Jeans qui inclut les deux sous-catégories. Ainsi, l’utilisateur n’aura pas de mal à trouver des jeans sur votre site Web lorsqu’il navigue avec son appareil mobile. 

Contenu adapté aux mobiles

Les visiteurs de sites Web peuvent être divisés en trois catégories :

• Les « skimmers » (lecteurs en diagonale). Ce sont les personnes qui parcourent une page Web à la recherche d’infos clés. C’est tout ce qu’elles recherchent en consultant la page de votre site.
• Les « swimmers » (lecteurs approfondis). Ce sont les personnes qui vont plus loin et lisent chaque mot lorsqu’elles consultent votre site Web.
• Les « hybrids » (lecteurs hybrides). Ces visiteurs sont un mélange des deux autres. Leur interaction avec votre site Web dépend de son attrait.

Maintenant que vous connaissez les trois types de visiteurs que vous pouvez attendre sur votre site, une partie de votre plan de design réactif mobile devrait être d’écrire pour ces trois types.

Envisagez d’utiliser la recommandation d’E-Write de la méthode Bite Snack Meal. 

Le Bite (la bouchée, l’accroche) consiste à utiliser des titres de page ou d’article pour dire aux lecteurs à quoi s’attendre. Par exemple, vous pouvez utiliser quelque chose comme Comment nos services peuvent vous aider à augmenter vos ventes ou Comment nos services réduisent vos dépenses comme titres pour susciter un intérêt afin que le visiteur décide de le lire. 

Le Snack (l’avant-goût) consiste à créer une section de résumé ou de conclusion qui fournit un aperçu concis de l’article. Par exemple, vous pouvez présenter les points clés de l’article de blog dans les sections de résumé. Cela donne aux lecteurs un avant-goût du contenu de l’article. Vous pouvez le faire avec une section FAQ ou une section TLDR, par exemple.

Le Meal (le plat principal) est le contenu complet lui-même, comprenant des explications plus détaillées qui complètent les informations pour les lecteurs qui ont traversé toutes les étapes précédentes. 

Créez votre site Web réactif

Créer un site Web entièrement réactif devient beaucoup plus facile une fois que vous connaissez les différentes considérations à prendre en compte lors de sa construction. Avec un créateur de site Web robuste comme WordPress.com, vous n’avez pas à vous soucier de faire des efforts supplémentaires pour rendre votre site Web réactif, car il fait la plupart du travail pour vous. 

Après avoir vérifié votre site Web avec l’outil de test de compatibilité mobile de Google, vous saurez s’il est réactif ou non. S’il ne l’est pas, vous pouvez :

• Utiliser une plateforme qui prend en charge le design Web réactif. Elle déterminera à quel point votre thème et votre design répondent aux utilisateurs qui y accèdent à l’aide d’un appareil mobile.
• Tester chaque personnalisation avec soin pour vous assurer que votre travail de design apparaît exactement comme vous le souhaitez pour les utilisateurs de bureau et mobiles. 
• Compresser vos fichiers afin que les utilisateurs mobiles aient plus de facilité à charger JavaScript, CSS et HTML directement depuis leurs téléphones mobiles. 
• Simplifier la navigation pour en faire une expérience fluide et agréable pour les utilisateurs mobiles visitant votre site Web.

Prêt à commencer à créer des sites réactifs ? Obtenez un plan WordPress.com dès aujourd’hui !

---

---