Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
What's on the Menu
1. What’s on the Menu?
Design patterns for responsive
navigation.
Tim Davison
@knaboboy
Monday, 29 April 13
2. Overview
• Design patterns are …
• Responsive Design is…
• What about Drupal?
• What about Tablets?
• 6+ patterns to choose from.
Monday, 29 April 13
3. 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
5. 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
30. Credits / Further Reading
• Responsive Navigation Patterns. Brad Frost. 24 February 2012
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
• Responsive Menus: Enhancing Navigation On Mobile Websites.
Rachel McCollin. 28 June 2012
http://mobile.smashingmagazine.com/2012/06/28/responsive-menus-enhancing-navigation-
on-mobile-websites/
• Complex Navigation Patterns for Responsive Design.
Brad Frost. 27 August 2012
http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/
• Responsive Menu Concepts. Tim Pietrusky. 19 November 2012
http://css-tricks.com/responsive-menu-concepts/
• Responsive Mobile Navigation Menu – Methods & Solutions
Kevin Liew. 03 December 2012
http://www.queness.com/post/13093/responsive-mobile-navigation-menumethods-and-
solutions
Monday, 29 April 13
31. Drupal Links
• Tiny nav module
http://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.js
http://ptocheia.net/2012/06/14/making-responsive-navigation-with-selects-work-
on-drupal-7-with-omega-theme-plus-tinynav-js/
Monday, 29 April 13