Your SlideShare is downloading. ×
0
Navigation in RWD from the RWD Summit
Navigation in RWD from the RWD Summit
Navigation in RWD from the RWD Summit
Navigation in RWD from the RWD Summit
Navigation in RWD from the RWD Summit
Navigation in RWD from the RWD Summit
Navigation in RWD from the RWD Summit
Navigation in RWD from the RWD Summit
Navigation in RWD from the RWD Summit
Navigation in RWD from the RWD Summit
Navigation in RWD from the RWD Summit
Navigation in RWD from the RWD Summit
Navigation in RWD from the RWD Summit
Navigation in RWD from the RWD Summit
Navigation in RWD from the RWD Summit
Navigation in RWD from the RWD Summit
Navigation in RWD from the RWD Summit
Navigation in RWD from the RWD Summit
Navigation in RWD from the RWD Summit
Navigation in RWD from the RWD Summit
Navigation in RWD from the RWD Summit
Navigation in RWD from the RWD Summit
Navigation in RWD from the RWD Summit
Navigation in RWD from the RWD Summit
Navigation in RWD from the RWD Summit
Navigation in RWD from the RWD Summit
Navigation in RWD from the RWD Summit
Navigation in RWD from the RWD Summit
Navigation in RWD from the RWD Summit
Navigation in RWD from the RWD Summit
Navigation in RWD from the RWD Summit
Navigation in RWD from the RWD Summit
Navigation in RWD from the RWD Summit
Navigation in RWD from the RWD Summit
Navigation in RWD from the RWD Summit
Navigation in RWD from the RWD Summit
Navigation in RWD from the RWD Summit
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Navigation in RWD from the RWD Summit

815

Published on

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

No Downloads
Views
Total Views
815
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
14
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 1
  • 2. 2
  • 3. Roadmap 1. RWD can be difficult 2. Content strategy 3. Building your responsive navigation 4. Navigation patterns & examples3
  • 4. Responsive Web Design Can Be Difficult Why?4
  • 5. 5 photo credit: www.zurb.com
  • 6. But that’s not so bad.6
  • 7. The Future7 photo credits: couriermail.com.au / wired.com / fuckyeainternetfridge.tumblr.com / andersdx.com
  • 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. 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. Content Strategy Retro-fitting an existing website to become responsive can be difficult. Especially one with a large menu.10
  • 11. 11
  • 12. 12
  • 13. 13
  • 14. CONTENT PEOPLE Y U NO MAKE SMALLER SITEMAP14
  • 15. Content Strategy Smaller sitemap = easier to build responsive nav15
  • 16. “Use mobile as an excuse to revisit your navigation.” -Brad Frost16
  • 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. 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. Fail19 https://github.com/briancherne/jquery-hoverIntent
  • 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. Two Sets of Navigation <nav class=“mobile-nav”> <nav class=“desktop-nav”> Using a CMS? No problem!21
  • 22. A Simple JS (jQuery) Click Event $(#menu-toggle).click(function (e) { $(body).toggleClass(active); e.preventDefault(); });22
  • 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. 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. 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. Mobile Nav Patterns on Desktop26 http://squarespace.com
  • 27. Navigation Patterns & Examples www.responsivenavigation.net27
  • 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. 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. 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. 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. 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. 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. 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
  • 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. Thank you! @erickarbe37

×