La tête dans le Flux !

À l’heure actuelle, la technique la plus couramment employée pour adapter un design web à différentes résolutions d’écrans est connue sous le nom de “je me débrouille pour que ça rentre”.

Surtout lorsqu’on aborde les tailles des smartphones.

En clair, j’impose un Viewport puis grâce aux Media Queries, je repositionne tout dans une colonne unique, j’agrandis les liens de navigation, et j’empile chaque élément l’un après l’autre selon son ordre d’apparition dans le code HTML.

C’est bien… mais ce n’est pas suffisant d’après Luke Wroblewski, auteur du livre “Mobile First”.

Sa technique nommée “Off canvas multi-device layout” est un peu plus subtile que cela et consiste à :

• toujours afficher prioritairement le contenu, ce pourquoi vos visiteurs viennent sur votre site
• disposer les autres éléments hors du champ d’affichage par défaut (navigation, pied de page, parties latérales, etc.)
• n’afficher ces éléments secondaires que lorsque le visiteur en exprime le besoin

Eh ben vous avez quoi ? C’est pas bête du tout.

Dans son article “Off canvas multi-device layout”, il détaille les différentes stratégies possibles et propose des exemples et démonstrations concrètes grâce à des astuces de Jason Weaver basées sur jQuery

J’aime beaucoup l’idée, mais le fait d’imposer jQuery JavaScript pour ça me dérange un peu, je vais voir ce que je peux faire à ce sujet… :)

EDIT : bon, ben voilà c’est fait : http://thinkmobilefirst.net/nav/nav5b.html