Responsive Design - Mobile Web for Wordpress

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.