XI – A Responsive WordPress Theme

The variety of devices and screen resolutions with which web sites are viewed is getting more and more varied. The rise of smartphones, tablets and ever increasing desktop resolutions has given rise to a new movement in the web design world known as Responsive Web Design.

The need for flexibility

Until recently everybody designed for 960px width screens, recognising the need to make sure things looked right on a 1024px screen. Mobile users were left to zoom, squint or worse. People with big screens do the same some scrolling up and down their vast desktop screen seeing more background than content. For WordPress users one solution, at least for mobile devices, was to use a plugin like WPTouch that would render the site in some app-like fashion, but I always feel it leaves users with an experience that is not consistent with the site as experienced on other devices. For large screen users, 960px is just to narrow. And going forward the variety of target screen sizes and capabilities isn’t going to get any easier.

I’ve noticed some sites adopting to ignore small screens altogether, stretching content to beyond 1200px, but while their dektop users no longer need 1024 support, all the tablet and smarphone users make the whole problem much more complex.

Becoming responsive

xiEver since reading Ethan Marcotte’s article last May, I have taken interest in the whole idea of Responsive Web Design. To think differently about layout and design, in order to create a site that adapts to the capabilities and size of the device being used to view your site.

And so after a few failed attempts and several months of graft and coding, I’m proud to announced my first responsive WordPress theme for public consumption.

It’s called Xi, since all my themes have been named after letters in the Greek alphabet. You can find out more about it here or just head for the demo here. It is based on many of the techniques of responsive web design that have emerged recently. It will scale to fit different devices and uses HTML/CSS3, degrading reasonably gracefully on non-supporting browsers. Go and give it a try

This theme does have a max width of 1340px, which means it gives larger screens better utilisation, though I know we could go bigger (perhaps in the next theme). But of course it scales all the way in between too.

Hopefully I’ll get chance to blog a bit more about Xi’s features and how they were achieved in a future post. For now I’ll leave you to the flexible new world of my first responsive theme, Xi.

Of course Xi does have plenty of other new features thanks to my new LivingOS framework and as always has an eye on church use.

Further Reading

2 thoughts on “XI – A Responsive WordPress Theme

  1. Hi there,

    I like this theme. Maybe I’d purchase it for a community site I belong to.

    I have a question, though, is this theme translation ready? The site I’m talking about is in spanish.

    I’m also looking for responsive layouts and this one is one of the best I’ve seen for wordpress, although there aren’t many responsive layouts for wordpress just yet. So far, all responsive themes I’ve seen are just too plain in colors.

    Good job.

    • Well, almost. It has been designed with translation in mind, using the appropriate wordpress language functions throughout, though we haven’t released the files to translate yet.