On the weekend of July 21st-22nd, I attended WordCamp Sydney, a gathering of over 200 likeminded people to discuss all things WordPress. This series of posts is an attempt to provide  a brief summary of some of what I learned there. The slide sets for all the presentations are available on Slideshare.

“Release control and embrace flexibility.”

With the rise of mobile devices, responsive design – which allows sites to be viewed and used at a range of different screen sizes – has become increasingly important.

Joe started out with some interesting statistics:

  • By 2014, it is predicted that there will be more access to digital services from mobile devices than from PCs.
  • Back in 2011, mobile devices already overtook PCs in the number of units sold.

Rather than just focusing on mobile web, Jordan stressed that we are in the age of the flexible web – not just mobile and smaller, but a huge range of different devices and sizes, such as:

  • PCs
  • Mobile phones
  • Tablets,
  • Televisions, fridges & cars
  • ??? Whatever else we haven’t thought of yet

The key to responsive design is to release control and embrace flexibility.

The idea is to have one website that works appropriately across a range of devices. It doesn’t have to look the same, but it is usable and it works.

The three foundations of responsive design are:

  • Flexible Grid
  • Flexible Images
  • Media Queries

Flexible Grid

Use percentages rather than fixed width for your page elements.

For my geekier readers, Jordan gave this formula and an example of fixed vs fluid grid css:

target (current div) / context (parent div) = result (width as %)

So this fixed grid example…

#container {width: 1000px;}
#main {width: 750px;}
#sidebar {width: 250px;}

…becomes this fluid grid example:

#container {max-width: 1400px;}
#main {width: 75%;} // 750px/1000px
#sidebar {width: 25%;} // 250px/1000px

(OK, it was pointed out during the session that the figures on his slide didn’t quite add up, so I’ve taken the liberty of changing them so they do. Any error in the above figures is mine, not Jordan’s.)

Flexible Images

Rather than a set size of image, give them a flexible size. Again, for the geeks:

img, object,embed, video {max-width: 100%;}

The challenge is how to deal with large screens, as a large image will take too long to load on a mobile device, but small images will lose quality if stretched out on a larger screen. The plan is to have multiple source images, default to the smaller image, and pull in the larger image if the screen is larger. (We are not there yet, but that is the plan!)

Media Queries

Use media queries to pull in different styles depending on screen size.

@media screen and (min-width: 960px)
styles for this size screen go here

Responsive WordPress Themes

A few recommended responsive themes:

 Building a Responsive Theme

  • Sketch out and create mockups for layouts at a range of different sizes. Your mockups need to address the different breakpoints and widths.
  • Think mobile first! This is the simplest layout with fewer images, less styles. Then add progressive enhancement for larger screen sizes.
  • Media query breakpoints – When deciding at what screen size different styles should kick in, base that decision on your design. Rather than setting specific screen sizes, look at the point where your design breaks, and set that as the break point.
  • Widgetised areas – These often hold important information, but on mobile they usually end up at the bottom, so you need to put some thought into how to handle these.

Responsive WordPress Plugins

WP Fluid Images


Respond.js – (Provides a fast and lightweight script to enable responsive web designs in browsers that don’t support CSS3 Media Queries.)

Handy Resources

A List Apart Responsive Web Design article

Smashing Magazine Mobile First WordPress Themes article


Responsive Web Design – Ethan Marcotte

Mobile First – Luke Wroblewski

You can find the slides from Jordan’s presentation on Slideshare.

See also my other WordCamp Sydney notes.