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
Why You Should Care
- 88% of adults in the U.S. own a cell phone.
- Half of them use their phone to go online.
- 17% do most of their online browsing on their phone, rather than a computer or other device.
Responsive vs. Mobile Site
Responsive
- 1 set of content & code to maintain
- Everyone gets the same content
Mobile
- Can focus user tasks
- Can be lean and fast
Basic Components
- Flexible layout
- Fluid images and media
- Media queries
"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
Fluid Images
Fluid Images
img { max-width: 100%; }
Fluid Video w/Fitvids
video, embed, object, iframe { width: 100%; height: auto; }
$("#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
- basic styles
- fluid layout
- mobile first
- tap menu for mobile
Twenty Twelve
_s Theme
- Minimal styles
- Optional features
- Custom header
- Tap menu for mobile
Jetpack Mobile Theme
- based on Twenty Twelve
- supports custom header and background
- provides option for users to switch to full view
Tips & Tricks
for Building a Responsive Theme
Boilerplates
Twitter Bootstrap
- includes CSS, JS, images, no markup
- responsive 12 column grid (fluid or fixed)
- tons of JS helpers (slideshow carousel, tab functionality, tooltips, etc.)
Boilerplates
320 and Up
- mobile first
- font-based icons
- basic markup
- modernizr
Boilerplates
HTML5 Boilerplate
- mobile first
- modernizr
- normalize.css
Skeleton
- basic markup and CSS only
Grid Frameworks
- 960.gs - fixed width, 12 and 16 column options
- cssgrid.net - fluid w/max width for larger screens
- CF CSS-Grid - fluid/fixed combo with 6 and 4 column options w/nesting
Viewport Meta
<meta name="viewport" content="width=device-width, initial-scale=1">
Simpson College w/and w/out Viewport Meta
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
- feature detection
- touch detection
- conditional loading
Respond.js
Modernizr.load({
test: Modernizr.mq,
nope: 'respond.js'
});
iOS Scaling Bug
iOS Scaling Bug
iOS Scaling Bug
Plugins Worth Noting
- WPtouch Plugin
- Device Theme Switcher
- WordPress Mobile Pack
Test, test, test some more
then test again later.
Xcode iOS Simulator
RWD Bookmarklet
iOS 6 Web Inspector
Everybody's doing it!
Foodgawker.com
CSS-Tricks.com
SmashingMagazine.com
Foodsense.is
Credits & Resources
- Cell Internet Use 2012 Report by Pew Internet
- Chris Coyier - CSS-Tricks.com
- Starter Themes: Twenty Twelve, _S, Jetpack Mobile Theme
- Plugins: WPtouch Plugin, Device Theme Switcher, WordPress Mobile Pack
- Boilerplates: Twitter Bootstrap, 320 and Up, HTML5 Boilerplate, Skeleton
- Grid Calculators: Gridulator.com, Fluid Grids
- Grid Frameworks: 960.gs, CSSgrid.net, CF CSS-Grid
- Lifesavers: Fitvids.js, Modernizr, Respond.js, iOS Scaling Bug Fix
- Testing Tools: Xcode iOS Simulator, RWD Bookmarklet
- Clickable phone numbers
Thank You!
ronakilmer.com/wordcamp/