A Responsible Response to Responsive Nav

I gave this presentation at Day 2 of Front-End Design Conference 2012. Throughout the conference RWD was covered very well, but no one really touched on RWD Navigation. This presentation covers the some of the different styles of RWD Nav and what we, as designers, can do to make it better.

Transcript

1. *Nav
   

   View Slide

2. david@fivable.com
   davidleininger
   dleininger
   heyyou
   dleinin
   I have social skills...
   David Leininger
   Find me, I’ll talk nerdy to you...
   

   View Slide

3. I have social skills...
   

   View Slide

4. The Basics
   After yesterday, you better know these...
   • Flexible Grids
   • Media Queries
   • Flexible Images (at a minimum)
   

   View Slide

5. The Fun Stuff
   Hopefully some stuff is new to you...
   • box-sizing: border-box;
   • Unnatural Breakpoints
   • Flexible Media
   • Adobe Shadow
   • Responsive Navigation
   (Darcy...)
   (Uncle Dave and Sarah...)
   (Uncle Dave...)
   

   View Slide

6. Adobe Shadow
   Flash sucks, but this is jawesome*
   • It’s FREE Dollars
   • Works on iOS and Android
   • Updates all devices at once
   • Right now only works in Chrome
   *jawesome = awesome mixed with a shark
   http://www.onebitzero.com/wp-content/uploads/2012/03/
   Adobe-Shadow-Helps-You-Test-And-Debug-Websites.jpg
   

   View Slide

7. Adobe Shadow
   Flash sucks, but this is jawesome*
   *jawesome = awesome mixed with a shark
   How to get it...
   • Download the app from
   http://labs.adobe.com/
   technologies/shadow/
   • Get Chrome extension
   • Download app on all your
   mobile devices
   • Browse the interwebs.
   http://www.onebitzero.com/wp-content/uploads/2012/03/
   Adobe-Shadow-Helps-You-Test-And-Debug-Websites.jpg
   

   View Slide

8. What does
   “Mobile First” mean?
   Mobile First = User First = Content First
   

   View Slide

9. What’s wrong here?
   Let’s be honest, these are all pretty...
   

   View Slide

10. So, what’s the solution?
    You’ve got a few options, and I’ve got opinions...
    • Frees up space
    • Easily recognizable
    • Uses native functionality
    • Works with little JS
    • Looks ugly
    • Sub-nav is weird
    Select Menu
    

    View Slide

11. This is better...
    • Simple anchor link
    • Works without JS
    • Single button in header
    • Can confuse user
    • Not all that slick
    Footer Anchor
    So, what’s the solution?
    

    View Slide

12. Now we’re getting somewhere...
    Toggle Menu
    • Easily done with jQuery
    • Users stay in one place
    • It looks rad
    • Requires JS
    So, what’s the solution?
    

    View Slide

13. This is my favorite solution...
    • Very familiar, thanks to
    Facebook
    • Easy to set up
    • It’s fancy
    • Requires JS
    Left Fly-Out (aka Off-Canvas)
    shameless plug...
    So, what’s the solution?
    **http://jasonweaver.name/lab/offcanvas/
    

    View Slide

14. So, what’s the solution?
    This one is pretty cool too...
    • Easy to set up
    • It’s fancy
    • Requires JS
    Left Fly-Out Variation
    

    View Slide

15. So, what’s the solution?
    Let’s all get on the same page...
    • Andy Clarke’s post,
    “We need a standard
    show navigation icon for
    responsive web design”
    RWD Navigation Icon
    **http://www.stuffandnonsense.co.uk/blog/about/we_need_a_standard_show_navigation_icon_for_responsive_web_design
    

    View Slide

16. So, what’s the solution?
    Let’s all get on the same page...
    • Andy Clarke’s post,
    “We need a standard
    show navigation icon for
    responsive web design”
    RWD Navigation Icon
    **http://www.stuffandnonsense.co.uk/blog/about/we_need_a_standard_show_navigation_icon_for_responsive_web_design
    

    View Slide

17. So, what’s the solution?
    Let’s all get on the same page...
    • Andy Clarke’s post,
    “We need a standard
    show navigation icon for
    responsive web design”
    RWD Navigation Icon
    **http://www.stuffandnonsense.co.uk/blog/about/we_need_a_standard_show_navigation_icon_for_responsive_web_design
    

    View Slide

18. So, what’s the solution?
    Let’s all get on the same page...
    • Andy Clarke’s post,
    “We need a standard
    show navigation icon for
    responsive web design”
    RWD Navigation Icon
    **http://www.stuffandnonsense.co.uk/blog/about/we_need_a_standard_show_navigation_icon_for_responsive_web_design
    

    View Slide

19. So, what’s the solution?
    Let’s all get on the same page...
    • Andy Clarke’s post,
    “We need a standard
    show navigation icon for
    responsive web design”
    RWD Navigation Icon
    **http://www.stuffandnonsense.co.uk/blog/about/we_need_a_standard_show_navigation_icon_for_responsive_web_design
    

    View Slide

20. So, what’s the solution?
    Let’s all get on the same page...
    • Andy Clarke’s post,
    “We need a standard
    show navigation icon for
    responsive web design”
    RWD Navigation Icon
    **http://www.stuffandnonsense.co.uk/blog/about/we_need_a_standard_show_navigation_icon_for_responsive_web_design
    

    View Slide

21. So, what’s the solution?
    Let’s all get on the same page...
    • Andy Clarke’s post,
    “We need a standard
    show navigation icon for
    responsive web design”
    RWD Navigation Icon
    **http://www.stuffandnonsense.co.uk/blog/about/we_need_a_standard_show_navigation_icon_for_responsive_web_design
    

    View Slide

22. david@fivable.com
    davidleininger
    dleininger
    heyyou
    dleinin
    I’m totes social...
    David Leininger
    Find me, I’ll talk nerdy to you...
    

    View Slide

23. View Slide