Slide 1
Slide 1 text
Responsive Design
with WordPress
Joe Casabona
casabona.org
@jcasabona
Slide 2
Slide 2 text
Who Am I?*
2
*Besides a handsome devil
Slide 3
Slide 3 text
3
Slide 4
Slide 4 text
Responsive Web Design: The idea that
your website will automatically adapt to
the device it's being viewed on.
4
Slide 5
Slide 5 text
Why?
5
Slide 6
Slide 6 text
How?
6
❖ EM-Based Breakpoints
❖ Breakpoints based
on Content
❖ Consider
Connection Speeds
Slide 7
Slide 7 text
RESS
7
❖ My Plugin: rwdwp.com/22
❖ Jesse's: rwdwp.com/35
Slide 8
Slide 8 text
WURFL
Database
8
❖ Device Detection
❖ Feature Detection
❖ Open Source
❖ Scientia Mobile
Slide 9
Slide 9 text
wp_is_mobile()
9
Slide 10
Slide 10 text
10
if(ISMOBILE){
//display one way
}else{ //not mobile device
//display different way
}
Slide 11
Slide 11 text
Responsive
Workflow
11
❖ Sketch
❖ Code
❖ Test
❖ Repeat
Slide 12
Slide 12 text
Mobile First!
12
Slide 13
Slide 13 text
I use the web completely differently on
mobile devices.
- No One
13
Slide 14
Slide 14 text
Design in the
Browser
14
Slide 15
Slide 15 text
Expand Out!
15
bradfrostweb.com
Slide 16
Slide 16 text
Make it Work
with WordPress
16
Slide 17
Slide 17 text
Navigation
17
❖ Do Nothing
❖ Hide n' Cry
❖ Jump to
❖ Select Box
❖ Responsive Nav
❖ Off-Canvas
Slide 18
Slide 18 text
18
‘Main',
'container_id' => 'top-menu'));
}else{
echo 'Jump to Nav
a>';
}
?>
Slide 19
Slide 19 text
19
‘Main’)); ?>
Slide 20
Slide 20 text
Responsive
Images
20
Slide 21
Slide 21 text
picturefill.js
21
Slide 22
Slide 22 text
22
![A
giant stone face at The Bayon temple in Angkor
Thom, Cambodia]()
Slide 23
Slide 23 text
Updating Plugin
23
❖ Replace Featured Images
❖ Check for element first,
fallback to picturefill.js
Slide 24
Slide 24 text
24
$(function(){
$(".post
img").removeAttr("width").removeAttr("height");
});
Slide 25
Slide 25 text
Helpful Updates
to Core
25
❖ HTML 5 Elements (figure, figcaption)
❖ add_theme_support( 'html5',
array( 'gallery', 'caption' ) );
❖ Better Media Embeds (consider for
themes)
Slide 26
Slide 26 text
Images Are Hard!
26
Slide 27
Slide 27 text
Questions?
27
Discount Code: RWDWP with you order from
peachpit.com
Slides will be at casabona.org/events