The phrase "Responsive Web Design" isn't even two years old, but it's hard to read web design articles these days without hearing it mentioned.
What is it and how does it impact WordPress? Responsive design means that your theme is flexible enough to look good on any device. There is no need to create a separate theme or even a separate subdomain or site. One theme can look good on a large desktop, your tablet and your mobile phone.
In this blog post we'll show you a selection of 10 great responsive WordPress themes to wet your appetite.
To really test these themes, you'll need to view them using several different browser sizes. Try one of these two websites for easy testing:
Responsive Twenty Ten
Responsive Twenty Ten is the default WordPress theme with an added responsive twist. It is a child theme of the default Twenty Twelve theme with lots of great features like flexible images. Click here to see a demo and click here to download.
Ari is a minimalistic, flexible three-column blog theme. The theme uses CSS3 media queries for its responsive layout and is therefore optimized for tablet PCs and smart phones. The theme switches to a two-column layout when viewed on a horizontal iPad screen, and to a one-column layout on iPhones. You can also choose a dark color scheme. Click here to see a demo and click here to download.
Yoko is a modern and flexible WordPress theme. With the responsive layout based on CSS3 media queries, the theme adjusts to different screen sizes. The design is optimized for big desktop screens, tablets and small smartphone screens. To make your blog more individual, you can use the new post formats (like gallery, aside or quote), choose your own logo and header image, customize the background and link color. Click here to see a demo and click here to download.
The Constellation theme is another one that acts as a starting point. It gives you the flexibility to provide bespoke styles for different devices by using media queries for several devices / screen resolutions, totally up-to-date HTML5 code and a flexible grid system on top of all the other goodness bundled in to the HTML5 Boilerplate. Click here to see a demo and click here to download.
320 and up
The 320 and up project page explains it like this “Inspired by Using Media Queries in the Real World by Peter Gasston, ‘320 and Up’ is a device agnostic, one web boilerplate.” 320 and up was developed by Andy Clarke, and is a great starting point for building websites that utilize the latest technologies in modern web browsers. It can be used as is, or as an extension of the HTML5 Boilerplate. Recently updated to include the Thematics default them. Click here to see a demo and click here to download.
All of our tutorials are published under the Creative Commons Attribution-NonCommercial license. This means: