Going Responsivewith WordPress

@jrcryerjamescryer.com

Responsive Web Design: Definition

•Flexible grids

•Flexible media (images and video)

•Media queries

A responsive design is composed of three distinct parts:

Making sites device agnostic

Flexible Grids

•Use formula:

•Example

•Think in pixels percentages

Flexible grids expand and contract to fit the context in which they are viewed

target / context = result

900 / 960 = 0.9375

Flexible Grids

#sidebar { width: 33.333333333333%; }

Flexible Media

•Technique:

•Internet Explorer 6 or below:

Add constraints to prevent images overflowing their containers

img { max-width: 100%; height: auto;}

img { width: 100%;}

Flexible Media (cont...)

•Technique:

•Also applies to <video />, <embed /> and <object />

Use of overflow, instead of scaling

.container { overflow: hidden;}

img { max-width: auto;}

Media Queries

•Example:

“A robust mechanism for identifying not only types of media, but inspection of physical characteristics of the devices”

@media screen and (min-width: 1024px) { body { font-size: 100%; }}

<link href=”desktop.css” rel=”stylesheet” media=”screen and (min-width: 1024px)” />

Media Queries

• device-width

• device-height

• width

• height

• orientation

• and more...

Available features:

Media Queries

•Example:

Setting viewport size

<meta name=”viewport” content=”initial-scale=1.0, width=device-width” />

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

Side note...

•Icon fonts

•SVG for logos with PNG fallback

•Web fonts

Also consider:

Responsive Design in Wordpress

Frameworks

•Bones

•Reverie

•Skeleton

Available frameworks to get started:

Alternatively, roll your own...

Flexible Media

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

Preventing WordPress from adding width and height:

Going it alone...

•Take a mobile first approach

•Use a CSS preprocessor - LESS or SASS

•Start simple

Responsive Plugins

•Responsive Video Light

•SlideDeck 2

•Respond.js

•Simple Responsive Images

•Smooth Slider

Other tools

•Twitter’s Bootstrap

•ZURB’s Foundation

•IcoMoon

•Fontello

•Modernizr

Live Demo

LIVE DEMO

Questions?

Examples from today

https://gist.github.com/jrcryer

Further info?