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.
Ever 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.
- Responsive Web Design by Ethan Marcotte
- Responsive Web Design: What It Is and How To Use It by Kayla Knight