Responsible Responsiveness

johnbhartley.com/speaking/toronto
@johnbhartley
#wcto
use arrow keys to navigate between slides or a flick motion on a tablet

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

Media Query Theory

Real World Example

You are the pixels and containers

Source: Some Movie About Space

Some Considerations...

Responsive Themes

Seriously, just search and you'll find one.

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

Magical equation

x = number of desired columns
m = desired margin between the images in %

(100 - (m(x - 1)) / x) = w

li {
   float: left;
   width: w;
   margin-right: m; 
}​

li:nth-child(xn) {
   margin-right: 0;
}

Compressing Images

Filament Group

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

Some Other Food For Thought

Sniff, Sniff
Bang, Bang

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
    • hasn't been updated since August 2011
  • Issues

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;
}

Let's edit this in wp-includes

NOOOOOOOO!

Every time you edit the core, a kitten is hunted and killed

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
}?>

Devstache.com - extended by Mobble

<div class="one-third column">
  <h3>Powered By:</h3>
    <p><?php
      if(is_ios()) { ?>
        <img src="<?php bloginfo('template_url'); ?>/images/apple-logo.png">
      <?php } elseif(is_android()) { ?>
        <img src="<?php bloginfo('template_url'); ?>/images/android.png">
      <?php } else {
        echo "nothing to see here";
      }?></p>
</div>

The easiest way to find the best performance is to test

Mobitest

Google PageSpeed

Responsive Testing

Responsivator

Responsive Design IS Responsible Design...right?


Kind of.

Responsive design is responsible design, but that’s not specific enough, there’s a missing part of that equation.

Responsive design is only responsible design if the responsive design itself is handled responsibly.

Find me online...

Resources and Inspiration