Make Your Website Everything-Friendly

Follow along at

Tweet it!

I'm learning how and why I should responsify my website at #wcmia!


Who Started It?

Ethan Marcotte in A List Apart (2010)

Why Does It Exist?

  • Reaction to mobile vs. desktop sites
  • Lines are blurred by a multitude of devices
  • Increasingly, all around the world, a mobile device is a person's primary means of accessing the Internet

What Is It?

  • Fluid layouts
  • Flexible images and media
  • CSS3 media queries


Meta Viewport Tag

<!DOCTYPE html>
  <meta charset="utf-8">
  <title>RESPONSIFY All the Things!
  <meta name="viewport" content="width=device-width, initial-scale=1">

Fluid Grid

Target / Context = Result

CSS3 Media Queries

/* Start with global declarations for all */

@media only all and (min-width: 64em) {
	/* Then stuff for larger viewports goes here */



<picture> Element

  <source srcset="high-res.jpg" media="(min-width: 1000px)">
  <source srcset="medium-res.jpg" media="(min-width: 400px)">
  <source srcset="low-res.jpg">
  <img srcset="low-res.jpg" alt="Our marvelous image.">

Responsive JPEGs

  • Save as "progressive"
  • High compression, 2.2x size

Warning for Responsive Images in WordPress

  • WordPress uses "width" and "height" attributes
  • Use "width" and "max-width" CSS properties to override
  • Always set "height: auto;" or your images will be distorted



Know this, love this:

*, *:before, *:after {
  box-sizing: border-box;

Works in IE8+


.container {
  display: flex;
  • Several older implementations exist in the wild
  • IE10+ support (but with older syntax)

Centering Absolutely Positioned Elements

Problem: With everything so fluid in RWD, it's often impossible to know the dimensions of a given element.

Centering Absolutely Positioned Elements

Solution: CSS 2D Transforms

(all the HTs to @joshbroton)


CSS Preprocessors

Better Units for Responsive Design

  • vw, vh, vmin, vmax
    Relative to the viewport
  • rem
    root ems

HTML5 Form Input Types

  • url
  • email
  • number

<a> Tags

<a> tags can now contain other elements.
Useful for creating large hit targets.

  <a href="…">
    <div class="meta-date">Apr 23 2014</div>

    <div class="content">
      <h1 class="entry-title">Washington's big housing problem: Not enough sellers</h1>

      <p>…sell seven years or more after they were bought. A report from Long & Foster Real Estate…</p>





Wrap Up

When shouldn't I use responsive design?

Make responsive design your default.


Now go forth and RESPONSIFY!

HT: @beep, @brad_frost, @lukew,
@tkadlec, @joshbroton, @kurtroberts