Navigation in RWD from the RWD Summit


Published on

Published in: Technology, Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
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:
  6. 6. But that’s not so bad.6
  7. 7. The Future7 photo credits: / / /
  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:
  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
  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. 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 |
  19. 19. Fail19
  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 (Animating with max-height)
  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 (Animating with max-height)
  25. 25. Build mobile first! @media all and (min-width:30em;){ } instead of @media all and (max-width:768px;){ }25 (Animating with max-height)
  26. 26. Mobile Nav Patterns on Desktop26
  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:••
  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:••
  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:•
  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:•• 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:••
  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:••
  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://www.starbucks.com34
  35. 35. 35
  36. 36. Resources Drop-down JavaScript: (Fluid Grid Layout) WordPress: a better WalkerNav:
  37. 37. Thank you! @erickarbe37