Hello, I’m Vinch

And this is my blog.

Votre design Web est-il « responsive » ?

06/13/11

This post is more than 2 years old. It might not reflect my current skills and convictions.

Depuis quelques années, le Web n’est plus uniquement consultable via un ordinateur personnel. En effet, l’apparition des netbooks, des smartphones et des tablettes a fait en sorte que votre site Web peut être vu par des écrans de dimensions totalement différentes ! S’assurer que votre site ne dépasse pas les 1000 pixels de large n’est plus suffisant en 2011 !

Pendant longtemps, l’unique parade a été de réaliser des sites Web spécifiques pour les smartphones avec une détection assez hasardeuse des appareils ciblés. En effet, il m’est arrivé très souvent d’obtenir la version iPhone d’un site Web sur mon iPad alors que la version « normale » serait plus opportune. En plus de souffrir de ces problèmes de détection, le travail à abattre pour réaliser ces sites Web alternatifs est assez colossal ! La logique à mettre en place est très pointilleuse, il faut faire en sorte que tous les liens fonctionnent encore et mènent vers les bonnes pages, etc.

La solution ? Rendre votre design Web responsive !

Responsive Web Design

En mai 2010, Ethan Marcotte écrivait sur ALA l’article qui jetait les bases du responsive Web design et expliquait les solutions techniques pour le mettre en place.

La technique est finalement relativement simple. Il suffit en effet d’utiliser ce qu’on appelle les media queries, apparues avec CSS3. Vous connaissez sans doute déjà les media types qui permettent, entre autres, de cibler l’écran (screen) ou l’impression (print) et d’appeler la CSS correspondante. Les media queries vont plus loin et permettent d’appliquer des régles encore plus précises.

Par exemple, si nous souhaitons cibler les devices dont la largeur d’écran est inférieure à 480 pixels, voici à quoi va rassembler l’appel de notre fichier CSS :

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px)"
  href="narrow.css" />

En combinant plusieurs appels de ce type, vous pouvez au final obtenir un design Web qui s’adaptera naturellement à la taille du navigateur du device que vous utilisez.

L’avantage par rapport aux solutions critiquées en début d’article est que nous ne touchons pas au contenu, aux URLs et à la logique générale du site Web. Seuls les fichiers CSS changent !

Quelques exemples inspirants se trouvent sur le site Media Queries (qui n’est pas un site espagnol). J’en ai retenu quelques uns :

Pour voir l’effet des media queries sur ces sites, vous pouvez réduire la largeur de la fenêtre de votre navigateur. Magique, n’est-ce pas ?

Si vous voulez aller plus loin, notre ami Ethan Marcotte vient de sortir un bouquin consacré uniquement au sujet de ce blog post ! J’achète assez rarement des bouquins techniques mais je vais sans doute faire une exception pour celui-ci :-)

Prochaine étape : rendre ce blog responsive ! Après avoir été le premier blog belge en HTML5 (oui, j’en suis fier), est-ce qu’il sera également le premier à avoir un design responsive ? Rien n’est moins sûr !

8 comments

Leave a comment