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