Responsive Web Design (RWD) with WordPress, tools and frameworks to make the effort easy.

1. Going Responsive
with WordPress
@jrcryer
jamescryer.com

2. Responsive Web Design: Definition
A responsive design is composed of three
distinct parts:
• Flexible grids
• Flexible media (images and video)
• Media queries
Making sites device agnostic

4. Flexible Grids
Flexible grids expand and contract to fit the
context in which they are viewed
• Use formula:
target / context = result
• Example
900 / 960 = 0.9375
• Think in pixels percentages

5. Flexible Grids
#sidebar { width: 33.333333333333%; }

6. Flexible Media
Add constraints to prevent images
overflowing their containers
• Technique:
img {
max-width: 100%;
height: auto;
}
• Internet Explorer 6 or below:
img {
width: 100%;
}

7. Flexible Media (cont...)
•
UseTechnique: instead of scaling
of overflow,
.container {
overflow: hidden;
}
img {
max-width: auto;
}
• Also applies to <video />, <embed />
and <object />

8. Media Queries
“A robust mechanism for identifying not
only types of media, but inspection of
physical characteristics of the devices”
• Example:
@media screen and (min-width: 1024px) {
body {
font-size: 100%;
}
}
<link href=”desktop.css” rel=”stylesheet” media=”screen and (min-width:
1024px)” />

9. Media Queries
Available features:
• device-width
• device-height
• width
• height
• orientation
• and more...

10. Media Queries
Setting viewport size
• Example:
<meta name=”viewport” content=”initial-scale=1.0,
width=device-width” />

11. Breakpoints
@media screen and (min-width: 480px)
{
...
}
@media screen and (min-width: 600px)
{
...
}
@media screen and (min-width: 768px)
{
...
}
@media screen and (min-width: 1024px)
{
...
}

12. Side note...
Also consider:
• Icon fonts
• SVG for logos with PNG fallback
• Web fonts

13. Responsive Design in
Wordpress

14. Frameworks
Available frameworks to get started:
• Bones
• Reverie
• Skeleton
Alternatively, roll your own...

15. Flexible Media
Preventing WordPress from adding width
and height:
/** * RESPONSIVE IMAGE FUNCTIONS */ add_filter( 'post_thumbnail_html',
'remove_thumbnail_dimensions', 10 );add_filter( 'image_send_to_editor',
'remove_thumbnail_dimensions', 10 ); function remove_thumbnail_dimensions(
$html ) { return preg_replace( '/(width|height)="d*"s/', "",
$html );}

16. Going it alone...
• Take a mobile first approach
• Use a CSS preprocessor - LESS or SASS
• Start simple

17. Responsive Plugins
• Responsive Video Light
• SlideDeck 2
• Respond.js
• Simple Responsive Images
• Smooth Slider

18. Other tools
• Twitter’s Bootstrap
• ZURB’s Foundation
• IcoMoon
• Fontello
• Modernizr

19. Live Demo
LIVE DEMO

20. Questions?
Examples from today
https://gist.github.com/jrcryer

21. Further info?