what's on the menu
DESCRIPTION
Design patterns for responsive navigation.TRANSCRIPT
![Page 1: What's on the Menu](https://reader034.vdocument.in/reader034/viewer/2022042613/54c812374a79597c6d8b45b2/html5/thumbnails/1.jpg)
What’s on the Menu?
Design patterns for responsive navigation.
Tim Davison@knaboboy
Monday, 29 April 13
![Page 2: What's on the Menu](https://reader034.vdocument.in/reader034/viewer/2022042613/54c812374a79597c6d8b45b2/html5/thumbnails/2.jpg)
Overview
• Design patterns are …• Responsive Design is…• What about Drupal?• What about Tablets?• 6+ patterns to choose from.
Monday, 29 April 13
![Page 3: What's on the Menu](https://reader034.vdocument.in/reader034/viewer/2022042613/54c812374a79597c6d8b45b2/html5/thumbnails/3.jpg)
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
![Page 4: What's on the Menu](https://reader034.vdocument.in/reader034/viewer/2022042613/54c812374a79597c6d8b45b2/html5/thumbnails/4.jpg)
Monday, 29 April 13
![Page 5: What's on the Menu](https://reader034.vdocument.in/reader034/viewer/2022042613/54c812374a79597c6d8b45b2/html5/thumbnails/5.jpg)
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
![Page 6: What's on the Menu](https://reader034.vdocument.in/reader034/viewer/2022042613/54c812374a79597c6d8b45b2/html5/thumbnails/6.jpg)
This isn’t right!
Monday, 29 April 13
![Page 7: What's on the Menu](https://reader034.vdocument.in/reader034/viewer/2022042613/54c812374a79597c6d8b45b2/html5/thumbnails/7.jpg)
And neither is this!
Monday, 29 April 13
![Page 8: What's on the Menu](https://reader034.vdocument.in/reader034/viewer/2022042613/54c812374a79597c6d8b45b2/html5/thumbnails/8.jpg)
But what about this?
Monday, 29 April 13
![Page 9: What's on the Menu](https://reader034.vdocument.in/reader034/viewer/2022042613/54c812374a79597c6d8b45b2/html5/thumbnails/9.jpg)
Monday, 29 April 13
![Page 10: What's on the Menu](https://reader034.vdocument.in/reader034/viewer/2022042613/54c812374a79597c6d8b45b2/html5/thumbnails/10.jpg)
Authenticjobs.com
Monday, 29 April 13
![Page 11: What's on the Menu](https://reader034.vdocument.in/reader034/viewer/2022042613/54c812374a79597c6d8b45b2/html5/thumbnails/11.jpg)
Mobile Style
Monday, 29 April 13
![Page 12: What's on the Menu](https://reader034.vdocument.in/reader034/viewer/2022042613/54c812374a79597c6d8b45b2/html5/thumbnails/12.jpg)
Mobile Style
Monday, 29 April 13
![Page 13: What's on the Menu](https://reader034.vdocument.in/reader034/viewer/2022042613/54c812374a79597c6d8b45b2/html5/thumbnails/13.jpg)
omdrl.org
Monday, 29 April 13
![Page 14: What's on the Menu](https://reader034.vdocument.in/reader034/viewer/2022042613/54c812374a79597c6d8b45b2/html5/thumbnails/14.jpg)
Content First
Monday, 29 April 13
![Page 15: What's on the Menu](https://reader034.vdocument.in/reader034/viewer/2022042613/54c812374a79597c6d8b45b2/html5/thumbnails/15.jpg)
Content First
Monday, 29 April 13
![Page 16: What's on the Menu](https://reader034.vdocument.in/reader034/viewer/2022042613/54c812374a79597c6d8b45b2/html5/thumbnails/16.jpg)
Monday, 29 April 13
![Page 17: What's on the Menu](https://reader034.vdocument.in/reader034/viewer/2022042613/54c812374a79597c6d8b45b2/html5/thumbnails/17.jpg)
Click to Footer
Monday, 29 April 13
![Page 18: What's on the Menu](https://reader034.vdocument.in/reader034/viewer/2022042613/54c812374a79597c6d8b45b2/html5/thumbnails/18.jpg)
Click to Footer
Monday, 29 April 13
![Page 19: What's on the Menu](https://reader034.vdocument.in/reader034/viewer/2022042613/54c812374a79597c6d8b45b2/html5/thumbnails/19.jpg)
Monday, 29 April 13
![Page 20: What's on the Menu](https://reader034.vdocument.in/reader034/viewer/2022042613/54c812374a79597c6d8b45b2/html5/thumbnails/20.jpg)
Select List
Monday, 29 April 13
![Page 21: What's on the Menu](https://reader034.vdocument.in/reader034/viewer/2022042613/54c812374a79597c6d8b45b2/html5/thumbnails/21.jpg)
Select List
Monday, 29 April 13
![Page 22: What's on the Menu](https://reader034.vdocument.in/reader034/viewer/2022042613/54c812374a79597c6d8b45b2/html5/thumbnails/22.jpg)
smashingmagazine.com
Monday, 29 April 13
![Page 23: What's on the Menu](https://reader034.vdocument.in/reader034/viewer/2022042613/54c812374a79597c6d8b45b2/html5/thumbnails/23.jpg)
Toggle Drop-down
Monday, 29 April 13
![Page 24: What's on the Menu](https://reader034.vdocument.in/reader034/viewer/2022042613/54c812374a79597c6d8b45b2/html5/thumbnails/24.jpg)
Toggle Drop-down
Monday, 29 April 13
![Page 25: What's on the Menu](https://reader034.vdocument.in/reader034/viewer/2022042613/54c812374a79597c6d8b45b2/html5/thumbnails/25.jpg)
frontendunited.com
Monday, 29 April 13
![Page 26: What's on the Menu](https://reader034.vdocument.in/reader034/viewer/2022042613/54c812374a79597c6d8b45b2/html5/thumbnails/26.jpg)
Side Slide
Monday, 29 April 13
![Page 27: What's on the Menu](https://reader034.vdocument.in/reader034/viewer/2022042613/54c812374a79597c6d8b45b2/html5/thumbnails/27.jpg)
Side Slide
Monday, 29 April 13
![Page 28: What's on the Menu](https://reader034.vdocument.in/reader034/viewer/2022042613/54c812374a79597c6d8b45b2/html5/thumbnails/28.jpg)
m.facebook.com
Monday, 29 April 13
![Page 29: What's on the Menu](https://reader034.vdocument.in/reader034/viewer/2022042613/54c812374a79597c6d8b45b2/html5/thumbnails/29.jpg)
Summary
Monday, 29 April 13
![Page 30: What's on the Menu](https://reader034.vdocument.in/reader034/viewer/2022042613/54c812374a79597c6d8b45b2/html5/thumbnails/30.jpg)
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
![Page 31: What's on the Menu](https://reader034.vdocument.in/reader034/viewer/2022042613/54c812374a79597c6d8b45b2/html5/thumbnails/31.jpg)
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
![Page 32: What's on the Menu](https://reader034.vdocument.in/reader034/viewer/2022042613/54c812374a79597c6d8b45b2/html5/thumbnails/32.jpg)
Finally
Any Questions?
Tim Davison@knaboboy
Monday, 29 April 13