Wordpress navigation in responsive design

by: Erick Arbé
@erickarbe

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

What you might learn today


  • Responsive Web Design
  •  Content strategy affects your navigation
  •  Tips and Tricks for WordPress Menus
  •  Navigation patterns and examples
  •  CSS! Javascript! & More!

Responsive WEb Design


Media Queries


Flexible Images


Fluid Grids

CSS3 Media Queries:

@media all and (min-width:480px){/* This would apply to screens bigger than 480px wide */}    

Flexible Images:

img {  max-width: 100%;}    

Fluid Grids

Website Navigation

  • It's important!
  • Drives user interaction
  • Can make or break your site

Foodnetwork.com


Titleist.com


4imprint.com


content strategy

When Retro-Fitting a Site


"Use mobile as an excuse to revisit your navigation."


When building a new site


  • Think mobile first, then build out
  • The smaller your website - the easier the navigation
  • Content vs. Context - does  "mobile context" exist?

Manipulating Wordpress Navigation

Target your Navigation 

through better CSS Classes


use the Walker Class


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

http://codex.wordpress.org/Class_Reference/Walker

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

Use Custom Classes


Register a second menu


register_nav_menus(   array(
    'large-screen' => __( 'Large Screen Menu', 'baseline' ),
    'small-screen' => __( 'Small Screen Menu', 'baseline' )
  ) ); 


Custom Links



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

Reference the Codex


http://codex.wordpress.org/Function_Reference/wp_nav_menu

Examples of 

Responsive Navigation


let's view some live demos...

which can also be found at:
http://responsivenavigation.net

Additionally...

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

Box Sizing


* { 
  -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

Thanks!


@erickarbe

http://erickar.be