Du bon usage du CSS et du responsive design

Code

D’années en années, nous constatons de plus en plus de connexions aux sites web via smartphones et tablettes, rendant nécessaire une adaptabilité du contenu à la taille de l’écran qui l’affiche, pour un confort utilisateur accru. Les consommateurs utilisent de plus en plus souvent leur mobile pour faire des achats, consulter des infos ou jouer à des jeux.

Avec l’avènement des applications mobiles, la problématique d’affichage sur mobile a été éludée ou du moins contournée pendant quelques années mais la multiplication des applications sur support mobile semble rebuter les utilisateurs qui se tournent vers leur navigateur mobile.

La conception des sites internet a été repensée de A à Z pour prendre en compte les contraintes de débit, de tactilité, de résolution d’écran. Les sites de jeux en ligne et les sites commerciaux sont ainsi les premiers concernés, l’expérience utilisateur ayant un impact direct sur leur rentabilité. L’utilisateur peut ainsi jouer une partie à partir de son smartphone où qu’il se trouve, ou commencer un achat pour le finaliser plus tard sur son PC.

Le responsive design permet une réactivité du site web en fonction du support sur lequel il est visionné. On fait usage des règles CSS3 dans toute leur puissance avec des « media queries », du contenu dynamique sans avoir à recharger la page dans sa globalité. On évite la multiplication des « versions du site », sources d’erreurs et d’oublis de mise à jour. Un code unique gère l’ensemble du site ; à une seule URL, garantissant un référencement optimisé et une lisibilité plus grande pour l’utilisateur.

L’inconvénient associé est que le visiteur télécharge le code global, tous supports confondus.

Le design responsif est une évolution majeure en terme de développement web, qui a révolutionné l’usage du web mobile et fera probablement oublier dans un futur proche toutes les applciations bancales qui ne sont que des « web-viewers » peu optimisés et « mangeurs d’espace » sur mobiles et tablettes.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *