What’s on the Menu?

Design patterns for responsive navigation.

Tim Davison@knaboboy

Monday, 29 April 13

Overview

• Design patterns are …• Responsive Design is…• What about Drupal?• What about Tablets?• 6+ patterns to choose from.

Monday, 29 April 13

So What is a Menu?

<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">News</a></li> <li><a href="#">Events</a></li> <li><a href="#">Products</a></li> <li><a href="#">Services</a></li> <li><a href="#">Shop</a></li> <li><a href="#">Contact</a></li> </ul> </nav>

Monday, 29 April 13

Monday, 29 April 13

Things to Consider

• Use of Space• Familiarity• Ease of Use• Fragility• Fallbacks

• Development effort• As the site evolves• Symantics (purist)• Page Weight• Wow factor

There is no single answer.

Monday, 29 April 13

This isn’t right!

Monday, 29 April 13

And neither is this!

Monday, 29 April 13

But what about this?

Monday, 29 April 13

Monday, 29 April 13

Authenticjobs.com

Monday, 29 April 13

Mobile Style

Monday, 29 April 13

Mobile Style

Monday, 29 April 13

omdrl.org

Monday, 29 April 13

Content First

Monday, 29 April 13

Content First

Monday, 29 April 13

Monday, 29 April 13

Click to Footer

Monday, 29 April 13

Click to Footer

Monday, 29 April 13

Monday, 29 April 13

Select List

Monday, 29 April 13

Select List

Monday, 29 April 13

smashingmagazine.com

Monday, 29 April 13

Toggle Drop-down

Monday, 29 April 13

Toggle Drop-down

Monday, 29 April 13

frontendunited.com

Monday, 29 April 13

Side Slide

Monday, 29 April 13

Side Slide

Monday, 29 April 13

m.facebook.com

Monday, 29 April 13

Summary

Monday, 29 April 13

Credits / Further Reading

• Responsive Navigation Patterns. Brad Frost. 24 February 2012http://bradfrostweb.com/blog/web/responsive-nav-patterns/

• Responsive Menus: Enhancing Navigation On Mobile Websites. Rachel McCollin. 28 June 2012http://mobile.smashingmagazine.com/2012/06/28/responsive-menus-enhancing-navigation-on-mobile-websites/

• Complex Navigation Patterns for Responsive Design. Brad Frost. 27 August 2012http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/

• Responsive Menu Concepts. Tim Pietrusky. 19 November 2012http://css-tricks.com/responsive-menu-concepts/

• Responsive Mobile Navigation Menu – Methods & SolutionsKevin Liew. 03 December 2012http://www.queness.com/post/13093/responsive-mobile-navigation-menumethods-and-solutions

Monday, 29 April 13

Drupal Links

• Tiny nav modulehttp://drupal.org/project/tinynav

• Creating a responsive menu for Omega http://

ivanchaquea.com/creating-responsive-menu-omega-subthemes.html

• Making responsive navigation with selects work on Drupal 7 with Omega theme, plus tinynav.jshttp://ptocheia.net/2012/06/14/making-responsive-navigation-with-selects-work-on-drupal-7-with-omega-theme-plus-tinynav-js/

Monday, 29 April 13

Finally

Any Questions?

Tim Davison@knaboboy

Monday, 29 April 13