Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Navigation

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.

David Bushell

March 01, 2013
Tweet

Other Decks in Design

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