“Poorly executed navigation can spell disaster for user experience.”

-Gene Crawford

What is RWD?

How your content strategy plays into RWD & navigation.

Manipulate WordPress for a better responsive nav.

Navigation patterns and examples.

Roadmap

What is Responsive Web Design?

Where can I learn about RWD?1. bradrost.github.com/this-is-responsive2. teamtreehouse.com3. google.com

View great examples at: mediaqueri.es

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?

Retro-fitting an existing websiteto become responsive

can be difficult.

Especially one with a large menu.

“Use mobile as an excuse to revisit your navigation.”

-Brad Frost

Manipulate WordPress

1. Target your navigation through better CSS classes.

2. Use multiple menus if necessary

3. Use custom links for top-level menu items

Better CSS Classes

https://gist.github.com/erickarbe/4192494

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'container' => false, 'walker'=> new Bootstrap_Walker_Nav_Menu, 'menu_class' => 'nav' ) ); ?>

1. Add a “walker” to your wp_nav_menu:

http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js

2. Now use some JS to target your Nav:

Add Your Own Classes

register_nav_menus( array('primary' => __( 'Primary Menu', 'base' ),'mobile' => __( 'Mobile Menu', 'base' )

) );

**Useful when providing a menu in the header & footer**

Register a Second Menu

.primary_menu { display: none; }

.mobile_menu { display: block; }

@media all and (min-width:768px) {.primary_menu { display: block; }.mobile_menu { display: none; }

}

Take Advantage of Custom Links<ul> <li><a href="/home/">Home</a></li> <li class="has-submenu" ><a class="dropdown-toggle" href="#">About</a> <ul class="dropdown-menu"> <li><a href="/about/">Overview</a></li> <li><a href="/overview/">Overview</a></li> <li><a href="/more-about/">More About</a></li> </ul> </li> <li><a href="/contact/">Contact</a></li></ul>

**Use hash tags for top level menu items with sub-nav**

Navigation Patterns

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/

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/

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

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/

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/

Off-Canvas / Page Slide

*Yes, I know this facebook screenshot is not a responsive site - it’s just an example of how this looks.

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

Think “Touch”

• 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

Optimal Sizes for Touch Elements

photo courtesy of Luke Wroblewski | www.lukew.com

http://www.flickr.com/photos/oliviahouse32/3347768206/

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

http://paulirish.com/2012/box-sizing-border-box-ftw/

http://html5please.com/#box-sizing

https://github.com/Schepp/box-sizing-polyfill

http://modernizr.com/ (.no-box-sizing)

Additionally...

Resources

Better WalkerNav: https://gist.github.com/erickarbe/4192494

Drop-down JavaScript: http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js

http://erickar.be/blog/my-experience-with-navigation-in-responsive-designhttp://responsivenavigation.net/

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)

Thank You!Erick Arbé@erickarbe