Category Archives: Uncategorized

WordPress Navigation in Responsive Design

Speaker: Erick Arbe
Twitter: @erickarbe
Presentation Slides:

“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


  • 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


  • can’t really work with sub-navigation (unless you hide sub-nav)


  • accordian style menu
  • great solution for large menus
  • provides good user experience


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


  • 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


  • 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


  • can’t be used with a huge menu

Let’s Have a WordCamp!

WordCamp is a conference that focuses on everything WordPress. WordCamps are informal, community-organized events that are put together by WordPress users like you, from our local Meetup community. Everyone from beginners and casual users to designers and core developers participate, share ideas, and get to know each other.

Wordcamp Atlanta will be held March 15-16 at The Loudermilk Center
40 Courtland Street North East, Atlanta, Georgia 30303