Click here to load reader

WordPress Navigation in Responsive Design

  • View
    2.329

  • Download
    1

Embed Size (px)

DESCRIPTION

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. bradrost.github.com/this-is-responsive 2. teamtreehouse.com 3. google.com View great examples at: mediaqueri.es 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: 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. 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: http://www.inboxwarriors.co.uk/ http://responsivenavigation.net/examples/simple-padding/ 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: http://css-tricks.com http://traveloregon.com/ 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: http://www.microsoft.com/en-us/default.aspx 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: http://aneventapart.com/ http://responsivenavigation.net/examples/footer-list/ 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. 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: https://github.com/torkiljohnsen/swipe http://jasonweaver.name/lab/offcanvas/*Yes, I know this facebook screenshot is not a responsive site - its justan example of how this looks. 19. http://www.flickr.com/photos/oliviahouse32/3347768206/Think 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 | www.lukew.com 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. 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. Thank You! Erick Arb @erickarbe

Search related