As a web designer you face challenges constantly. But the evolution of mobile devices multiplies the challenges you have to cope with. Placing texts, images, navigation, sidebars, headers and what not on a desktop-sized browser-window is hard enough in terms of creativity and information architecture. Doing the same on a mobile device is close to impossible. There just isn’t enough screen real estate. A new approach that addresses this problem works with the use of so-called off-canvas layouts. In this type of layout content is placed where you cannot see it, outside the screen, well, outside its visible area to be more precise.
Off-Canvas Layouts With Foundation
The creators of the famous framework focussing on responsive web design, Foundation, developed four different variants of off-canvas-layouts and are kind enough to offer them as a free download. There are layouts aiming to hide or show the navigational elements in mobile view and others made to scale content to different target sizes.
That way we can have a horizontal navigation turn into a vertical one, shown at the top or the bottom of the browser-window while in mobile view. Alternatively you can have the navigation vanish altogether with only a menu-button remaining, that brings the navigation back on click or tap. Google+ and Facebook use this concept in their mobile apps. One of the other layouts puts contents in tabs for easier access during mobile view.
All the layouts are relatively simple. It should not be a problem to modify them to your needs. The only thing you cannot avoid is the use of the Foundation framework as all the samples rely on it.
A Showcase Of Interesting Off-Canvas Layouts
A three-column layout gets gradually scaled down. The first step reduces it to a two-column design, degrading to one column on even smaller devices.
Conclusion: Thanks to off-canvas layouts we can find slots for all of our intended content even on the smallest of devices. We are no longer in the dilemma of having to choose between overly reduced content and overladen sites.