Votre site web ne s’affiche pas correctement sur tablette et/ou sur mobile ? C’est un vrai problème ! La majorité des utilisateurs naviguent davantage sur mobile. S’ils arrivent sur votre site internet via leur téléphone portable et que vos pages ne sont pas adaptées (boutons qui ne fonctionnent pas, texte qui dépasse des bords de l’écran, éléments décalés, etc.) ils s’en iront… Tout simplement. 😔 Alors, si vous souhaitez les retenir grâce à un site parfaitement réussi en matière de responsive design (design adapté à toutes les tailles d’écrans), lisez cet article !
Adapter la taille du texte à la résolution de l’écran
L’erreur la plus commune en responsive design est liée à la taille du texte. Tantôt trop gros, tantôt trop petits, certains blocs de texte peuvent devenir complètement illisibles sur tablette ou mobile. Pour éviter les problèmes de lisibilité, n’oubliez pas de tester chacune de vos pages sur différents appareils.
Vous pouvez également utiliser la visionneuse d’écrans disponible sur Google Chrome :
- Rendez-vous sur votre site internet et faites un clic droit.
- Cliquez sur Inspecter. Une console grise va s’ouvrir à droite de l’écran.
- Regardez tout en haut à gauche de la console et cliquez sur l’icône en forme de tablette et mobile.
- L’affichage de la vue de gauche va être modifié. En cliquant sur le menu déroulant du haut, vous pourrez choisir un type d’écran à visualiser !
N’hésitez pas à user et abuser de cet outil pour vérifier l’adaptabilité de votre site et de vos blocs de texte à toutes les résolutions d’écrans.
Veillez à conserver une taille de police similaire sur toutes vos pages : une même taille pour les paragraphes, une autre pour les titres de niveau 1, une autre pour les titres de niveau 2, etc. Gardez le même fonctionnement pour l’affichage du texte sur tablette ou mobile en adaptant les tailles.
Définir une structure de base et la respecter
S’il y a bien une règle importante en responsive design, c’est celle-ci : décliner une même structure dans différentes solutions. Pour faire simple, les éléments qui composent votre site doivent apparaître dans le même ordre, et ce peu importe la taille de l’écran.
Cette règle du responsive design garantit une bonne expérience utilisateur. Imaginez visiter un site web sur mobile, l’ouvrir quelques jours plus tard sur PC et atterrir sur un site internet complètement différent :
- les éléments du menu sont affichés dans un ordre différent
- la home page n’est pas structurée de la même manière
- vous n’arrivez pas à retrouver l’information qui avait retenu votre attention sur mobile
- etc.
Vous seriez un peu perdu.e, non ?
À lire aussi : Monétiser son Blog : les 5 moyens d’y parvenir
Éviter de systématiquement masquer des éléments sur mobile
Vous avez un site WordPress ? Certains Page Builders utilisables sur WordPress permettent de masquer des éléments selon la résolution de l’écran : ordinateur, tablette ou mobile. Pour le coup, je vous conseille de ne pas abuser de cette fonctionnalité. Voire même de l’éviter tout bonnement. Si la conception d’une page vous pose problème, vous pouvez recourir exceptionnellement à cette pratique. Mais ça ne doit pas devenir une habitude !
Ce conseil est lié à la règle précédente, puisqu’il vous permettra de conserver une structure logique, d’une résolution à l’autre.
Réfléchir à l’emplacement des éléments cliquables sur tablette et mobile
Je ne compte plus le nombre de fois où j’ai visité un site web sur mobile et qu’il m’était impossible de cliquer sur un bouton. 🙄 C’est tellement déceptif ! Si vous voulez faire fuir tous vos visiteurs… Ne pas adapter vos éléments cliquables au responsive design est un excellent moyen d’y parvenir haha.
À lire aussi : Les erreurs à ne surtout pas faire en créant son site internet
Si ce n’est pas votre objectif : réfléchissez à l’emplacement des éléments cliquables de votre site internet en amont. Et encore une fois, testez bien chaque page de votre site internet avec différentes résolutions. Adaptez la taille et la position de chaque élément cliquable sur tablette et mobile pour qu’ils restent facilement accessibles. 😃
Vous ne savez pas comment créer un site internet responsive ? Je peux m’en charger pour vous : découvrez comment co-créer votre site web avec Ours on web.
