Responsible Responsiveness
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


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.
Don't build media queries for devices, just squish it till it breaks, add a media query, squish it till breaks, repeat.

Handling Images

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


Possible Solutions


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

Wrangling the Nav

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

//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="">Item 1</a>
    <li id="menu-item-4" class="menu-item menu-item-type-post_type 
        menu-item-object-page menu-item-4">
      <a href="">Item 2</a>
    <li id="menu-item-14" class="menu-item menu-item-type-post_type 
        menu-item-object-page menu-item-14">
      <a href="">Item 3</a>

Which looks like this

As always
there's more than one way


Ways to handle Mobile Navigation

Some Other Food For Thought

Sniff, Sniff
Bang, Bang


  • 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


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
}?> - extended by Mobble

<div class="one-third column">
  <h3>Powered By:</h3>
      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";

The easiest way to find the best performance is to test


Google PageSpeed

Responsive Testing


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