Responsible Responsiveness

johnbhartley.com/speaking/buff
@johnbhartley
#wcbuf
use arrow keys to navigate between slides

What Are We Doing Here?

A fair question

Learning about Responsive Web Design (RWD) and how it relates to WordPress

So what is Responsive Web Design?

Ethan Marcotte and Responsive Web Design

Simply put: Responsive Web Design is the approach that suggests that the design of a site should respond to the user's behavior and environment based on screen size, platform and orientation. Uses flexible grids, flexible media and a butt load of media queries.

Responsive Web Design Examples

Real World Example

You are the pixels and containers

Source: Some Movie About Space

Some Considerations...

Responsive Themes

On Github: WordPress Bootstrap (320press), Skeleton (simplethemes), Reverie (themefortress), Fett-tastic (me)

Responsive Add-ons (plugins)

Responsive Retrofitting

Getting Started on Your Own

Frameworks?

The Golden Snippet

<meta name="viewport" 
      content="initial-scale=1.0, width=device-width" />

  // Tells the browser not to zoom in or 
  // out and to use the device width as 
  // the viewport width
  

Also helpful, Scott Jehl's respond.js

- Provides support for min/max-width CSS3 Media Queries (for IE 6-8, and more)

Max and Min

/* Two Basic Uses */
@media screen and (min-width: 480px) { 
    /* Styles */
}

@media screen and (max-width: 480px) { 
    /* Styles */
}



Let's try a simple layout

All devices are the exact same size, so our responsive design needs no breakpoint.
No one, ever.

In responsive design, your breakpoints are where your design breaks, not at specific screen sizes.
@StanGrabowski
Don't build media queries for devices, just squish it till it breaks, add a media query, squish it till breaks, repeat.
@chriscoyier

Handling Images


img {
  max-width: 100%;
  height: auto;
  -ms-interpolation-mode: bicubic;
  // obsolete in IE9, but necessary earlier
}


Example

Possible Solutions

Galleries

Elastic Videos

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.video-container iframe,  .video-container object,  
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Navigation should be like a good friend; there when you need them, but cool enough to give you your space
@brad_frost

Wrangling the Nav


<div id="nav">
  <?php wp_nav_menu( array('menu' => 'Main Menu' )); ?>
</div>

//Gives a certain output because that's what WordPress does

<div class="menu-main-menu-container">
  <ul id="menu-main-menu" class="menu">
    <li id="menu-item-11" class="menu-item menu-item-type-post_type 
        menu-item-object-page menu-item-11">
      <a href="http://fett.forknightdev.com/?page_id=5">Item 1</a>
    </li>
    <li id="menu-item-4" class="menu-item menu-item-type-post_type 
        menu-item-object-page menu-item-4">
      <a href="http://fett.forknightdev.com/?page_id=2">Item 2</a>
    </li>
    <li id="menu-item-14" class="menu-item menu-item-type-post_type 
        menu-item-object-page menu-item-14">
      <a href="http://fett.forknightdev.com/?page_id=12">Item 3</a>
    </li>
  </ul>
</div> 


Which looks like this

As always, there's more than one way

Behold!

Ways to handle Mobile Navigation

Sniff
Sniff

wp_is_mobile();

  • Started in WordPress 3.4
  • Media Queries and browser sniffers don't have to fight
  • Not a crutch
  • Test and look at analytics
  • wp-includes/vars.php
  • Extended by Mobble

wp_is_mobile(); function

function wp_is_mobile() {
  static $is_mobile;

  if ( isset($is_mobile) )
    return $is_mobile;

  if ( empty($_SERVER['HTTP_USER_AGENT']) ) {
    $is_mobile = false;
  } elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== false 
    // many mobile devices (all iPhone, iPad, etc.)
    || strpos($_SERVER['HTTP_USER_AGENT'], 'Android') !== false
    || strpos($_SERVER['HTTP_USER_AGENT'], 'Silk/') !== false
    || strpos($_SERVER['HTTP_USER_AGENT'], 'Kindle') !== false
    || strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry') !== false
    || strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mini') !== false ) {
      $is_mobile = true;
  } else {
    $is_mobile = false;
  }

  return $is_mobile;
}

wp_is_mobile(); FTW

<?php wp_is_mobile(); ?>

// themes can use immediately, 
// plugins may want to use if ( function_exists )

<?php if ( wp_is_mobile() ) { 
  <link rel="stylesheet" href="small.css" type="text/css">
} else {
  <link rel="stylesheet" href="big.css" type="text/css">
}?>

<?php if ( wp_is_mobile() ) { 
  // maybe just one of your slider posts
} else {
  // all 100 of your slider posts
}?>

The easiest way to find the best performance is to test

Mobitest

Find me online...

John

Resources and Inspiration