Responsive Navigation

2d65a81054bdc80fc05dc74f2740b4c9?s=47 David Bushell
March 01, 2013

Responsive Navigation

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

2d65a81054bdc80fc05dc74f2740b4c9?s=128

David Bushell

March 01, 2013
Tweet

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 “
  11. None
  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
  14. None
  15. None
  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…

  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. Keep it simple…

  26. None
  27. None
  28. But don’t let it take over…

  29. None
  30. Hide and reveal…

  31. None
  32. None
  33. None
  34. Minor breakpoints…

  35. None
  36. None
  37. None
  38. None
  39. None
  40. Multiple tiers…

  41. None
  42. None
  43. None
  44. Overlay…

  45. None
  46. None
  47. None
  48. None
  49. Go off-canvas…

  50. None
  51. None
  52. None
  53. Jump to “big footer”…

  54. None
  55. None
  56. But don’t be clever…

  57. None
  58. None
  59. None
  60. “Table of contents”…

  61. None
  62. None
  63. None
  64. None
  65. None
  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