Your SlideShare is downloading. ×
0
1
2
Roadmap    1. RWD can be difficult    2. Content strategy    3. Building your responsive navigation    4. Navigation patte...
Responsive Web Design        Can Be Difficult            Why?4
5   photo credit: www.zurb.com
But that’s not so bad.6
The Future7   photo credits: couriermail.com.au / wired.com / fuckyeainternetfridge.tumblr.com / andersdx.com
Responsive Web Design             Can Be Difficult    1.Explaining RWD to clients    2.The lack of a static design phase  ...
Content Strategy    1. What do I want my users to see on mobile?    2. Should I show a “lite” version of my site?    3. Bu...
Content Strategy     Retro-fitting an existing website          to become responsive               can be difficult.     E...
11
12
13
CONTENT PEOPLE     Y U NO MAKE SMALLER SITEMAP14
Content Strategy     Smaller sitemap = easier to build responsive nav15
“Use mobile as an excuse     to revisit your navigation.”                            -Brad Frost16
Building Your Responsive Nav     1. Hover vs. Touch     2. Top level menu items     3. Two sets of navigation?     4. A si...
http://www.flickr.com/photos/oliviahouse32/3347768206/     Think “Touch” Optimal Sizes for Touch Elements •   Average huma...
Fail19   https://github.com/briancherne/jquery-hoverIntent
Building Your Responsive Nav      <ul>      <li><a href=“/”>Home</a></li>      <li class=“has-submenu”><a href=“#”>About</...
Two Sets of Navigation     <nav class=“mobile-nav”>   <nav class=“desktop-nav”>                Using a CMS? No problem!21
A Simple JS (jQuery) Click Event         $(#menu-toggle).click(function (e) {             $(body).toggleClass(active);    ...
Some Easy CSS       .nav {                                                                   * {         max-height:0;    ...
Position: fixed;     Should you use it?     Desktop: OK // Mobile: No     •   Decent mobile browser support -         not ...
Build mobile first!                       @media all and (min-width:30em;){ }                                             ...
Mobile Nav Patterns on Desktop26                    http://squarespace.com
Navigation Patterns & Examples          www.responsivenavigation.net27
Just Add Padding•    Very easy to implement•    User knows where your nav is•    No JS required•    Drawbacks:•    Won’t w...
Grid / Percentage Based•    Easy to touch - buttons are great size•    Looks terrific & scales nicely•    No JS required• ...
Multi-Toggle / Accordion•    Accordion style menu•    Great solution for large menus•    Provides good user experience•   ...
Footer Nav•    Great concept - content first•    Pretty easy to implement•    Works across all browsers•    “Give ‘em cont...
Select Nav•    Can be super easy to implement•    Easy to retro-fit an existing site•    Works well with large menus•    U...
Off-Canvas / PageSlide•    Facebook style off-canvas menu•    Very slick when used with animation•    Terrific UX•    Draw...
No Sub-Nav•    Keeps the responsive menu small     by hiding the sub-nav•    You should use overview pages or     on-page ...
35
Resources     http://responsivenavigation.net/     http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-respon...
Thank you!       @erickarbe37
Upcoming SlideShare
Loading in...5
×

Navigation in RWD from the RWD Summit

879

Published on

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

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

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×