Skip to Main Content

Layout Patterns in Responsive Web Design

multi-device web design patternsAs more web designers and web developers are creating websites using Responsive Web Design techniques, design patterns are starting to emerge. Luke Wroblewski’s article titled “Multi-Device Layout Patterns” catalogs emerging layout patterns. The article is wonderfully helpful in getting one’s head around various approaches to Responsive Websites, especially because it includes not just a description and sketch of each design pattern, but also includes multiple links to live websites demonstrating each layout pattern.

I appreciate the shift in terminology suggested by the article’s title as well. The phrase “Responsive Web Design” means something to some of us working in the web design and development field, but isn’t very descriptive and probably means nothing to website owners unless they happen to follow the latest web design techniques through the best web design blogs or conferences. “Multi-Device Layouts” gets a lot closer to a descriptive title for the technique, given that the reason to use responsive web design is to have one set of HTML for a web page and having the website adapt for optimal use on different display devices ranging from large monitors to laptop computers to tablets and iPads to smart phones and other mobile devices.

The categories Luke uses to group the layout patterns he’s cataloged include:

  • Mostly Fluid
  • Column Drop
  • Layout Shifter
  • Tiny Tweaks
  • Off Canvas

This last pattern is intriguing. The concept of “Off Canvas” layouts is that some key content like navigation or additional but non-critical content lies off-screen to the left or right side of the main content area and are only a click away. This off canvas content slides into view when the user taps a navigation element to reveal it. At larger screen sizes more of this content is displayed on-screen until at the largest breakpoint all the content is on-screen. Check it out.

Essential reading for web designers and web developers working in the responsive web design arena:
Original article: Multi-Device Layout Patterns