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