Responsive web design : bonnes pratiques UX

Les recherches sur smartphone  ont désormais dépassées celles sur ordinateur. La compatibilité de votre site internet (aussi appelée « responsive web design » ou « site responsive ») est primordiale afin d’assurer la pérennité de votre présence digitale. Assurez-vous donc de proposer une expérience optimale à vos utilisateurs en suivant ces bonnes pratiques UX sur votre site web.

Qu’est-ce que le responsive web design ?

Le responsive web design est une technique de conception web qui vise à adapter et à redimensionner le contenu en fonction du terminal utilisé par l’internaute : un smartphone, une tablette, un desktop, etc.

C'est un terme qui a été introduit par Ethan Marcotte dans son article “A List Apart” publié en 2010.

Configurer en fonction de chaque type d’appareil

Il ne faut pas oublier que vos utilisateurs vont consulter le contenu de votre site web sur différents types d’appareils qui disposent de tailles d’écran différentes. Il est primordial de s’adapter à l’affichage de chaque interface afin de fournir une expérience utilisateur optimale.

On dénombre plusieurs types d’appareils qui correspondent à des largeurs d’écran différentes, de la plus petite à la plus grande :

• smartwatches
• mobiles
• tablettes
• desktop
• télévisions

À l’intérieur même de ces catégories d’appareils, il y a également des tailles différentes. Comme pour les terminaux mobiles, leur taille varie tellement d’une marque à l’autre qu’il est devenu indispensable de configurer parfaitement votre fenêtre d’affichage en fonction de chaque appareil. L’affichage sur iOS et Android ne sera pas forcément le même sur tous les modèles.

Mais comment configurer cela ? Grâce à une balise méta que vous insérez dans la section « head » de votre page HTML. Cette dernière permet d’indiquer aux différents navigateurs web la manière d’afficher votre contenu en fonction de la taille du terminal utilisé. D’une manière générale, nous vous déconseillons d’utiliser une fenêtre d’affichage à largeur fixe et de définir une largeur minimum non adaptée.

Bien choisir le langage qui va programmer votre site web

Ne pas utiliser le langage Flash 

Après avoir connu ses heures de gloire ces vingt dernières années, Flash est aujourd’hui laissé à l’abandon pour la création de sites internet. Il a été très longtemps utilisé pour apporter de l’animation et de l’interactivité sur les sites. Ce produit Adobe nécessite l’installation préalable d’un plug-in sur les différents navigateurs web.

De plus, ce langage n’est pas pris en charge par tous les navigateurs. Par exemple, Flash ne fonctionne pas sur les terminaux Apple. De plus, l’utilisateur final est responsable de la mise à jour de ce dernier.

C’est pourquoi, depuis quelques années, Flash s’éteint progressivement. Désormais, la plupart des éditeurs bloquent ou arrêtent l’utilisation du Flash sur leurs navigateurs web. Même Adobe ne le “supporte” plus ! Les sites développés en Flash seront bientôt inutilisables.

Par conséquent, les utilisateurs ne peuvent plus consulter une page web qui utilise Flash pour afficher le contenu ou les animations. Et pourtant, avoir un site responsive est une priorité ! Mais rassurez-vous, les langages de programmation (tels que l’HTML5, CSS3 ou encore JavaScript) ont fortement évolué et ont su s’imposer et le remplacer complètement, vous permettant ainsi de proposer des sites responsives.

Ces derniers prennent ainsi en charge tous les contenus médias (images, vidéos, animations…) et sont surtout compatibles avec tous les navigateurs, même si chacun d’entre eux interprète ces langages de manière différente (à chacun ses spécificités). Bref, vous l’avez compris, le futur du web passe par ces nouveaux langages, lisez la suite et vous aurez plus de détails sur le CSS !

Utiliser les media queries CSS pour optimiser l’affichage

En effet, un des langages de programmation que nous vous conseillons d’utiliser est le CSS et cela passe en particulier par l’utilisation des media queries.

Mais les media queries, c’est quoi ? Ce sont des points de rupture qu’il faut définir dans sa feuille de style. Ces points de rupture correspondent aux tailles pour lesquelles l’affichage change sur votre site en fonction du type d’appareil. Elles vont permettre à votre site web d’utiliser des règles CSS différentes en fonction de la largeur de chaque terminal. Plus simplement, le design de votre site va donc s’adapter automatiquement à la taille de l’écran, que ce soit sur un smartphone, une tablette ou un desktop.

Ces media queries viennent résoudre des problèmes de dimensions de résolutions. Elles vont améliorer la navigation, l’apparence graphique et la lisibilité du contenu sur votre site web responsive afin d’améliorer l’expérience utilisateur.

Designer dans une approche « mobile first »

Il est indispensable de designer pour la plus petite résolution en premier, soit dans une approche « mobile first ». Cela est essentiel pour proposer une expérience utilisateur optimale à vos utilisateurs. Vous commencez par créer votre design sur le mobile, puis vous pourrez ensuite décliner cela pour les autres appareils dans un ordre croissant, pour finir par la taille de l’écran la plus grande, le desktop. Cependant, vous ne devez pas négliger pour autant les efforts fournis sur les petits écrans vis-à-vis de ceux fournis pour les grands.

Soigner la taille de votre police

De plus, afin de proposer une navigation sur mobile optimale, évitez de définir une taille de police trop petite, sous peine de faire fuir vos visiteurs. Si le mobinaute doit zoomer d’un pincement de doigt pour lire le contenu, il ne restera pas longtemps sur votre site, croyez-moi ! D’ailleurs, que feriez-vous à sa place ? Comme moi, vous iriez probablement voir ailleurs !

C’est pourquoi, vous devez impérativement redimensionner vos polices en fonction de la largeur de l’écran. Vous pouvez aussi proposer à l’utilisateur de régler lui-même la taille. On parle alors d’accessibilité (ce qui est bien vu par Google).

Un exemple d'accessibilité : Apple propose à ses utilisateurs une fonctionnalité permettant d'augmenter la taille du texte contenu dans les applications IOS. Cela peut s'avérer particulièrement utile pour les personnes ayant des problèmes de vision.

Concevoir des images flexibles

Vous devez absolument adapter vos images en fonction de la résolution de l’écran de chaque appareil afin qu’elles soient toujours de qualité et que l’affichage de ces dernières soit optimisé. Mais vous devez aussi veiller à adapter le poids de votre image en fonction de la qualité de la connexion envisagée. Par exemple, ne pas mettre en place des images trop lourdes et trop grandes si l’utilisateur consulte votre page web sur son smartphone avec une connexion faible. De plus, nous vous conseillons de limiter les animations sur les supports mobiles au risque d’alourdir sa navigation sur le site web.

Penser à concevoir des zones interactives faciles d’accès

Lorsque vous naviguez sur un site web depuis un smartphone, vous devez avoir suffisamment d’espaces entre les boutons, les liens ou les zones (c’est ce qu’on appelle les « éléments tactiles ») afin d’être en mesure de cliquer dessus avec vos doigts. La taille minimale des éléments “touch” ou “finger friendly” se situe entre 45 et 57 pixels idéalement. Si vos éléments sont trop proches les uns des autres, vous ne pourrez pas (ou difficilement) cliquer dessus. Et là, vous pouvez être sûr que vos internautes iront voir ailleurs ! Vous devez ainsi vous assurer d’espacer parfaitement vos boutons.

Dès à présent, vous détenez les éléments clés pour construire un site web responsive design performant. Si vous suivez bien ces bonnes pratiques UX, vous bénéficierez de nombreux avantages sur votre performance globale, notamment sur votre référencement naturel qui sera d’autant plus optimisé.

Alors, votre site internet est-il complètement responsive ? Si vous ne le savez pas, passez dès maintenant le test d’optimisation mobile de Google. Et s’il n’est pas parfaitement optimisé pour les mobiles et tablettes, n’hésitez pas à nous contacter, nous saurons vous aider.