Responsive WordPress Themes

One of my favourite things about the new WPShout design is that it’s responsive; depending on what size your browser is, the site loads a different sized version of the site.

This is, let’s be honest, really cool. Even just for me, it’s really handy being able to resize the site down into a little

window and still be able to see all of the content when I’m working on something. The good news, too, is that responsive designs are actually really easy to do!

Learning media queries

Media queries are my favourite way to create a responsive design; you’ve just got to append a little bit of CSS to the bottom of your stylesheet and you’ve got yourself a design that fits itself with the size of the browser. Here on WPShout the top three browser sizes are covered in roughly 20 lines of code.

So how does it work? Essentially, you just tell the browser between this size and this size, apply this code. The following shows the basics of media queries: a min width, a max width and an area to make the changes:

@media only screen and (min-width: 960px) and (max-width: 1100px) { 
/* Make your changes here */
}

So what changes do you need to make? Well, any changes you need to make your site comfortably fit at whatever resolution you’ve set. The best way to find out what changes these are is just going through on either’s Chrome’s Inspect Element or Firefox’s Firebug. Your changes are likely to initially come from changing containers and your content width. As your site gets smaller, you’ll need to start changing your sidebar width, paddings, margins and gradually just adding more CSS to handle things like your logo, sliders, comments – the whole lot.

What changes you make, though, depend on where you decide to resize your theme. These are your “breakpoints”.

Setting your “breakpoints”

There’s no set-in-stone answer to where your theme should resize, or what your breakpoints should be — it very much depends on who your readers are, what sized browsers they’re using and whether they’re reading your content on mobile devices. For a site like WPShout, my readers are using massive browsers on massive screens, but they’re also resizing their browsers a lot and using mobile devices to view the site, so I need everything from massive, right down to mobile with lots of sizes inbetween.

For your site, though, you might find that screens tend to be smaller and mobile devices aren’t really in use, in which case just a 960px and 800px site would do the trick. It’s a case of looking at your analytics and seeing what you need.

These are the sizes I’ve used on Shout:

• 1300px and larger — the size that will be seen by most visitors.
• 1100px to 1299px — only minor adjustments here; site’s virtually the same.
• 960px to 1099px — the “classic” size of 960 across.
• 800px to 959px  — this was really just for me so I can have the site open on half a screen.
• 480px to 799px — the first mobile size, for tablets and large screen/res phones.
• Below 479px — the second mobile size, for most mobile devices.

And as with the example above, for each I’ve just set the media queries and added the code I need to make the site show up well, nothing more. I stress though, I got a bit carried away and this is really a bit overkill. A couple of breakpoints – big screens, middle screens and mobile – is really all you need.

Responsive images

The final thing you need in any responsive design are images that resize with the different breakpoints you’ve set. For a site like Shout, with lots of images in posts and a lot of different breakpoints, a solution like Adaptive Images is perfect; it’s just a little script which you install on the root of your site and it magically serves different sized images for the different viewpoints, rather than just showing the largest sized image and squishing the width with CSS.

Chris Coyier has an excellent post which shows the different options available to you when considering which solution to go with – check that out to see what your other options are.

Wrapping up

I must stress that there are other ways of making responsive designs – you can use CSS’ min and max-width in conjunction with percentage widths in order to deliver a responsive design without appending an extra CSS at the bottom; it’s all just in one place. You can also even just serve different visitors different versions of your site — with one for desktop and one for mobile.

In my opinion, though, this is the cleanest and easiest method — and thus it’s the one I use. If you want to see exactly how it’s implemented here on Shout, then just view source and take a look at the stylesheet, right at the bottom. It’s not hard and it’s fun, so there’s not really an excuse not to give it a go.