20 mars 2012

Responsive Web Design : tout ce que vous avez besoin de savoir

Avec la multiplication des écrans, la conception de sites devient un casse-tête. La forte croissance des mobiles et tablettes implique que dans tout projet web, il faut désormais se poser la question de savoir à quel type d’écran on s’adresse. La solution la plus utilisée est bien sûr de faire une version mobile de son site ce qui résout le problème pour les écrans plus petits, mais à l’inverse on constate que les très grands écrans sont aussi très populaires. Alors comment concevoir un site adapté à toutes les tailles ?
La solution semble venir du « Responsive design » ou design fluide en français. Cette technique de webdesign, d’intégration et de développement permet à un site et son contenu de s’adapter automatiquement à chaque résolution différentes.
Pour la démonstration, je vous recommande le site Media Queries qui est un répertoire de sites conçus avec cette technologie. Exemple avec le site Information Architects bâti sous WordPress: avec le curser de votre souris, cliquez sur le coin droit en bas dans la fenêtre de votre navigateur et déplacez votre curseur vers la gauche. Au fur et à mesure de vos mouvements, le site va changer automatiquement la mise en page du contenu.
A noter que au-delà de la solution technique, il sera par compte important de bien réfléchir à la hiérarchisation du contenu dès les premières étapes de la conception du site, en d’autres termes ce qui doit apparaitre lorsque l’on passe vers les résolutions les plus petites.

Pistes: à lire ces trois billets très bien documentés avec beaucoup de liens sur le sujet

« Responsive design : définition, fonctionnement, ressources et tutoriels» chez Design SPartan
Responsive webdesign : adapter un site à toutes les résolutions chez Usaddict
50 fantastic tools for responsive web design chez Net Magazine
Responsive Web Design Interactive Guide chez Template Monster

Pour voir à quoi ressemble votre site sur différents écrans : Screenfly

 

 

Exemple de « RESPONSIVE DESIGN » via Media Queries

A propos de l'auteur

#blogueur | #WordPress addict | #Google lover, conférencier, mixeur de liens, papa geek, fondateur de @Fabriquedeblogs , co-fondateur de @Yulbiz (gère aussi une tribu)

Laisser un commentaire




Vous pouvez utiliser ces tags XHTML : <a href="" title=""> <abbr title=""> <acronym title=""> <blockquote cite=""> <code> <em> <strong>