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

A Responsible Response to Responsive Nav

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.

David Leininger

June 09, 2012
Tweet

More Decks by David Leininger

Other Decks in Design

Transcript

  1. The Basics After yesterday, you better know these... • Flexible

    Grids • Media Queries • Flexible Images (at a minimum)
  2. 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...)
  3. 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
  4. 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
  5. 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
  6. 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?
  7. 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?
  8. 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/
  9. So, what’s the solution? This one is pretty cool too...

    • Easy to set up • It’s fancy • Requires JS Left Fly-Out Variation
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  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
  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