Date Navigation in Responsive Design by: Erick Arbé @erickarbe
Jan 28, 2015
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