A Responsive Twenty Ten WordPress Theme

UPDATE: Although the following still exists and is available I have now released a WordPress plugin which gives the same output as the child theme but with the added benefit that it is hosted on the WordPress.org repository. The plugin can be downloaded here.

After reading about Jon Hicks implementation of media queries on his site to make it more responsive to user’s browsing context and the release of the (highly recommended) latest WordPress build I thought it was time to get my feet wet with Responsive site design.

After toying with the idea of implementing this on one of my client sites I thought “Hey! hold on I’m using WordPress 3.0 default theme on my blog… why not extend this?”. And so that’s exactly what I’ve done. I’ve created a child theme for TwentyTen which not only makes it fluid (up to 940px) but also makes it more responsive at smaller sizes. As well as these I’ve added some extra CSS to make it handle iphone and android browsers too thanks to some interesting articles by The CSS Ninja and riklaunim

The result of this the current 0.1 version of the Responsive Twenty Ten WordPress theme. It should be noted that this is a current work in progress which is one of the reasons that I’ve not published it to the WordPress.org themes directory just yet. There are a few known issues still too;

  • IE fluidity is not implemented – seemed to cause issue with the CSS introduced to pick up mobile resolutions (portrait and landscape).
  • Mobile (read Android and iPhone) have some issues dealing with the orientation. Still looking into this. Update – fixed 😉
  • Requires use of some JS for IE (though I’ve disabled this at the moment.]
  • Not got round to validating the CSS yet (naughty naughty, yes I know). Update – fixed 😉

The theme is essentially a fluid version of the default Twenty Ten theme with a fixed maximum width. The extra “responsive” magic comes in when the browser viewport width drops below 661px. What then happens is that the primary and secondary sidebars drop below the main content and appear just above the footer. Some tiny extra rules come into play for iphone and android browsers too to make the page layout flow better.

By all means download the theme in it’s alpha state and let me know your views. Of course you can just have a play with this site as I’m using it at present too.