L’optimisation de l’espace d’affichage sur les sites mobiles requiert une certaine dose d’ingéniosité. Placer le contenu, la navigation, la sidebar et le header est déjà un challenge en matière d’architecture de l’information pour une version desktop. La chose devient encore plus ardue pour le Web mobile où l’espace se fait rare.
Une solution actuellement en vogue consiste à placer la navigation ou une section au sein d’un volet hors-écran à l’instar d’applications mobiles comme Evernote, Google+ ou Facebook. Le volet apparaît uniquement si l’utilisateur le désire. Cela me rappelle le côté interactif des livres à tirettes de mon enfance, vous savez…ceux avec les languettes permettant de découvrir un personnage. Partons à la découverte de cette approche, que l’on nommera off-canvas.
De nombreuses solutions d’architecture de l’info sont disponibles en responsive. Luke Wroblewski, auteur de Mobile First, mentionne diverses méthodologies dans son article Roundup of mobile layout patterns. L’une d’entre elles s’attaque à la verticalité des contenus sur les petites résolutions.
Off-canvas – L’approche off-screen
Le off-canvas permet l’optimisation de l’espace disponible à l’écran en cachant une section ou un système de navigation lorsque la résolution de l’écran est trop étroite. Le contenu du volet n’apparaît que lorsque l’utilisateur effectue une action.
Cette solution est une alternative au tout vertical, où n’importe quel type d’éléments est disposé l’un au-dessus de l’autre au sein d’une longue page. L’ajustement du contenu ne se fait que sur l’espace visible de l’écran.
Pourquoi ne pas utiliser l’espace disponible hors-écran pour effectuer tous les ajustements nécessaires ? Il y en a des km2 en plus !
L’application Android The Verge propose ce type d’expérience. La navigation est disponible via un volet caché, accessible à l’utilisateur d’un seul clic.
Off-canvas et responsive
L’espace non alloué à la navigation sur l’écran peut ainsi être affecté à des sections plus importantes pour l’expérience utilisateur. Rien de superflu n’est donc proposé tant qu’aucune action n’est effectuée. Tout reste disponible en seul clic pour les petites résolutions d’écran.
Lorsque la résolution est plus large, la section cachée est visible et accessible sans qu’aucun clic ne soit requis.
Testez par vous même le off-canvas sur un le nouveau site Web responsive The Next Web.
thenextweb.com – Off-canvas disponible sur les résolutions mobile.
Ok ! c’est bien cool tout ça, mais comment intégrer une architecture off-canvas sur un site responsive sans y passer des heures ?
Création d’un off-canvas sur un site mobile responsive
Voici quelques outils qui vous permettront de faire le job correctement sans suer du front.
Off-canvas avec Foundation
Les créateurs du fameux framework responsive nous offrent 4 variantes de mises en page off-canvas pour les résolutions mobiles.
4 templates responsive avec une mise en page off-canvas par Foundation.
Avec ces templates responsive, l’adaptation progressive aux écrans mobiles peut se faire de diverses manières. Le template 1 transfère la navigation en footer et cache la sidebar dans un volet hors-écran. Le template 2 conserve la navigation en header sur mobile et dissimule la sidebar hors-écran. Les sections navigation et sidebar des templates 1 et 2 sont accessibles via deux boutons en header. Le template 3 adapte la navigation en une suite de tabs dont chacun des contenus est accessible par sliding.
Le dernier template se rapproche le plus de ce qui est présenté dans cet article, à savoir l’insertion de la navigation en off-canvas pour la version mobile du template. Le volet est accessible en un clic via un bouton en header.
Foundation – template responsive off-canvas.
L’adaptation à vos besoins des templates est facilement réalisable à condition d’opérer dans l’environnement du framework Foundation.
Off-canvas par Jason Weaver
Jason Weaver a conçu une approche responsive off-canvas en 3 volets. Dans sa démo, il indique les étapes à suivre afin d’afficher et cacher une navigation et une section de contenu sur différentes résolutions via l’utilisation du JavaScript, des media queries et des CSS3 transitions.
Sur les résolutions les plus étroites, une seul volet apparaît. Sur des résolutions supérieures, deux volets apparaissent pour finalement dévoiler les trois volets sur des résolutions « desktop ».
Off-canvas avec jPanelMenu
Les loisirs d’Anthony Colangelo n’ont rien en commun avec ceux de la plupart d’entre nous. En tant que développeur, il aime travailler sur de nouveaux projets jQuery et les partager avec le plus grand nombre sur son profil Github. Son dernier bébé se nomme jPanelMenu. Il s’agit d’un plugin jQuery créé pour imiter le comportement de nombreuses applications iOS et Android en matière de navigation : un panel contenant la navigation accessible via les trois barres symbolisant l’accès au menu.
Cette navigation off-canvas est particulièrement bien adaptée pour les approches responsive. Colangelo recommande l’utilisation du plugin jQuery jRespond afin de contrôler l’activation du off-canvas en fonction des points de rupture.
Quelques mots pour conclure
Je pense que la mise en page off-canvas est une approche pertinente pour la réalisation d’un site mobile. Elle permet de lutter efficacement contre la verticalité des pages sur mobile en relayant hors-écran les sections secondaires au contenu tel qu’un menu de navigation ou une sidebar. Inséré au sein d’une approche responsive, le off-canvas permet de bénéficier d’un ajustement progressif. Sur les résolutions les plus grandes, le contenu hors-écran devient visible pour l’utilisateur et accessible sans qu’aucune action ne soit requise.