Navigation in Responsive Design

1. Navigation in Responsive Design by: Erick Arbé @erickarbe Date

2. The Importance of Quality Navigation

3. The Importance of Quality Navigation • Links make the web, the web. So make them good.

4. The Importance of Quality Navigation • Links make the web, the web. So make them good. • Can help deﬁne the user’s experience

5. The Importance of Quality Navigation • Links make the web, the web. So make them good. • Can help deﬁne the user’s experience • It goes hand in hand with your content strategy.

6. “Poorly executed navigation can spell disaster for user experience.” -Gene Crawford

9. “Use mobile as an excuse to revisit your navigation.” -Brad Frost

10. Members Only Menu Public Menu Link 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 layout Upcoming Events --Rees Jones design - Golf event sign up --Going Green compliance - Social Event sign up --Audubon Certification Newsletter --score card Link to handicaps/scoring - Instruction News flashes from staff --teaching staff Course 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 Shop Calendar of events - Dining - Current month - Green Superintendent - Next month Membership - Key dates in future months - Member Owned (non-property) Memberships Picture gallery - Resident - Social - Non-Resident Golf - Associate - Social Contact Us Contact information Directions and Map

11. Think GREEN

15. What’s trending?

17. Considerations

18. “There is no hover state on touch devices.” -Erick Arbé

19. !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>

20. Optimal Sizes for Touch Elements 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

21. Optimal Sizes for Touch Elements • Average human ﬁnger 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

22. Optimal Sizes for Touch Elements • Average human ﬁnger 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

23. Optimal Sizes for Touch Elements • Average human ﬁnger 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

24. Optimal Sizes for Touch Elements • Average human ﬁnger 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

25. Mobile Top left photo courtesy of Luke Wroblewski | www.lukew.com

32. Tablet Top left photo courtesy of Luke Wroblewski | www.lukew.com

35. Desktop

37. Examples

38. 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/

41. Grid / Percentage Based • Easy to touch - buttons are great size • Looks terriﬁc & 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/

44. Footer Nav • Great concept - content ﬁrst • 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/

47. Select Nav • Can be super easy to implement • Easy to retro-ﬁt 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://lukaszﬁszer.github.com/selectnav.js/

51. 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

54. 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

57. 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/

60. Off-Canvas / Page Slide • Facebook style off-canvas menu • Very slick when used with animation • Terriﬁc 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 an example of how this looks.

64. 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

67. 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-ﬂip/ • http://codepen.io/erickarbe/pen/vAupf

71. Additionally

72. 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/

73. Position: fixed

74. 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)

75. Useful Snippets nav { max-height:55em; } .container { max-width: 70em; } http://jsfiddle.net/leaverou/zwvNY/ (Animating with max-height) http://caniuse.com/minmaxwh

76. Useful Snippets $('#menu-toggle').click(function (e) { $('body').toggleClass('active'); e.preventDefault(); });

77. Useful Snippets Adding proper classes to your nav might be tough if using a CMS. Help with WordPress: https://gist.github.com/4192494

78. Resources http://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.com http://lab.maltewassermann.com/viewport-resizer/ http://tinynav.viljamis.com/ http://lukaszﬁszer.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/

79. Thank You! @erickarbe

Navigation in Responsive Design

Recomendados

Recomendados

Más contenido relacionado

Similar a Navigation in Responsive Design

Similar a Navigation in Responsive Design (20)

Último

Último (20)

Navigation in Responsive Design