What are off canvas layouts?

Most multi-device layout patterns for the Web are designed to rearrange page elements within a visible browser window. Off canvas layouts do something different: they use the space outside a browser's viewport to hide secondary elements until people need them.

Here's the problem they solve. When I surveyed multi-device layout patterns back in 2012, I found that small screens pretty much always got the shaft. That is, a tall scrolling list of all the elements on the page stacked together. Since many of these patterns only consider the visible browser window as their canvas, that situation is basically inevitable.

But think about it this way: there's always more space off-screen for layout adjustments than there is on-screen. So instead of cramming everything into a long vertical stack, off canvas layouts take advantage of the space off the screen to keep content or navigation hidden until either a larger screen size allows it to be visible or someone takes action to expose it.

You've seen this in the wild. Facebook's mobile Web experience uses the space to the left of the visible window to hide navigation options until someone taps a link to expose them, at which point the content off screen slides into view. Path's native app went further, using both the left and right sides of the screen to reveal navigation when requested.

The core idea is simple: on small screens, additional elements are a click away, and as screen size expands, they become visible until no clicks are required to access them. What I liked about this pattern is that it doesn't force people to scroll long pages of content and navigation on small screens. Instead, sections can be separated, labeled, and accessed when needed.

Jason Weaver and I built out demonstrations of several specific off canvas patterns, including Footer Nav & Off Canvas Column, Off Canvas Column & Nav, Combined Off Canvas Column, Two Columns Off Canvas, Vertical/Horizontal Off Canvas, and an Ajax version of that last one. The Ajax variants are worth calling out because they only load the first content section at narrow widths and lazily load the rest asynchronously, so mobile devices on slow connections aren't penalized with downloading everything at once.

So the takeaway is this: when you're adapting a layout to multiple screens, don't limit your options to what's currently visible. The canvas is bigger than the viewport.