Book Review – The Mobile Book – Responsive Design Patterns

Chapter 4: Responsive Design Patterns By Brad Frost in the recently released “The Mobile Book”, by Smashing Magazine.  Reflection by Kyle Keeling

For anyone that has attempted to or is planning on delving into responsive design, this chapter is a blessing.  Responsive Design Patterns re-enforces that we do not need to re-invent the wheel when it comes to designing for small screens.  While we don’t want to fall into a vanilla mobile web, the design patterns referenced in this chapter provide a fantastic and valuable starting point.

Even though Luke Wroblewski (@lukew) has touched on the topic of mobile web patterns (view article), Brad Frost (@brad_frost) takes this topic to the next level by exploring layout patterns, navigation patterns and the concept of conditional loading.  What better way to evolve as a designer, than by exploring what others are doing, what has worked, what has not worked and adjusting accordingly.

Here is a reference to the page layout and navigation patterns proposed.

Page Layout Patterns:

  • Mostly Fluid – roughly the same on medium to large screens, dramatic shift to small screens.  Most common, only requires two design views.
  • Column Drop – popular for three column designs.  Third column drops once the screen is smaller eventually stacking all three….becomes an issue if content is related.
  • Layout Shifter – relatively complex pattern involving distinct layouts at each breakpoint.
  • Tiny Tweaks – ideal for single column simple websites, only changes to font size, images, etc are typically required.
  • Off Canvas – move supplementary content off screen, it can be called upon as needed…eliminates the endless scroll of single column stacked sites on small screens.

Navigation Patterns

  • Header Nav – We want navigation to be accessible but not take up a lot of space, in order to make room for the core content.
  • Footer Nav – Offer users an anchor link to a footer nav, potentially disorienting to the user.
  • Select Menu – uses a form element (out of context) for nav.
  • The Toggle – Aaron Gustafson “Build a Smart Mobile Navigation without Hacks”, employ :target CSS pseudo to toggle list nav, revealing them conditionally.
  • Navigation Fly-Out – implementation of the off-canvas pattern (testing in multiple environments is crucial…Stephanie Rieger “A Plea for Progressive Enhancement”).
  • Priority+ – exposes more important navigation icons and hides the rest behind a “more+” link.
  • Hide ‘n’ Cry – not really a pattern, because it removes all nav options deemed unimportant for users on a small screen…be careful with assumptions on what users need.

Complex Navigation Patterns

  • The Multi-Toggle – nested accordion menu, similar to the basic toggle.
  • The Ol’ Right to Left – reveal child categories by sliding from off the screen, utilizing the off-canvas approach.
  • Skip the Sub-Navigation – sends the user to the parent category landing page to explore the sub nav options on that page.  Requires a refresh just to get to the next level of navigation.
  • Carousel+ – exposes sub-navigation options below the selected menu item, user needs to swipe left or right to discover menu options

These patterns, while not a finite list, offer web professionals a spring board into designing for small screens.  In addition to pattern considerations, Brad Frost touches on Conditional Loading, which offers a viable option for managing content and media on smaller screens with a progression to larger displays.  In a nutshell, Conditional Loading takes a modular design approach, but in the case of smaller screens, offers designers intuitive options for revealing targeted content or media as needed.  The scalability of this approach helps to leverage the real estate of large displays by filling in the space with valuable content.  The product grids of Amazon and iTunes utilize this technique very effectively.

One of the greatest challenges we face today as designers is figuring out how to take a desktop site, that has the luxury of screen real estate, and reduce it to its most practical form.  Finding effective solutions to managing content and media in a responsive fashion is a pretty hot topic these days.  While there will always be a hundred ways to perform a similar task, understanding the content and how users expect to interact with it will always be the driving force behind any responsive solution.  In fact, I would argue that ‘responsive design’ no longer needs to be separated as a technique.  Responsive design is simple the new standard of web design.

More Resources