contact menu


If you have any questions about this pattern and how it's implemented, please send a message via email or Twitter.

View on your phone to see the pattern adapt to a touch device.


Off Canvas Hybrid

A Responsive Web Design Pattern

I built this demo after reading Luke Wroblewski's Multi-Device Layout Patterns post. If you remember Twitter's old iPad app or have used Path's iPhone app, you've swiped panels back and forth as a means of navigation. Top panels reveal lower panels and so on. This pattern is a twist on the flattened navigation pattern seen in the iOS weather and stock apps. But instead of moving laterally across panels, we're sliding panels off the top much like dealing a deck of cards.

I call this a "hybrid" pattern because it's meant to function as a stack on touch devices and as flattened navigation on desktop. Why not use a stack pattern on desktop? Because it does not translate well to mouse input. Imagine shuffling a deck of cards with stick. Kind of awkward right? It's equally as awkward trying to click, drag and toss panels around your screen... it just doesn't feel right.

> 1000px breakpoint: All elements are on screen.

> 480px breakpoint: Contact panel hides off screen.

> 480px breakpoint: Clicking contact navigation slides contact panel on screen and slides menu and navigation bar off screen.

<= 480px breakpoint: Both navigation option appear while both panels hide off screen.

<= 480px breakpoint: Clicking navigation slides the associated panel on screen and slides everything else off screen.

Adjusting the pattern according to input device also makes a nice separation in the code. Desktop users get a completely CSS-driven experience. That's right.. no JavaScript. This means even users who disable JavaScript can experience the joys of Responsive Web Design. Touch users get a JavaScript-driven experience with no dependencies on the desktop code... since there is no desktop code!

If you've made it this far and haven't resized your browser or rotated your phone... give it a shot! Please also review details on the desktop experience.