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 !
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 :
- iA
- Think Vitamin
- Hicksdesign
- Authentic Jobs (tout récent celui-ci)
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 !
Le blog de Vincent Battaglia 
Bon résumé sur le sujet. Je suis ravi de voir que d’autres s’intéressent au “responsive design” en Belgique. 🙂
Je mettrai un bémol toutefois sur la “simplicité” de la technique, car si la base est simple, l’efficacité cross-platform est elle, très complexe à réaliser de façon correcte. (cf. http://www.slideshare.net/yiibu/muddling-through-the-mobile-web/)
J’ai hâte de voir ce que ta nouvelle version donnera.
LikeLike
Quand je disais simple, je voulais dire que le principe est simple. L’exécution, c’est effectivement une autre histoire !
LikeLike
Bonne introduction sur le sujet.
Pour une mise en pratique rapide je te conseille de jeter un œil sur lessframework (http://lessframework.com). Ce dernier m’a permis de réaliser mon premier design responsive très rapidement (http://www.lespetitesrobesnoires.com). Pour le prochain je vais maintenant chercher à adapter le framework 960gs car je suis attaché à sa grille.
Sinon cette nouvelle pratique demande un peu de boulot durant la phase de design mais je pense que cela est tellement plus léger que les développements dédiés (évoqués dans ton billet). Trop fort CSS 😉
J’ai hâte de pouvoir consulter ton blog sur mobile.
Bonne continuation donc.
LikeLike
Merci Jérôme !
LikeLike
Il ne l’est pas du tout! Ça dépend toujours du marché cible. Les premiers à implémenter ce genre de choses devrait être les attractions touristiques, parce que personne ne traîne son portable en voyage maintenant. Pourtant, ils sont tous en flash. Au diable les visiteurs!
LikeLike
A savoir tout de même que le fait d’avoir un site internet responsive permet une meilleure indexation du site internet.
En effet, les robots (de Google en particulier) sont de plus en plus pertinents et recherchent de plus en plus le confort des visiteurs, et ce multi-device.
LikeLike
Un outils pratique pour voir si son site est responsive design:
http://www.pikock.com/fr/pi-responsive.html
LikeLike
Bonjour,
le Responsive design n’est pas la solution-miracle pour tous les sites web, il faut vraiment étudier sa cible et la stratégie de l’entreprise avant de se lancer dans un site responsive.
Il y a plusieurs solutions pour qu’un site soit disponible sur le mobile : Responsive, site mobile, application sur les stores.
Et en fonction de notre stratégie on choisit une solution.
Si vous souhaitez faire du responsive design il y a un très bon blog qui vient de faire un article dessus “un site responsive en une heure” de Raphaël Goetter. Faite y un tour.
A+
LikeLike