Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

Responsive Web Design
& WordPress

Rona Kilmer * ronakilmer.com * @rkunboxed
What is

Responsive Web Design

and who the heck is Ethan Marcotte?
Regent College
Regent College responsive website shots

Why You Should Care

From Cell Internet Use 2012 by Pew Internet

Responsive vs. Mobile Site

Responsive

Mobile

Basic Components

"HTML is responsive by default; it's only not
responsive if you tell it not to be by giving a
pixel value somewhere"
-Chris Coyier
Fluid Images
Simpson College
Fluid Images
image breaking mobile
Fluid Images
img { max-width: 100%; }
image fixed in mobile
Fluid Video w/Fitvids
video, embed, object, iframe { width: 100%; height: auto; }
responsive video problem
$("#video-container").fitVids();
Media Queries
@media screen and (min-width: 1024px) {
   /* my styles for large displays */
}
Chaining Media Queries - Example 1
/* default mobile first styles */
.alert { display: none; }

/* tablet and small desktop styles */
@media screen and (min-width: 769px) and (max-width: 1024px) {
   .alert { display: block; }
}
Chaining Media Queries - Example 2
/* default mobile first styles */
.alert { display: none; }

@media screen and (min-width: 480px) and (orientation: landscape) {
   .alert { display: block; }
}
Chaining Media Queries - Example 3
/* default mobile first styles */
.alert { display: none; }

@media screen and (min-width: 480px) and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
   .alert { display: block; }
}
Mobile First
/* styles for mobile on up (no media query here) */

@media screen and (min-width: 768px) {
   /* tablets on up */
}

@media screen and (min-width: 1024px) {
   /* large tablets and small desktops on up */
}
Desktop First
/* styles for desktop (no media query here) */

@media only screen and (min-width: 768px) and (max-width: 1023px) {
   /* tablet */
}

@media only screen and (max-width: 767px) {
   /* mobile */
}
Getting started with

Wordpress

Twenty Twelve Theme

Twenty Twelve

_s Theme

Jetpack Mobile Theme

Tips & Tricks

for Building a Responsive Theme

Boilerplates

Twitter Bootstrap

Boilerplates

320 and Up

Boilerplates

HTML5 Boilerplate

Skeleton

Grid Calculators

Grid Frameworks

Viewport Meta

<meta name="viewport" content="width=device-width, initial-scale=1">
Simpson College w/and w/out Viewport Meta
viewport meta comparison

Images

Asset Loading Test - FAIL
<div id="photo">Some Text</div>

#photo {
   background-image: url('picture.jpg');
   height: 100px;
   width: 100px;
}

@media all and (max-width: 480px) {
   #photo {display: none;}
}
Asset Loading Test - PASS
<div id="photo">
   <div>Some Text</div>
</div>

#photo div {
   background-image: url('picture.jpg');
   height: 100px;
   width: 100px;
}

@media all and (max-width: 480px) {
   #photo {display: none;}
}
Asset Loading Test - PASS
<div id="photo">Some Text</div>

@media all and (min-width: 481px) {
   #photo {
      background-image: url('picture.jpg');
      height: 100px;
      width: 100px;
   }
}

@media all and (max-width: 480px) {
   #photo {
      background-image: url('picture-mobile.jpg');
   }
}
Asset Loading Test - FAIL
<div id="photo">
   <img src="picture.jpg" alt="" />
</div>

@media all and (max-width: 480px) {
   #photo {display: none;}
}

Modernizr

Respond.js
Modernizr.load({
   test: Modernizr.mq,
   nope: 'respond.js'
});
iOS Scaling Bug
iphone scaling bug
iOS Scaling Bug
iphone scaling bug
iOS Scaling Bug
iphone scaling bug

Plugins Worth Noting

Test, test, test some more

then test again later.

Xcode iOS Simulator simulator shot
RWD Bookmarklet bookmarklet screencapture
iOS 6 Web Inspector
iOS 6 Web Inspector

Everybody's doing it!

Foodgawker.com
Foodgawker website
CSS-Tricks.com
CSS Tricks website
SmashingMagazine.com
Smashing Magazine website
Foodsense.is
Food Sense website

Inspiration

Credits & Resources

Credits & Resources

Thank You!

ronakilmer.com/wordcamp/