What's on the Menu
-
Upload
tim-davison -
Category
Technology
-
view
116 -
download
1
description
Transcript of What's on the Menu
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