Responsive design: adaptez votre site à toutes les résolutions

La résolution d’écran des visiteurs est la première préoccupation des webmasters qui mettent en place le design de leur site.
Auparavant, on consultait un site web depuis son ordinateur de bureau ou son PC portable par contre, aujourd’hui on utilise des smartphones et des tablettes ce qui nous donne plusieurs résolutions à gérer.

Dans un premier temps, les développeurs web ont pensé à réaliser des « sites mobiles« . Ces sites ont des adresses du type « m.facebook.com ». Bien que cette solution paraisse adaptée au premier abord, elle a plusieurs défauts :

•  Les tablettes et les smartphones existent dans plusieurs formats : iPhone, iPad, iPad mini, Galaxy Tab… Il y a donc une infinité de résolutions à gérer. On ne peut pas créer un site ipadmini.facebook.com, iphone.facebook.com, etc…

•  Les appareils sont de plus en plus puissants. Les sites mobiles sont conçus avec très peu d’interactivité : ils sont en général très statiques. Or, les performances des appareils augmentent et on peut être plus créatif qu’avant.

•  Enfin, il y a des risques de duplication de contenu (duplicate content) ce qui est mauvais d’un point de vue SEO si c’est mal fait.

L’idéal est alors de créer des pages web qui s’adaptent automatiquement à chaque support. C’est là que response design entre en jeu. Techniquement, on obtient un design adapté grâce aux Media Queries CSS.

Les media queries font partie des nouveautés de CSS3. Il ne s’agit pas de nouvelles propriétés mais de règles que l’on peut appliquer dans certaines conditions.

Nous allons pouvoir dire « Si la résolution de l’écran du visiteur est inférieure à tant, alors applique les propriétés CSS suivantes ». Cela nous permet de changer l’apparence du site dans certaines conditions : nous pourrons augmenter la taille du texte, changer la couleur de fond, masquer ou changer la taille des images, etc.

Parmi les principales règles permettant de construire des media queries, on trouve:

01	color : gestion de la couleur (en bits/pixel).

02	height : hauteur de la zone d'affichage (fenêtre).

03	width : largeur de la zone d'affichage (fenêtre).

04	device-height : hauteur du périphérique.

05	device-width : largeur du périphérique.

06	orientation : orientation du périphérique (portrait ou paysage)

07	media : type d'écran de sortie. Quelques-unes des valeurs possibles :

08	screen : écran « classique » ;

09	handheld : périphérique mobile ;

10	print : impression ;

11	tv : télévision ;

12	projection : projecteur ;

13	all : tous les types d'écran.

Exemple d’utilisation du response desgin 

Déjà des sites comme mashable.com, Barackobama.com ou smashingmagazine.com l’utilise sur leurs projet. Pour expérimenter le Responsive Design sur ces sites, vous pouvez les visiter et faire varier la largeur de la fenêtre de son navigateur. Cela vous permet ainsi de simuler les différentes résolutions des appareils mobiles.
Voici un test tout simple ou je vais changer la couleur et la taille du texte si la fenêtre fait plus ou moins de 1024 pixels de large.

01

p

02

{

03	color: green;

04

}

05	@media screen and (max-width: 1024px)

06

{

07

p

08

{

09	color: yellow;

10	background-color: black;

11	font-size: 1.5em;

12

}

13

}