Upload
openchamp
View
790
Download
0
Tags:
Embed Size (px)
Citation preview
1
2
Roadmap
1. RWD can be difficult
2. Content strategy
3. Building your responsive navigation
4. Navigation patterns & examples
3
Responsive Web Design Can Be Difficult
Why?
4
But that’s not so bad.
6
photo credits: couriermail.com.au / wired.com / fuckyeainternetfridge.tumblr.com / andersdx.com7
The Future
Responsive Web Design Can Be Difficult
1.Explaining RWD to clients2.The lack of a static design phase3.Navigation4.Images5.Tables6.Converting old fixed-width sites7.What to serve users of old versions of IE8.Testing time and cost
source: http://www.netmagazine.com/features/top-responsive-web-design-problems-and-how-avoid-them8
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
Content Strategy
Retro-fitting an existing websiteto become responsive
can be difficult.
Especially one with a large menu.
10
11
12
13
CONTENT PEOPLE
Y U NO MAKE SMALLER SITEMAP
14
Content Strategy
Smaller sitemap = easier to build responsive nav
15
“Use mobile as an excuse to revisit your navigation.”
-Brad Frost
16
Building Your Responsive Nav
1. Hover vs. Touch2. Top level menu items3. Two sets of navigation?4. A simple JS function5. Some easy CSS to implement6. Position: fixed7. Mobile first!8. Using your mobile nav as your desktop nav (mind = blown)
17
• 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
Think “Touch”
Optimal Sizes for Touch Elements
photo courtesy of Luke Wroblewski | www.lukew.com
http://www.flickr.com/photos/oliviahouse32/3347768206/
18
Fail
https://github.com/briancherne/jquery-hoverIntent19
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
Two Sets of Navigation
<nav class=“mobile-nav”> <nav class=“desktop-nav”>
Using a CMS? No problem!
21
A Simple JS (jQuery) Click Event
$('#menu-toggle').click(function (e) { $('body').toggleClass('active'); e.preventDefault();});
22
Some Easy CSS
.nav { max-height:0;}.open .nav { max-height:55em;}
http://jsfiddle.net/leaverou/zwvNY/ (Animating with max-height)
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
http://paulirish.com/2012/box-sizing-border-box-ftw/23
Position: fixed;
http://jsfiddle.net/leaverou/zwvNY/ (Animating with max-height) http://paulirish.com/2012/box-sizing-border-box-ftw/
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
Build mobile first!
http://jsfiddle.net/leaverou/zwvNY/ (Animating with max-height) http://paulirish.com/2012/box-sizing-border-box-ftw/
@media all and (min-width:30em;){ }
instead of
@media all and (max-width:768px;){ }
25
Mobile Nav Patterns on Desktop
26 http://squarespace.com
Navigation Patterns & Examples
www.responsivenavigation.net
27
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
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
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
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
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
• 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/
Off-Canvas / Page Slide
33
• 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
34
35
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.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)
WordPress: a better WalkerNav: https://gist.github.com/erickarbe/4192494
Resources
36
Thank you!
@erickarbe
37