Navigation in Responsive Design

2,244 views

Published on

This was from my presentation at CSS Dev Conf in Honolulu, HI on December 5th, 2012. This presentation covered the aspects of user experience in relation to responsive websites and how better navigation directly attributes to a better user experience. Examples of navigation patterns were presented and I also built a website to accompany this presentation: www.responsivenavigation.net

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,244
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
34
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Navigation in Responsive Design

  1. 1. Navigation in Responsive Designby: Erick Arbé@erickarbeDate
  2. 2. The Importance of Quality Navigation
  3. 3. The Importance of Quality Navigation• Links make the web, the web. So make them good.
  4. 4. The Importance of Quality Navigation• Links make the web, the web. So make them good.• Can help define the user’s experience
  5. 5. The Importance of Quality Navigation• Links make the web, the web. So make them good.• Can help define the user’s experience• It goes hand in hand with your content strategy.
  6. 6. “Poorly executed navigation canspell disaster for user experience.” -Gene Crawford
  7. 7. “Use mobile as an excuseto revisit your navigation.” -Brad Frost
  8. 8. Members Only Menu Public MenuLink to member data base About Bear Creek - update profiles - Location - interests - Hilton Head Island - photo albums - Hilton Head Plantation - member search - Golf - member blogs - Golf played as it was meant to be - vision --played year round - staff (email/phone) --no tee times - bylaws --no tipping - board of directors - Course layoutUpcoming Events --Rees Jones design - Golf event sign up --Going Green compliance - Social Event sign up --Audubon CertificationNewsletter --score cardLink to handicaps/scoring - InstructionNews flashes from staff --teaching staffCourse condition --practice areas - Tournament results - Social Programs - Tournament tee times - Other - Special member meetings - Mission/Vision - Merchandise sales - History - Dining specials - Staff - Lost and found - Pro ShopCalendar of events - Dining - Current month - Green Superintendent - Next month Membership - Key dates in future months - Member Owned (non-property) MembershipsPicture gallery - Resident - Social - Non-ResidentGolf - Associate - Social Contact Us Contact information Directions and Map
  9. 9. Think GREEN
  10. 10. What’strending?
  11. 11. Considerations
  12. 12. “There is no hover state on touch devices.” -Erick Arbé
  13. 13. !important<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>
  14. 14. Optimal Sizes forTouch ElementsResources:http://msdn.microsoft.com/en-us/library/hh202869%28v=vs.92%29.aspxhttp://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/Characteristics/Characteristics.html
  15. 15. Optimal Sizes forTouch Elements• Average human finger pad is 10-14mm Resources: http://msdn.microsoft.com/en-us/library/hh202869%28v=vs. 92%29.aspx http://developer.apple.com/library/ios/#documentation/ userexperience/conceptual/mobilehig/Characteristics/ Characteristics.html
  16. 16. Optimal Sizes forTouch Elements• Average human finger pad is 10-14mm• Apple suggests a 44x44 points (basically, 44px) touch target size (11.6mm) Resources: http://msdn.microsoft.com/en-us/library/hh202869%28v=vs. 92%29.aspx http://developer.apple.com/library/ios/#documentation/ userexperience/conceptual/mobilehig/Characteristics/ Characteristics.html
  17. 17. Optimal Sizes forTouch 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 Resources: http://msdn.microsoft.com/en-us/library/hh202869%28v=vs. 92%29.aspx http://developer.apple.com/library/ios/#documentation/ userexperience/conceptual/mobilehig/Characteristics/ Characteristics.html
  18. 18. Optimal Sizes forTouch 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 size Resources: http://msdn.microsoft.com/en-us/library/hh202869%28v=vs. 92%29.aspx http://developer.apple.com/library/ios/#documentation/ userexperience/conceptual/mobilehig/Characteristics/ Characteristics.html
  19. 19. MobileTop left photo courtesy of Luke Wroblewski | www.lukew.com
  20. 20. MobileTop left photo courtesy of Luke Wroblewski | www.lukew.com
  21. 21. MobileTop left photo courtesy of Luke Wroblewski | www.lukew.com
  22. 22. MobileTop left photo courtesy of Luke Wroblewski | www.lukew.com
  23. 23. MobileTop left photo courtesy of Luke Wroblewski | www.lukew.com
  24. 24. MobileTop left photo courtesy of Luke Wroblewski | www.lukew.com
  25. 25. MobileTop left photo courtesy of Luke Wroblewski | www.lukew.com
  26. 26. TabletTop left photo courtesy of Luke Wroblewski | www.lukew.com
  27. 27. TabletTop left photo courtesy of Luke Wroblewski | www.lukew.com
  28. 28. TabletTop left photo courtesy of Luke Wroblewski | www.lukew.com
  29. 29. Desktop
  30. 30. Examples
  31. 31. Simple / More 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/
  32. 32. Simple / More 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/
  33. 33. Simple / More 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/
  34. 34. 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/
  35. 35. 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/
  36. 36. 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/
  37. 37. 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/
  38. 38. 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/
  39. 39. 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/
  40. 40. 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/
  41. 41. 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/
  42. 42. 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/
  43. 43. 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/
  44. 44. Simple Toggle• Just one button toggles the menu open• Provides great UX - comfortable experience• Drawbacks:• Usually requires JS• Doesn’t work well with large menus (unless you hide the sub-nav)• Links:• http://www.zurb.com/• http://www.starbucks.com
  45. 45. Simple Toggle• Just one button toggles the menu open• Provides great UX - comfortable experience• Drawbacks:• Usually requires JS• Doesn’t work well with large menus (unless you hide the sub-nav)• Links:• http://www.zurb.com/• http://www.starbucks.com
  46. 46. Simple Toggle• Just one button toggles the menu open• Provides great UX - comfortable experience• Drawbacks:• Usually requires JS• Doesn’t work well with large menus (unless you hide the sub-nav)• Links:• http://www.zurb.com/• http://www.starbucks.com
  47. 47. Multi-Toggle / Accordion• Accordion style menu• Great solution for large menus with sub-nav• Provides good user experience• Drawbacks:• Usually requires JS (but doesn’t need it)• Can push page content way down• Links:• http://www.microsoft.com/en-us/default.aspx
  48. 48. Multi-Toggle / Accordion• Accordion style menu• Great solution for large menus with sub-nav• Provides good user experience• Drawbacks:• Usually requires JS (but doesn’t need it)• Can push page content way down• Links:• http://www.microsoft.com/en-us/default.aspx
  49. 49. Multi-Toggle / Accordion• Accordion style menu• Great solution for large menus with sub-nav• Provides good user experience• Drawbacks:• Usually requires JS (but doesn’t need it)• Can push page content way down• Links:• http://www.microsoft.com/en-us/default.aspx
  50. 50. Slide Down• Similar to Multi-Toggle, but is positioned at very top of content• Provides nice user experience• Drawbacks:• Usually requires JS (but doesn’t need it)• Can push page content too far down if you have a large menu• Links:• http://www.dorigati.it/en/
  51. 51. Slide Down• Similar to Multi-Toggle, but is positioned at very top of content• Provides nice user experience• Drawbacks:• Usually requires JS (but doesn’t need it)• Can push page content too far down if you have a large menu• Links:• http://www.dorigati.it/en/
  52. 52. Slide Down• Similar to Multi-Toggle, but is positioned at very top of content• Provides nice user experience• Drawbacks:• Usually requires JS (but doesn’t need it)• Can push page content too far down if you have a large menu• Links:• http://www.dorigati.it/en/
  53. 53. 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/• http://srobbin.com/jquery-plugins/pageslide/*Yes, I know this facebook screenshot is not a responsive site - it’s just anexample of how this looks.
  54. 54. 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/• http://srobbin.com/jquery-plugins/pageslide/*Yes, I know this facebook screenshot is not a responsive site - it’s just anexample of how this looks.
  55. 55. 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/• http://srobbin.com/jquery-plugins/pageslide/*Yes, I know this facebook screenshot is not a responsive site - it’s just anexample of how this looks.
  56. 56. 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/• http://srobbin.com/jquery-plugins/pageslide/*Yes, I know this facebook screenshot is not a responsive site - it’s just anexample of how this looks.
  57. 57. 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.com
  58. 58. 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.com
  59. 59. 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.com
  60. 60. The Page Flip• Experimental right now• A fun solution that provides room for style• Drawbacks:• Requires CSS3 Animation support• Not great for large menus• Links:• http://responsivenavigation.net/examples/the-flip/• http://codepen.io/erickarbe/pen/vAupf
  61. 61. The Page Flip• Experimental right now• A fun solution that provides room for style• Drawbacks:• Requires CSS3 Animation support• Not great for large menus• Links:• http://responsivenavigation.net/examples/the-flip/• http://codepen.io/erickarbe/pen/vAupf
  62. 62. The Page Flip• Experimental right now• A fun solution that provides room for style• Drawbacks:• Requires CSS3 Animation support• Not great for large menus• Links:• http://responsivenavigation.net/examples/the-flip/• http://codepen.io/erickarbe/pen/vAupf
  63. 63. The Page Flip• Experimental right now• A fun solution that provides room for style• Drawbacks:• Requires CSS3 Animation support• Not great for large menus• Links:• http://responsivenavigation.net/examples/the-flip/• http://codepen.io/erickarbe/pen/vAupf
  64. 64. Additionally
  65. 65. Position: fixed• 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.• I’m not a huge fan of using position: fixed in RWD.• Good for applications, not websites (whereas websites are focused on content - applications focused on flow and action).• http://remysharp.com/2012/05/24/issues-with-position-fixed- scrolling-on-ios/
  66. 66. Position: fixed
  67. 67. Useful Snippets * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } http://paulirish.com/2012/box-sizing-border-box-ftw/ http://html5please.com/#box-sizing https://github.com/Schepp/box-sizing-polyfill http://modernizr.com/ (.no-box-sizing)
  68. 68. Useful Snippets nav { max-height:55em; } .container { max-width: 70em; } http://jsfiddle.net/leaverou/zwvNY/ (Animating with max-height) http://caniuse.com/minmaxwh
  69. 69. Useful Snippets $(#menu-toggle).click(function (e) { $(body).toggleClass(active); e.preventDefault(); });
  70. 70. Useful Snippets Adding proper classes to your nav might be tough if using a CMS. Help with WordPress: https://gist.github.com/4192494
  71. 71. Resourceshttp://responsivenavigation.net/http://bradfrostweb.com/blog/web/responsive-nav-patterns/http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/http://mediaqueri.es/http://www.responsinator.comhttp://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)Something Fun:http://inspectelement.com/tutorials/pull-down-for-navigation-a-responsive-solution/
  72. 72. Thank You! @erickarbe

×