WordPress Navigation in Responsive Design

Speaker: Erick Arbe
Twitter: @erickarbe
Presentation Slides: shrd.by/RyAW0x

“Poorly executed navigation can spell disaster for user experience” – Gene Crawford

What is RWD? – Where can I learn about it?

How your content strategy plays into RWD & navigation

  • What do I want my users to see on mobile
  • Should I show a “lite” version of my site?
  • But aren’t users within different context when viewing my site on their phone?
  • Retro-fitting an existing website to be responsive can be difficult…especially one with a large menu

“Use mobile as an excuse to revisit navigation” – Brad Frost

Manipulate wordpress for a better responsive nav

  • Target your navigation through better css classes
  • use multiple menus if necessary
  • Use # in custom links for top level navigation so users on mobile devices click for a drop down, not to go to that page

think touch

  • optimal sizes for touch elements
  • average human finger pad is 10-14mm
  • apple suggests a 44×44 points (basically, 44px) touch target size (11.6mm)
  • windows suggest a 9x9mm touch target size
  • nokia suggests a 7×7 touch target size

Navigation Patterns

simple padding method

  • very easy to implement
  • users know where your nav is
  • no JS required

drawbacks

  • won’t work with sub-nav
  • can look akward at certain points

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 sub-nav)

multi-toggle/accordian

  • accordian 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

footer nav

  • great concept – content first
  • pretty easy to implement
  • works across all browsers
  • “give em’ content, not menus”

drawbacks

  • provides an akward jump to footer – especially on long pages
  • usually need to maintain two sets of navigation

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

off-canvas/page slide

  • facebook style off-canvas menu
  • very slick when used with annimation
  • terrific ux

drawbacks

  • can’t be used with a huge menu