Off Canvas

RWD is an approach to web design aimed at allowing desktop webpages to be viewed in response to the size of the screen or web browser one is viewing with. Thus, using responsive design techniques, webpages layout are enabled to adapt to a variety of screen sizes.

A key part of this design approach is the use of fluid, proportion-based grids. The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points. For that purpose, space is divided in a row-column fashion schema where several elements can share the same row by spanning one or multiple columns.

Implementation of responsive design has led to a common set of layouts frequently used by designers. From a high-level perspective, we could classify them into 5 categories: mostly fluid, column drop, layout shifter, tiny tweaks and off canvas

While there's a lot of variety in the responsive design layout patterns reviewed so far there's also some common characteristics. They all tend to stack everything vertically on small screens resulting in long pages full of diverse components. Perhaps less obviously, they all also rely only on the screen space available to them to make layout adjustments.

But isn't that the point of adapting layout to multiple screen sizes -to make them fit? Only if we limit our options to what's currently visible. In fact, you might say there's always more space off-screen for layout adjustments than there is on-screen.

Off canvas behaviour illustration

As depicted above, the off canvas pattern for multi-device layout takes advantage of space off the screen to keep content or navigation hidden until either a larger screen size allows it to be visible or a user takes action to expose it.