In his blog entry about Multi-Device Layout Patterns, Luke Wroblewski describes different layout patterns for web-sites that adapt to the device they are being shown on. These layout patterns are a central component to making a website that can be said to have a Responsive Design. Using such a pattern is not the only component to a site that has Responsive Design, server-sniffing to serve up only the right size images, for example, is just as necessary to not overwhelm small devices. The layout pattern, however, is the heart to deciding how the site is going to feel for users as they interact with different devices. All Responsive Design sites should equally make sure to send the right images for the size and density of the screen, or not try to do too much with fonts or frameworks on devices with slow connections, but different patterns are only appropriate for specific sites; and there are choices to be made.
Luke mentions the “Off Canvas” design pattern, a design pattern where the content is adapted to work on smaller screens by pushing non-essential content off-canvas. It is used well in Facebook’s mobile apps for example. The description really only discusses how the pattern works on a small screen, and doesn’t scale it up for tablets or desktops. I became interested in this pattern since I wanted something similar for a portfolio site that needed to show well on all kinds of devices.
The portfolio site is much like Facebook’s mobile experience of a central menu with different pages of content: the portfolio has a central menu of pages, in my case projects, to choose from, and then the actual project pages itself. It would be easy to follow this pattern for touch devices, but what should happen on less capable phones? And how should it scale up? Because yes, for a proper Responsive site, it is necessary to think about the least capable device first, and then scale up for better devices from there.
Re-using the work of Torkil Johnsen in making an implementation of a 3-panel “Off Canvas” design, I made a template experiment for this called Swipely Pages, it is now available on GitHub for anyone who wants to check it out. The design scales as following:
Simple phone, no scripting
On a device with little or no scripting capabilities, the menu page and subsequent pages are shown by themselves, and the user jumps between them by clicking links.
Touch phone, scripting
On a device like an iPhone or an iPod, the menu loads the first page of content into a panel that can be swiped in and out of view. By selecting Menu on the content panel the panel slides to reveal the menu, and tapping on a menu entry will load the page into the content panel.
Tablet
On a Tablet, the JavaScript in the menu page senses a bigger screen, and loads all the links in the menu into panels that are arranged horizontally. The user can swipe between the panels, and every swipe left or right neatly aligns the panel being swiped to with the left edge. The Menu button at the top of each panel is a quick shortcut back to the menu.
Desktop
On the desktop the visual behavior is much like on a tablet. However, swiping with the mouse or touchpad has not been implemented yet, so the user has to use the Next link to go to the next panel. Before deploying this template, the positioning of the Next link should be tested with users, and proper swiping with the mouse should probably be implemented.
As said, this template and experiment is available for download on GitHub. It needs work to be used in production, but I hope it accurately shows that more can be done with Responsive Design than just re-stacking elements into the viewport.
Ask The UXer 