Design réactif : problèmes et éléments de solution

Design réactif : problèmes et éléments de solution

L’un de plus grands défis auquel nous sommes confrontés lorsque nous concevons notre site web est le manque de contrôle que nous avons sur la façon dont notre site sera visité. Avant les tablettes et les téléphones mobiles, les sites étaient uniquement visités sur ordinateur. Maintenant, ils le sont aussi (et surtout!) sur tablette et sur téléphone.

Problèmes

Votre site web s’adapte-t-il aux appareils mobiles ? Le mien non. Pas tout à fait. Pas entièrement. La disposition du contenu de la page est le problème qui suscite le plus mon attention. Sur les tablettes tenues de façon « portrait », il est bien souvent nécessaire de réduire la taille du texte, car ce dernier ne peut être contenu dans la largeur de l’écran. Sur les téléphones, il faut presque toujours changer la disposition des éléments. Plutôt que de se retrouver les uns à côté des autres, ces derniers doivent se retrouver les uns au-dessus des autres. Le problème se complique aussi quand le site est pensé en fonction du téléphone. Le rendu des pages se trouve alors à être trop petit pour l’écran de l’ordinateur. Et il y a aussi toute la problématique reliée à la typographie et à l’agrandissement des caractères. Car en plus de la diversité des tailles d’écran, nous sommes confrontés au problème de la densité des écrans. Qui n’a jamais eu un moment d’angoisse devant la perspective de voir apparaître un mauvais rendu de texte en agrandissant la taille d’un élément avec les doigts ?

Élément de solution : voyez ce qu’offre WordPress

Dans WordPress, la mise en page se fait à travers les thèmes. Si les contenus de votre site web sont cachés ou recouverts les uns par les autres, cherchez des solutions du côté du thème que vous avez choisi. Avant d’acheter un thème, assurez-vous qu’il est bien réactif et qu’il vous permet de repositionner des éléments de votre page selon le type d’appareil.

Élément de solution : lisez sur les viewport

Le viewport est la zone visible d’une page web. Il varie d’un appareil à l’autre et est plus petit sur un téléphone mobile que sur un écran d’ordinateur. Il dépend aussi du navigateur utilisé, de la taille de la fenêtre et la façon dont vous tenez votre appareil mobile.

Si vous ne voyez pas ce qu’est le viewport, faites ce petit test : prenez une tablette ou un téléphone mobile et rendez-vous à l’adresse viewportsizes.com/mine/. La taille du viewport va s’afficher. Tenez votre tablette ou votre téléphone en mode paysage, puis en mode portrait. Vous allez voir la taille du viewport changer. Recommencez l’expérience sur un ordinateur, en modifiant, cette fois, la taille de la fenêtre. Ou passez de Chrome à Safari. Voilà : maintenant, vous voyez!

Élément de solution : lisez sur les points de rupture

Un point de rupture (break point) est le moment à partir duquel on applique une mise en page différente à un contenu donné. La mise en page change en fonction de la largeur du viewport. Le moment où la mise en page change s’appelle le point de rupture.

À chaque point de rupture, il faut s’assurer que la typographie est ajustée.

Élément de solution : lisez sur les requêtes média

Les requêtes média (media queries) permettent d’appliquer différentes feuilles de style CSS (pour Cascading Style Sheets) à une même page. La feuille de style à appliquer est choisie en fonction de l’orientation de l’appareil mobile (portrait ou paysage) ou de la taille du viewport. Ce sont les requêtes média qui provoquent la rupture du point précédent.

Élément de solution : cherchez du côté de CSS

La police de caractères que l’on souhaite utiliser n’est pas toujours présente dans le système de l’utilisateur. On spécifie la police de caractères à utiliser dans les feuilles de style CSS. On demande au navigateur d’utiliser une police de caractères en particulier. Si elle n’est pas disponible, on lui demande d’en essayer une autre, puis une autre… jusqu’à l’utilisation d’une police « générique ». Par exemple, dans l’exemple qui suit, le navigateur va d’abord chercher à utiliser Arial, puis Helvetica, et au besoin la police générique sans-sérif.

body{

font-family : Arial, Helvetica, sans-serif;

}

Lorsque l’utilisateur zoome sur la page ou qu’il redimensionne la page avec ses doigts, les polices doivent pouvoir être redessinées sans perte de qualité. Lorsqu’une fenêtre est redimensionnée, son contenu doit l’être aussi. La typographie, en particulier, doit rester proportionnelle, pour faciliter au mieux l’expérience de lecture.

Élément de solution : travaillez avec des valeurs relatives

La densité d’un écran est le nombre de pixels qui vont s’afficher dans la zone physique d’un écran. Dans un design réactif, il faut préciser la hauteur en EM au lieu de la préciser en pixels. C’est-à-dire, il faut s’assurer de travailler avec des valeurs relatives plutôt qu’absolues. La façon la plus facile et la plus courante de maintenir une typographie réactive est de mesurer des EM. 

La mesure en EM provient d’une ancienne mesure imprimée. La lettre M sert ici d’unité de mesure.

Élément de solution : faites appel à une plateforme

Si vous voulez aller plus loin sur la question du design réactif, lisez sur les outils et les plateformes qui permettent d’obtenir des grilles fluides : simple grid, Initializr, Bootstrap et Foundation.

Simple Grid est une grille CSS légère de douze colonnes pour vous aider à créer rapidement des sites web réactifs. Elle se télécharge sous la forme d’une feuille de style CSS.

Initializr est un générateur de modèles HTML5 qui vous aide à démarrer un nouveau projet. Il génère pour vous un modèle personnalisable.

Bootstrap est la plateforme HTML, CSS et JS la plus populaire pour le développement de projets réactifs et mobiles sur le web.

Foundation est une autre plateforme qui permet de concevoir des sites réactifs. Vous pouvez le voir comme des collections gratuites d’outils pour la création de sites web et d’applications web.

Autres problèmes possibles

L’adaptation d’un site aux appareils mobiles peut être fort complexe. Prenons, par exemple, les produits d’une pâtisserie. Sur l’ordinateur, on peut afficher les produits sur différentes colonnes. Sur le téléphone, la solution la plus élégante serait non pas de disposer les produits en une seule et même colonne, mais bien de les présenter sur un carrousel d’images, de sorte que l’internaute puisse les faire défiler par un glissement du doigt.

Et les images, elles?

J’ai passé sous silence toute la question des images réactives, car elle ferait, à elle seule, l’objet d’un article.

Conclusion

En raison de la popularité croissante des appareils mobiles, il est nécessaire de concevoir notre site avec les appareils mobiles en tête. La question du design réactif est d’autant plus urgente que Google a annoncé, aujourd’hui même, que l’indexation par défaut de nouveaux domaines sera désormais « mobile-first ».

Patricia

P.-S. Envie de vous abonner à notre infolettre? C’est par ici. Si vous voulez tester le rendu de votre site, vous pouvez utiliser ce lien-là : www.isresponsive.com.

Merci de partager cet article!

Merci de partager !

Un commentaire? On vous écoute.

Ce site utilise Akismet pour réduire le pourriel. En savoir plus sur comment les données de vos commentaires sont utilisées.