Responsive web design: un webdesign adaptatif

Le Responsive Web Design, ou Webdesign Adaptatif, est un train à ne pas manquer. Il va complètement révolutionner la manière de concevoir les sites, mais aussi la manière dont les utilisateurs navigueront sur le web.

Les résolutions d’écran ont toujours été un souci pour le webdesign. Il n’y a pas si longtemps, on voyait encore des annonces de ce genre en bas de page de nombreux sites: « site optimisé pour un écran de 800px par 600px ». Ensuite les standards ont grandi avec les écrans, 1024 pixels puis 1280 pixels. Puis les smartphones et les tablettes sont arrivés avec des tailles plus petites et très diversifiées.
Dès lors, une personne peut avoir un écran 24” au travail, un portable 13″ à la maison, un iPad pour surfer depuis son canapé et un iPhone en déplacement. Quatre devices, avec des tailles et des contraintes de navigation différentes : à la souris sur l’ordinateur, avec les doigts sur les tablettes et les smartphones.

Résultat, on ne peut plus parler de format standard puisqu’il n’existe justement plus de norme. Réaliser un site pour chaque machine n’est pas non plus envisageable, tant à cause des couts de réalisation qu’au niveau de l’entretien.

C’est ici que le principe de webdesign adaptatif entre en scène: « Servir à chaque appareil le design qui lui est le plus adapté. »

En utilisant une technique qui combine un design liquide et des Media Queries CSS, on peut simplement définir de nouveaux paramètres d’affichage en fonction de la taille de notre fenêtre. En résumé : on applique de nouvelles règles qui s’adaptent à la taille de notre écran. Tout ceci sans avoir besoin de créer des versions spéciales : on utilise la même base et surtout le même contenu. Il est simplement adapté selon les besoins de l’utilisateur.

C’est en effet un procédé simple et très efficace. Il utilise les standards du web sans plugin ou extension et est supporté par tous les browsers modernes, y compris Internet Explorer dans sa dernière version ! De cette manière, nous sommes certains que notre site apparaîtra de la meilleure manière possible sur tous les appareils sur lesquels il s’affichera.

Une approche est particulièrement pertinente pour les téléphones Android ou Windows Mobile. En effet, si chez Apple les iPhones ont une résolution uniformisée, les téléphones tournant sous d’autres OS n’ont pas cet avantage. Les appareils étant tous différents, il est impossible de prévoir des tailles précises pour chaque modèle et le design adaptatif va permettre de coller au mieux à la taille à laquelle il sera soumis. Ainsi plus de risque de tomber sur des sites uniquement optimisés iPhone. Tout site peut être désormais compatible avec chaque smartphone ou tablette du marché.

Voilà donc l’avenir du webdesign : un site qui s’adapte à tous les appareils et tous les utilisateurs, quel que soit le système ou la résolution disponible !

Loris Grillet