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
   

   View Slide

2. MacBook Air © Koy Carraway
   

   View Slide

3. Nexus 4 © slaveoffear
   Ceci n'est pas responsive.
   

   View Slide

4. Touch Gesture Icons © Mobile Tuxedo
   

   View Slide

5. Touch Gesture Icons © Mobile Tuxedo
   

   View Slide

6. 14% “mobile”
   Data for dbushell.com March 2012–2013
   

   View Slide

7. 42% iPhone
   18% iPad
   40%?
   258 other devices
   Data for dbushell.com March 2012–2013
   

   View Slide

8. viewport
   Icons © Lachèze Alexandre, James Fenton (from The Noun Project)
   

   View Slide

9. /via @StuRobson
   

   View Slide

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
    “
    

    View Slide

11. View Slide

12. Content…
    

    View Slide

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
    

    View Slide

14. View Slide

15. View Slide

16. Mouse
    Keyboard
    Touchpad
    Touchscreen
    Stylus
    Voice
    Movement
    Remote
    Gamepad
    

    View Slide

17. click
    enter
    pick
    point
    press
    select
    tap
    touch
    1
    

    View Slide

18. A not so good example…
    

    View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. Keep it simple…
    

    View Slide

26. View Slide

27. View Slide

28. But don’t let it take over…
    

    View Slide

29. View Slide

30. Hide and reveal…
    

    View Slide

31. View Slide

32. View Slide

33. View Slide

34. Minor breakpoints…
    

    View Slide

35. View Slide

36. View Slide

37. View Slide

38. View Slide

39. View Slide

40. Multiple tiers…
    

    View Slide

41. View Slide

42. View Slide

43. View Slide

44. Overlay…
    

    View Slide

45. View Slide

46. View Slide

47. View Slide

48. View Slide

49. Go off-canvas…
    

    View Slide

50. View Slide

51. View Slide

52. View Slide

53. Jump to “big footer”…
    

    View Slide

54. View Slide

55. View Slide

56. But don’t be clever…
    

    View Slide

57. View Slide

58. View Slide

59. View Slide

60. “Table of contents”…
    

    View Slide

61. View Slide

62. View Slide

63. View Slide

64. View Slide

65. View Slide

66. • Underload the global menu
    • Embrace the viewport
    • Design with affordance in mind
    

    View Slide

67. • Interactive friction varies
    • Enhance from the canonical action
    • Feature detection ≠ preferred usage
    

    View Slide

68. • Focus on discoverability (beyond menus)
    • Know your content hierarchy
    • Single point of navigation = single point of failure
    

    View Slide

69. bit.ly/offcanvas
    bit.ly/TIRWD
    

    View Slide

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
    “
    

    View Slide

71. Thank you!
    @dbushell
    

    View Slide