Off Canvas Multi-Device Layout

by Luke Wroblewski March 22, 2012

In Multi-Device Layout Patterns I outlined a number of emergent design patterns for screen layouts designed to render well across different sized screens. Of these, the Off Canvas pattern had few existing examples so I asked if anyone would be interested in developing it further. Jason Weaver took me up on it and created a very compelling example of the technique in action.

"This Off Canvas layout demo has 3 panels that display differently depending on the viewport width. The idea here is to have the two supporting panels of navigation and sidebar content hidden just off-screen to the left and right for easy access on small/medium viewports. Off Canvas is a design pattern, not a plugin or framework."

Off Canvas Multi-Device Layout

Big thanks to Jason for putting this together and for bouncing ideas back and forth to make it even better. If anyone else has some interesting multi-device layout patterns, let me know.