Click here to load reader

WordPress Navigation in Responsive Design

  • View

  • Download

Embed Size (px)


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.

Text of WordPress Navigation in Responsive Design

  • 1. Poorly executed navigation canspell disaster for user experience.-Gene Crawford

2. RoadmapWhat is RWD?How your content strategy plays into RWD & navigation.Manipulate WordPress for a better responsive nav.Navigation patterns and examples. 3. What is Responsive Web Design? Where can I learn about RWD? 1. 2. 3. View great examples at: 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 arent users within a different context whenviewing my site on their phone? 5. Retro-fitting an existing website to become responsivecan be difficult.Especially one with a large menu. 6. Use mobile as an excuseto revisit your navigation. -Brad Frost 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. Better CSS Classes1. Add a walker to your wp_nav_menu: Now use some JS to target your Nav: 9. Add Your Own Classes 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. Take Advantage of Custom Links

  • Home
  • About
    • Overview
    • Overview
    • More About
  • Contact

**Use hash tags for top level menu items with sub-nav** 12. Navigation Patterns 13. Just Add Padding Very easy to implement User knows where your nav is No JS required Drawbacks: Wont work with sub-nav Can look awkward at certain points Links: 14. Grid / Percentage Based Easy to touch - buttons are great size Looks terrific & scales nicely No JS required Drawbacks: Cant really work with sub-navigation(unless you hide the sub-nav) Links: 15. Multi-Toggle / Accordion Accordion style menu Great solution for large menus Provides good user experience Drawbacks: Usually requires JS (doesnt need it) Can push page content way down Links: 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 thefooter - especially on long pages Usually need to maintain two sets ofnavigation Links: 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: 18. Off-Canvas / PageSlide Facebook style off-canvas menu Very slick when used with animation Terrific UX Drawbacks: Cant be used with a huge menu Links:*Yes, I know this facebook screenshot is not a responsive site - its justan example of how this looks. 19. TouchOptimal 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 touchtarget size Nokia suggests a 7x7mm touch targetsizephoto courtesy of Luke Wroblewski | 20. Additionally...* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } (.no-box-sizing) 21. ResourcesBetter WalkerNav: JavaScript: (Fluid Grid Layout) 22. Thank You! Erick Arb @erickarbe

Search related