La Fabrique de blogsC’est une des grandes tendances de 2013. 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 Web 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ésolutions 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 et Responsive Test
Quelques projets que nous avons réalisé:
– Plateforme de congrès de Tourisme Montréal
