Une petite liste de liens sur le thème de la navigation mobile et du pattern dit “off-canvas”
Quelques références :
- Off Canvas Multi-Device Layouts : l’article de Luke Wroblewski qui a propulsé la technique
- Une démo d’un layout off-canvas avec 3 panels qui s’affichent différemment en fonction de la largeur du viewport : http://jasonweaver.name/lab/offcanvas/
- Zurb (avec Luke Wroblewski et Jason Weaver) ont implémenté un layout off-canvas dans le framework Foundation : http://www.zurb.com/playground/off-canvas-layouts
- Smashing Magazine explore la technique dans article Implementing Off-Canvas Navigation For A Responsive Website
- Un petit tuto sur le site de Chris Coyier : http://css-tricks.com/off-canvas-menu-with-css-target/
- Un autre basé sur Suzy (Responsive grids for Compass) : http://oddbird.net/2012/11/27/susy-off-canvas/
- Quand Raphaël Goetter s’essaie aux navigations mobile “off canvas” : http://lab.goetter.fr/post/37805993039/navigations-mobile-off-canvas
- Un bel exemple par David Bushell : http://dbushell.com/2012/12/22/a-responsive-off-canvas-menu-with-css-transforms-and-transitions/
- Et pour finir, l’article « Off-canvas – contrer la verticalité des sites Web mobiles », par Guillaume Palayer : http://magazineduwebdesign.com/off-canvas-navigation-contenu-site-mobile
Allez, deux derniers pour la route :
- un gist fonctionnel de mon cru avec tout ce qu’il faut pour bien démarrer un « off-canvas layout » : https://gist.github.com/devlint/5151068
- et une petite demo de nos amis de Codrops
Bon dev !