WordPress Navigation in Responsive Design


Published on

I gave this presentation at WordCamp Atlanta 2013. It covers one of the biggest challenges in responsive design - navigation. Specifically, it covers a few tips on how to leverage your WordPress theme's navigation to make it more responsive. I also cover some popular patterns in navigation that are best formatted for responsive designs - specifically mobile viewports.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

WordPress Navigation in Responsive Design

  1. 1. “Poorly executed navigation canspell disaster for user experience.” -Gene Crawford
  2. 2. RoadmapWhat is RWD?How your content strategy plays into RWD & navigation.Manipulate WordPress for a better responsive nav.Navigation patterns and examples.
  3. 3. What is Responsive Web Design? Where can I learn about RWD? 1. bradrost.github.com/this-is-responsive 2. teamtreehouse.com 3. google.com View great examples at: mediaqueri.es
  4. 4. Content Strategy1. What do I want my users to see on mobile?2. Should I show a “lite” version of my site?3. But aren’t users within a different context whenviewing my site on their phone?
  5. 5. Retro-fitting an existing website to become responsive can be difficult.Especially one with a large menu.
  6. 6. “Use mobile as an excuseto revisit your navigation.” -Brad Frost
  7. 7. Manipulate WordPress1. Target your navigation through better CSS classes.2. Use multiple menus if necessary3. Use custom links for top-level menu items
  8. 8. Better CSS Classes1. Add a “walker” to your wp_nav_menu: <?php wp_nav_menu( array( theme_location => primary, container => false, walker=> new Bootstrap_Walker_Nav_Menu, menu_class => nav ) ); ?> https://gist.github.com/erickarbe/41924942. Now use some JS to target your Nav: http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js
  9. 9. Add Your Own Classes
  10. 10. Register a Second Menuregister_nav_menus( array( primary => __( Primary Menu, base ), mobile => __( Mobile Menu, base )) ); .primary_menu { display: none; } .mobile_menu { display: block; } @media all and (min-width:768px) { .primary_menu { display: block; } .mobile_menu { display: none; } }**Useful when providing a menu in the header & footer**
  11. 11. Take Advantage of Custom Links<ul> <li><a href="/home/">Home</a></li> <li class="has-submenu" ><a class="dropdown-toggle" href="#">About</a> <ul class="dropdown-menu"> <li><a href="/about/">Overview</a></li> <li><a href="/overview/">Overview</a></li> <li><a href="/more-about/">More About</a></li> </ul> </li> <li><a href="/contact/">Contact</a></li></ul>**Use hash tags for top level menu items with sub-nav**
  12. 12. Navigation Patterns
  13. 13. Just Add Padding• Very easy to implement• User knows where your nav is• No JS required• Drawbacks:• Won’t work with sub-nav• Can look awkward at certain points• Links:• http://www.inboxwarriors.co.uk/• http://responsivenavigation.net/examples/simple-padding/
  14. 14. Grid / Percentage Based• Easy to touch - buttons are great size• Looks terrific & scales nicely• No JS required• Drawbacks:• Can’t really work with sub-navigation (unless you hide the sub-nav)• Links:• http://css-tricks.com• http://traveloregon.com/
  15. 15. Multi-Toggle / Accordion• Accordion style menu• Great solution for large menus• Provides good user experience• Drawbacks:• Usually requires JS (doesn’t need it)• Can push page content way down• Links:• http://www.microsoft.com/en-us/default.aspx
  16. 16. Footer Nav• Great concept - content first• Pretty easy to implement• Works across all browsers• “Give ‘em content, not menus”• Drawbacks:• Provides an awkward jump to the footer - especially on long pages• Usually need to maintain two sets of navigation• Links:• http://aneventapart.com/• http://responsivenavigation.net/examples/footer- list/
  17. 17. Select Nav• Can be super easy to implement• Easy to retro-fit an existing site• Works well with large menus• Uses native UI controls• Drawbacks:• Not incredibly sexy (tough to style)• Usability is just OK• Requires JS• Links:• http://tinynav.viljamis.com/• http://lukaszfiszer.github.com/selectnav.js/
  18. 18. Off-Canvas / PageSlide• Facebook style off-canvas menu• Very slick when used with animation• Terrific UX• Drawbacks:• Can’t be used with a huge menu• Links:• https://github.com/torkiljohnsen/swipe• http://jasonweaver.name/lab/offcanvas/*Yes, I know this facebook screenshot is not a responsive site - it’s justan example of how this looks.
  19. 19. http://www.flickr.com/photos/oliviahouse32/3347768206/ Think “Touch”Optimal Sizes for Touch Elements• Average human finger pad is 10-14mm• Apple suggests a 44x44 points (basically, 44px) touch target size (11.6mm)• Windows suggests a 9x9mm touch target size• Nokia suggests a 7x7mm touch target size photo courtesy of Luke Wroblewski | www.lukew.com
  20. 20. Additionally...* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } http://paulirish.com/2012/box-sizing-border-box-ftw/ http://html5please.com/#box-sizing https://github.com/Schepp/box-sizing-polyfill http://modernizr.com/ (.no-box-sizing)
  21. 21. ResourcesBetter WalkerNav: https://gist.github.com/erickarbe/4192494Drop-down JavaScript: http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.jshttp://erickar.be/blog/my-experience-with-navigation-in-responsive-designhttp://responsivenavigation.net/http://mediaqueri.es/http://www.responsinator.comhttp://lab.maltewassermann.com/viewport-resizer/http://tinynav.viljamis.com/http://lukaszfiszer.github.com/selectnav.js/http://designshack.net/articles/css/code-a-responsive-navigation-menu/ (Fluid Grid Layout)
  22. 22. Thank You! Erick Arbé @erickarbe