Les enjeux du responsive design : adapter un site à l'ensemble des supports

Avec l’arrivée prochaine de la standardisation HTML5, le succès grandissant des nouveaux supports d’affichage des pages web, smart phones et tablettes, le responsive design, ou design adaptatif, est la grande tendance d’évolution dans la conception des sites internet. Voici quelques principes pour bien concevoir des sites au design adaptatif optimisé.

 

Différents supports, différentes tailles d'écrans

Concevoir un site web, c'est définir une interface habillée par un design et dans laquelle s’organisent des contenus et des liens permettant de naviguer vers les différentes pages du site. Cette interface est en général définie par une largeur unique fixée, conçue pour s’afficher dans une résolution d’écran standard type 1024*768 pixels ou 1280*1024 pixels.

Avec l’arrivée des smart phones puis des tablettes, leur généralisation, la création de sites web est nécessairement amenée à tenir compte de ces nouveaux supports.  La création de designs dits « adaptatifs » donne la possibilité d’optimiser l’affichage d’un site pour ces écrans.

 

Quelques règles du design adaptatif

Pour réorganiser la structure d’un site en fonction des paramètres des appareils, quelques principes sont à prendre en considération :

• Simplifier la mise en page et rendre sa structure facilement modulable.
• Utiliser la spécification CSS3 Media Queries, soit l’application de feuilles de styles en fonction des périphériques de consultation pour adapter dynamiquement le design à l’aide de CSS (feuilles de style, notamment les largeurs minimales et maximales).
• Organiser le contenu sur une seule colonne  pour les mobiles basse résolution.
• Epurer la page en enlevant les rubriques inutiles à une navigation sur mobile.

Rendre adaptatif le design de son site, pouvoir être présent de façon optimale sur les différents terminaux mobiles aussi bien que sur les résolutions standard, voilà bien l’enjeu devenu incontournable de la nouvelle évolution d’Internet.