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
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 define the user’s experience
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.
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
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 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
22. 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.aspx
http://developer.apple.com/library/ios/#documentation/
userexperience/conceptual/mobilehig/Characteristics/
Characteristics.html
23. 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.aspx
http://developer.apple.com/library/ios/#documentation/
userexperience/conceptual/mobilehig/Characteristics/
Characteristics.html
24. 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.aspx
http://developer.apple.com/library/ios/#documentation/
userexperience/conceptual/mobilehig/Characteristics/
Characteristics.html
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/
39. 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/
40. 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 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/
42. 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/
43. 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/
44. 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/
45. 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/
46. 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/
47. 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/
48. 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/
49. 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/
50. 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/
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
52. 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
53. 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
55. 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
56. 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/
58. 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/
59. 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
• 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 an
example of how this looks.
61. Off-Canvas / Page
Slide
• 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 an
example of how this looks.
62. Off-Canvas / Page
Slide
• 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 an
example of how this looks.
63. Off-Canvas / Page
Slide
• 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 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
65. 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
66. 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-flip/
• http://codepen.io/erickarbe/pen/vAupf
68. 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
69. 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
70. 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
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/