Navigation in RWD from the RWD Summit

1,460 views

Published on

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,460
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
17
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Navigation in RWD from the RWD Summit

  1. 1. 1
  2. 2. 2
  3. 3. Roadmap 1. RWD can be difficult 2. Content strategy 3. Building your responsive navigation 4. Navigation patterns & examples3
  4. 4. Responsive Web Design Can Be Difficult Why?4
  5. 5. 5 photo credit: www.zurb.com
  6. 6. But that’s not so bad.6
  7. 7. The Future7 photo credits: couriermail.com.au / wired.com / fuckyeainternetfridge.tumblr.com / andersdx.com
  8. 8. Responsive Web Design Can Be Difficult 1.Explaining RWD to clients 2.The lack of a static design phase 3.Navigation 4.Images 5.Tables 6.Converting old fixed-width sites 7.What to serve users of old versions of IE 8.Testing time and cost8 source: http://www.netmagazine.com/features/top-responsive-web-design-problems-and-how-avoid-them
  9. 9. Content Strategy 1. What do I want my users to see on mobile? 2. Should I show a “lite” version of my site? 3. But aren’t users within a different context when viewing my site on their phone?9
  10. 10. Content Strategy Retro-fitting an existing website to become responsive can be difficult. Especially one with a large menu.10
  11. 11. 11
  12. 12. 12
  13. 13. 13
  14. 14. CONTENT PEOPLE Y U NO MAKE SMALLER SITEMAP14
  15. 15. Content Strategy Smaller sitemap = easier to build responsive nav15
  16. 16. “Use mobile as an excuse to revisit your navigation.” -Brad Frost16
  17. 17. Building Your Responsive Nav 1. Hover vs. Touch 2. Top level menu items 3. Two sets of navigation? 4. A simple JS function 5. Some easy CSS to implement 6. Position: fixed 7. Mobile first! 8. Using your mobile nav as your desktop nav (mind = blown)17
  18. 18. http://www.flickr.com/photos/oliviahouse32/3347768206/ Think “Touch” Optimal Sizes for Touch Elements • Average human finger pad is 10-14mm • Apple suggests a 44x44 points (basically, 44px) touch target size (11.6mm) • Windows suggests a 9x9mm touch target size • Nokia suggests a 7x7mm touch target size18 photo courtesy of Luke Wroblewski | www.lukew.com
  19. 19. Fail19 https://github.com/briancherne/jquery-hoverIntent
  20. 20. Building Your Responsive Nav <ul> <li><a href=“/”>Home</a></li> <li class=“has-submenu”><a href=“#”>About</a> <ul class=“sub-menu”> <li><a href=“/overview/”>Overview</a></li> <li><a href=“/details/”>Details</a></li> </ul> </li> <li><a href=“/contact/”>Contact</a></li> </ul>20
  21. 21. Two Sets of Navigation <nav class=“mobile-nav”> <nav class=“desktop-nav”> Using a CMS? No problem!21
  22. 22. A Simple JS (jQuery) Click Event $(#menu-toggle).click(function (e) { $(body).toggleClass(active); e.preventDefault(); });22
  23. 23. Some Easy CSS .nav { * { max-height:0; -moz-box-sizing: border-box; } -webkit-box-sizing: border-box; .open .nav { box-sizing: border-box; max-height:55em; } }23 http://jsfiddle.net/leaverou/zwvNY/ (Animating with max-height) http://paulirish.com/2012/box-sizing-border-box-ftw/
  24. 24. Position: fixed; Should you use it? Desktop: OK // Mobile: No • Decent mobile browser support - not great though. • Several known issues make it tough to justify using across the board. • Pinch/Zoom works weird! Zoom needs to be disabled in order to get a better UX.24 http://jsfiddle.net/leaverou/zwvNY/ (Animating with max-height) http://paulirish.com/2012/box-sizing-border-box-ftw/
  25. 25. Build mobile first! @media all and (min-width:30em;){ } instead of @media all and (max-width:768px;){ }25 http://jsfiddle.net/leaverou/zwvNY/ (Animating with max-height) http://paulirish.com/2012/box-sizing-border-box-ftw/
  26. 26. Mobile Nav Patterns on Desktop26 http://squarespace.com
  27. 27. Navigation Patterns & Examples www.responsivenavigation.net27
  28. 28. Just Add Padding• Very easy to implement• User knows where your nav is• No JS required• Drawbacks:• Won’t work with sub-nav• Can look awkward at certain points• Links:• http://www.inboxwarriors.co.uk/• http://responsivenavigation.net/examples/simple-padding/28
  29. 29. Grid / Percentage Based• Easy to touch - buttons are great size• Looks terrific & scales nicely• No JS required• Drawbacks:• Can’t really work with sub-navigation (unless you hide the sub-nav)• Links:• http://css-tricks.com• http://traveloregon.com/29
  30. 30. Multi-Toggle / Accordion• Accordion style menu• Great solution for large menus• Provides good user experience• Drawbacks:• Usually requires JS (doesn’t need it)• Can push page content way down• Links:• http://www.microsoft.com/en-us/default.aspx30
  31. 31. Footer Nav• Great concept - content first• Pretty easy to implement• Works across all browsers• “Give ‘em content, not menus”• Drawbacks:• Provides an awkward jump to the footer - especially on long pages• Usually need to maintain two sets of navigation• Links:• http://aneventapart.com/• http://responsivenavigation.net/examples/footer- list/31
  32. 32. Select Nav• Can be super easy to implement• Easy to retro-fit an existing site• Works well with large menus• Uses native UI controls• Drawbacks:• Not incredibly sexy (tough to style)• Usability is just OK• Requires JS• Links:• http://tinynav.viljamis.com/• http://lukaszfiszer.github.com/selectnav.js/32
  33. 33. Off-Canvas / PageSlide• Facebook style off-canvas menu• Very slick when used with animation• Terrific UX• Drawbacks:• Can’t be used with a huge menu• Links:• https://github.com/torkiljohnsen/swipe• http://jasonweaver.name/lab/offcanvas/33
  34. 34. No Sub-Nav• Keeps the responsive menu small by hiding the sub-nav• You should use overview pages or on-page secondary navigation in conjunction with this• Good for very large menus• Drawbacks:• Lose direct access to the sub-nav on your site• Links:• http://bostonglobe.com/• http://www.starbucks.com34
  35. 35. 35
  36. 36. Resources http://responsivenavigation.net/ http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/ http://erickar.be/blog/my-experience-with-navigation-in-responsive-design Drop-down JavaScript: http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js http://mediaqueri.es/ http://www.responsinator.com http://lab.maltewassermann.com/viewport-resizer/ http://tinynav.viljamis.com/ http://lukaszfiszer.github.com/selectnav.js/ http://designshack.net/articles/css/code-a-responsive-navigation-menu/ (Fluid Grid Layout) WordPress: a better WalkerNav: https://gist.github.com/erickarbe/419249436
  37. 37. Thank you! @erickarbe37

×