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
2. david@fivable.com davidleininger dleininger heyyou dleinin I have social skills... David Leininger Find me, I’ll talk nerdy to you...
3. I have social skills...
4. The Basics After yesterday, you better know these... • Flexible Grids • Media Queries • Flexible Images (at a minimum)
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...)
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
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
8. What does “Mobile First” mean? Mobile First = User First = Content First
9. What’s wrong here? Let’s be honest, these are all pretty...
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
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?
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?
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/
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
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
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
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
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
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
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
22. david@fivable.com davidleininger dleininger heyyou dleinin I’m totes social... David Leininger Find me, I’ll talk nerdy to you...