David Bushell: Responsive Navigation
David Bushell was speaking about Responsive Navigation at Responsive Conf, these are my notes from his talk.
The best way to start with responsive is to do it.
With fixed width you can still pan-and-scan so why responsive? All you do is scroll down and down and down.
There is a long tail of devices: 42% iPhone, 18% iPad - the remaining 40% was over 250 devices.
Screen size != viewport size - we must remain device agnostic. Chasing devices or browsers is a losing game. Device classes are as permanent as a line of sand on the beach. Target standards and it will work on any device that supports standards.
Start with content. If you don't know what your content is then you won't know how to navigate it.
There are a number of different input methods - not just mouse and touch. However there is one canonical event - what ever translates as click. Hover, swipe, etc are enhancements.
Stay consistent with your menus across breakpoints. Don't let your menu take over the whole screen, especially at the top.
Hide and reveal menus can break down with large menus - only show at large breakpoints. Try a mixed approach with high priority items staying shown with lesser items going into the hide/reveal. Try a multi-level reveal but make sure it's not too complicated. Try overlaying the content rather than pushing it down.
Off canvass layout - expand the viewport and bring in from the side.
Jump to big footer - can have much more information in the footer and a skip link at the top.
Table of contents - get rid of the menu all together and the menu link goes to a table of contents.
Key considerations
- Don't be too clever.
- Know your hierachy.
- Keep the hierarchy simple.
- Embrace the viewport,
- Design with affordance in mind. [events used to activate]
- Don't assume that input methods are always as easy - e.g. a docked tablet makes touch harder.
- Enhance from the canonical action.
- Focus on discoverability.
- Singe navigation is a single point of failure.