Navigation in Responsive Design

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