Make Your Website Everything-Friendly

Follow along at http://taupecat.github.io/responsify

Tweet it!

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

Introduction

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

Basics

Meta Viewport Tag


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

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 */
}
					

Advanced

Images

<picture> Element


<picture>
  <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.">
</picture>
					

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

Layout

Box-Sizing

Know this, love this:


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

Works in IE8+

Flexbox


.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)

Miscellany

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.

<article>
  <a href="http://service.meltwaternews.com/…">
    <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>

    </div>
  </a>
</article>

Resources

Books

Web

Wrap Up

When shouldn't I use responsive design?

Make responsive design your default.

RP3.io

Thanks!

Now go forth and RESPONSIFY!

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