Upload
openchamp
View
112
Download
3
Tags:
Embed Size (px)
DESCRIPTION
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
Citation preview
Date
Navigation in Responsive Designby: Erick Arbé@erickarbe
The Importance of Quality Navigation
The Importance of Quality Navigation
• Links make the web, the web. So make them good.
The Importance of Quality Navigation
• Links make the web, the web. So make them good.
• Can help define the user’s experience
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.
“Poorly executed navigation can spell disaster for user experience.”
-Gene Crawford
“Use mobile as an excuse to revisit your navigation.”
-Brad Frost
Members Only Menu
Link to member data base- update profiles- interests- photo albums- member search- member blogs- vision- staff (email/phone)- bylaws- board of directors
Upcoming Events- Golf event sign up- Social Event sign up
NewsletterLink to handicaps/scoringNews flashes from staffCourse condition
- Tournament results- Tournament tee times- Special member meetings- Merchandise sales- Dining specials- Lost and found
Calendar of events- Current month- Next month- Key dates in future months
Picture gallery- Social
Golf
Public Menu
About Bear Creek- Location- Hilton Head Island- Hilton Head Plantation- Golf- Golf played as it was meant to be
--played year round--no tee times--no tipping
- Course layout--Rees Jones design--Going Green compliance--Audubon Certification --score card
- Instruction--teaching staff--practice areas
- Social Programs- Other- Mission/Vision- History- Staff- Pro Shop- Dining- Green Superintendent
Membership- Member Owned (non-property) Memberships- Resident- Non-Resident- Associate- Social
Contact UsContact information Directions and Map
Think GREEN
What’s trending?
Considerations
“There is no hover state on touch devices.”
-Erick Arbé
!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>
Optimal Sizes for Touch Elements
Resources: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
Optimal Sizes for Touch Elements• Average human finger pad is
10-14mm
Resources: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
Optimal Sizes for Touch 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.aspxhttp://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/Characteristics/Characteristics.html
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
Resources: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
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 size
Resources: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
Mobile
Top left photo courtesy of Luke Wroblewski | www.lukew.com
Mobile
Top left photo courtesy of Luke Wroblewski | www.lukew.com
Mobile
Top left photo courtesy of Luke Wroblewski | www.lukew.com
Mobile
Top left photo courtesy of Luke Wroblewski | www.lukew.com
Mobile
Top left photo courtesy of Luke Wroblewski | www.lukew.com
Mobile
Top left photo courtesy of Luke Wroblewski | www.lukew.com
Mobile
Top left photo courtesy of Luke Wroblewski | www.lukew.com
Top left photo courtesy of Luke Wroblewski | www.lukew.com
Tablet
Top left photo courtesy of Luke Wroblewski | www.lukew.com
Tablet
Top left photo courtesy of Luke Wroblewski | www.lukew.com
Tablet
Desktop
Examples
• 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/
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/
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/
Simple / More Padding
• 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/
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/
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/
Grid / Percentage Based
• 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/
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/
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/
Footer 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/
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/
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/
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/
Select Nav
• 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
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
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
Simple Toggle
• 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
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
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
Multi-Toggle / Accordion
• 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/
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/
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/
Slide Down
• 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/
Off-Canvas / Page Slide
*Yes, I know this facebook screenshot is not a responsive site - it’s just an example of how this looks.
• 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/
Off-Canvas / Page Slide
*Yes, I know this facebook screenshot is not a responsive site - it’s just an example of how this looks.
• 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/
Off-Canvas / Page Slide
*Yes, I know this facebook screenshot is not a responsive site - it’s just an example of how this looks.
• 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/
Off-Canvas / Page Slide
*Yes, I know this facebook screenshot is not a responsive site - it’s just an example of how this looks.
• 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
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
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
No Sub-Nav
• 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
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
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
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
The Page Flip
Additionally
• 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/
Position: fixed
Position: fixed
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)
Useful Snippets
nav {max-height:55em;}
.container { max-width: 70em; }
http://jsfiddle.net/leaverou/zwvNY/ (Animating with max-height)
http://caniuse.com/minmaxwh
Useful Snippets
$('#menu-toggle').click(function (e) {$('body').toggleClass('active');e.preventDefault();
});
Useful Snippets
Adding proper classes to your nav might be tough if using a CMS.
Help with WordPress:https://gist.github.com/4192494
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/
Thank You!@erickarbe