Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Navigation in RWD from the RWD Summit


Published on

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

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