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

photo credit: www.zurb.com5

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