1. 1

2. 2

3. Roadmap
1. RWD can be difficult
2. Content strategy
3. Building your responsive navigation
4. Navigation patterns & examples
3

4. Responsive Web Design
Can Be Difficult
Why?
4

5. 5 photo credit: www.zurb.com

6. But that’s not so bad.
6

7. The Future
7 photo credits: couriermail.com.au / wired.com / fuckyeainternetfridge.tumblr.com / andersdx.com

8. Responsive Web Design
Can Be Difficult
1.Explaining RWD to clients
2.The lack of a static design phase
3.Navigation
4.Images
5.Tables
6.Converting old fixed-width sites
7.What to serve users of old versions of IE
8.Testing time and cost
8 source: http://www.netmagazine.com/features/top-responsive-web-design-problems-and-how-avoid-them

9. Content Strategy
1. What do I want my users to see on mobile?
2. Should I show a “lite” version of my site?
3. But aren’t users within a different context when
viewing my site on their phone?
9

10. Content Strategy
Retro-fitting an existing website
to become responsive
can be difficult.
Especially one with a large menu.
10

11. 11

12. 12

13. 13

14. CONTENT PEOPLE
Y U NO MAKE SMALLER SITEMAP
14

15. Content Strategy
Smaller sitemap = easier to build responsive nav
15

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

17. Building Your Responsive Nav
1. Hover vs. Touch
2. Top level menu items
3. Two sets of navigation?
4. A simple JS function
5. Some easy CSS to implement
6. Position: fixed
7. Mobile first!
8. Using your mobile nav as your desktop nav (mind = blown)
17

18. http://www.flickr.com/photos/oliviahouse32/3347768206/
Think “Touch”
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
18 photo courtesy of Luke Wroblewski | www.lukew.com

19. Fail
19 https://github.com/briancherne/jquery-hoverIntent

20. Building Your Responsive Nav
<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

21. Two Sets of Navigation
<nav class=“mobile-nav”> <nav class=“desktop-nav”>
Using a CMS? No problem!
21

22. A Simple JS (jQuery) Click Event
$('#menu-toggle').click(function (e) {
$('body').toggleClass('active');
e.preventDefault();
});
22

23. Some Easy CSS
.nav {
* {
max-height:0;
-moz-box-sizing: border-box;
}
-webkit-box-sizing: border-box;
.open .nav {
box-sizing: border-box;
max-height:55em;
}
}
23 http://jsfiddle.net/leaverou/zwvNY/ (Animating with max-height) http://paulirish.com/2012/box-sizing-border-box-ftw/

24. Position: fixed;
Should you use it?
Desktop: OK // Mobile: No
• 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.
24 http://jsfiddle.net/leaverou/zwvNY/ (Animating with max-height) http://paulirish.com/2012/box-sizing-border-box-ftw/

25. Build mobile first!
@media all and (min-width:30em;){ }
instead of
@media all and (max-width:768px;){ }
25 http://jsfiddle.net/leaverou/zwvNY/ (Animating with max-height) http://paulirish.com/2012/box-sizing-border-box-ftw/

26. Mobile Nav Patterns on Desktop
26 http://squarespace.com

27. Navigation Patterns & Examples
www.responsivenavigation.net
27

28. Just Add 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/
28

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

30. Multi-Toggle / Accordion
• Accordion style menu
• Great solution for large menus
• Provides good user experience
• Drawbacks:
• Usually requires JS (doesn’t need it)
• Can push page content way down
• Links:
• http://www.microsoft.com/en-us/default.aspx
30

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

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

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

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

35. 35

36. Resources
http://responsivenavigation.net/
http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/
http://erickar.be/blog/my-experience-with-navigation-in-responsive-design
Drop-down JavaScript: http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js
http://mediaqueri.es/
http://www.responsinator.com
http://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)
WordPress: a better WalkerNav: https://gist.github.com/erickarbe/4192494
36

37. Thank you!
@erickarbe
37