Off Canvas layout in responsive web design

As the screen size is limited on mobile devices, content on smartphones and tablets is displayed in a one-column layout arranged below each other. On site with a lot of content this can result in the user having to scroll down long blocks of content to find the desired content. To avoid thisNative Mobile Apps such as Facebook use the so called Off Canvas layout. In Off Canvas layouts content on mobile devices is placed outside the visible screen area (right and left). Via a Button Click this content can then be made visible ​​by the user whenever it is needed.

Off canvas Web DesignOff canvas Web Design

But Off Canvas layouts are not only suitable for native apps, in responsive web design, this technique can also be come in very handy. Thus, content created for small screens outside the visible area will appear on larger screens gradually.

Off Canvas layout adjusts according to the screen width. On a Smartphone additional content (such as a navigation or widgets) are hidden by default. To open them the user has to button click. If additional content is displayed, the main content pushes accordingly to the left or right out of the visible area. To get back to the main view the user again needs to button click. On a Tablet with a bit more screen-width the layout can then be adjusted and previously hidden areas are visible. On a wide enough desktop screen or a laptop display, the entire layout will be displayed. There are many variants of Off Canvas layouts. With the help of CSS a lot more layout options can be created.

If you want to test how your website design looks like on a Smartphone or a Tablet you can try online at mobiletest.me.