Responsive Navigation

A look at navigation and global menus in responsive website design. Presented at the Responsive Day Out conference, 1st March, Brighton, UK.

Transcript

1. “Responsive Navigation” David Bushell @dbushell
2. MacBook Air © Koy Carraway
3. Nexus 4 © slaveoffear Ceci n'est pas responsive.
4. Touch Gesture Icons © Mobile Tuxedo
5. Touch Gesture Icons © Mobile Tuxedo
6. 14% “mobile” Data for dbushell.com March 2012–2013
7. 42% iPhone 18% iPad 40%? 258 other devices Data for dbushell.com March 2012–2013
8. viewport Icons © Lachèze Alexandre, James Fenton (from The Noun Project)
9. /via @StuRobson
10. Any attempt to draw a line around a particular device class has as much permanence as a literal line in the sand. ” — Jason Grigsby “
12. Content…
13. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis posuere diam, eu feugiat lorem adipiscing ac. Praesent libero justo, auctor feugiat tempor a, venenatis lacinia nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sapien velit, ac mattis enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum risus sed purus pellentesque et consequat mi tristique. In sed sapien in magna placerat rutrum id quis libero. Vivamus sit amet est nec lorem fermentum faucibus ac at lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis posuere diam, eu feugiat lorem adipiscing ac. Praesent libero justo, auctor feugiat tempor a, venenatis lacinia nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sapien velit, ac mattis enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum risus sed purus pellentesque et consequat mi tristique. In sed sapien in magna placerat rutrum id quis libero. Vivamus sit amet est nec lorem ferme Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis posuere diam, eu feugiat lorem adipiscing ac. Praesent libero justo, auctor feugiat tempor a, venenatis lacinia nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sapien velit, ac mattis enim. Lorem ipsum dolor sit amet, consectetur adip iscing elit. Nulla ve st ibulum Redacted font © Christian Naths
16. Mouse Keyboard Touchpad Touchscreen Stylus Voice Movement Remote Gamepad
17. click enter pick point press select tap touch 1
18. A not so good example…
25. Keep it simple…
28. But don’t let it take over…
30. Hide and reveal…
34. Minor breakpoints…
40. Multiple tiers…
44. Overlay…
49. Go off-canvas…
53. Jump to “big footer”…
56. But don’t be clever…
60. “Table of contents”…
66. • Underload the global menu • Embrace the viewport • Design with affordance in mind
67. • Interactive friction varies • Enhance from the canonical action • Feature detection ≠ preferred usage
68. • Focus on discoverability (beyond menus) • Know your content hierarchy • Single point of navigation = single point of failure
69. bit.ly/offcanvas bit.ly/TIRWD
70. It seems that perfection is attained not when there is nothing more to add, but when there is nothing more to remove. ” — Antoine de Saint-Exupéry “
71. Thank you! @dbushell