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 full-size slide

  2. MacBook Air © Koy Carraway

    View full-size slide

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

    View full-size slide

  4. Touch Gesture Icons © Mobile Tuxedo

    View full-size slide

  5. Touch Gesture Icons © Mobile Tuxedo

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. /via @StuRobson

    View full-size 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 full-size slide

  11. 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 full-size slide

  12. Mouse
    Keyboard
    Touchpad
    Touchscreen
    Stylus
    Voice
    Movement
    Remote
    Gamepad

    View full-size slide

  13. click
    enter
    pick
    point
    press
    select
    tap
    touch
    1

    View full-size slide

  14. A not so good example…

    View full-size slide

  15. Keep it simple…

    View full-size slide

  16. But don’t let it take over…

    View full-size slide

  17. Hide and reveal…

    View full-size slide

  18. Minor breakpoints…

    View full-size slide

  19. Multiple tiers…

    View full-size slide

  20. Go off-canvas…

    View full-size slide

  21. Jump to “big footer”…

    View full-size slide

  22. But don’t be clever…

    View full-size slide

  23. “Table of contents”…

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. bit.ly/offcanvas
    bit.ly/TIRWD

    View full-size slide

  28. 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 full-size slide

  29. Thank you!
    @dbushell

    View full-size slide