It saves room in a design and has the wow-factor, but approach off-canvas navigation with caution, warns Gene Crawford.
There is a navigation design pattern that's emerged for multi-device layout that, unlike most other patterns, utilises off-screen space to hold a lot of navigation.
Popularised largely by Facebook's mobile website, this 'off-canvas' navigation is an attractive and elegant solution for websites with a lot of navigation or other elements for multi-screen design.
Getting to know off-canvas
The basic concept is that for smaller mobile device screens, important navigation items are only a single view away. It brings back a decent amount of space to the main area of your design, and it also looks pretty cool.
Let's face it, clients want designs with wow-factor and a slide-in, off-canvas navigation could be just what the doctor ordered – for good or bad.
Facebook's mobile site popularised off-canvas design
Good and bad
There are some negatives, however. It's pretty advanced to work into a website build, and you need to know what you're doing so it both scales properly and doesn't break down across devices and browsers.
It doesn't scale well outside of mobile device screen sizes and it can be confusing to people when encountered on a desktop computer. This is probably why we've seen so many different variations in the use and implementation of this pattern.
The off-canvas navigation pattern is intriguing. I'm not a huge fan of it for websites. I think it has its place in native mobile applications, but generally speaking I'm never a fan of hiding the important things you want your website's visitors to see - like your website's navigation.
Gene Crawford’s mission is to work tirelessly to provide inspiration and insight for developers. You can follow him on Twitter at @genecrawford. This article first appeared in net magazine issue 260.
