Responsive Web Site Design

Responsive WordPress on an iPhoneViewers might have noticed that this site has changed somewhat of late.

The reason was simple: to make it more simple! But most of all so it can be viewed on small devices such as iPhones and iPads. Because this is where the web is headed.

This is quite a shift away from the style of so many web sites, that are “loaded”, and sadly many don’t get to the point quickly anyway, let alone on a small screen.

I’m quite a fan of WordPress as a web site platform and develop sites for clients on same, and before this I’d migrated my thinking long ago to the use of Cascading Style Sheets [CSS], which just so happened to at least when swiping cross ways on an iPhone, sort of snapped the page into the boundaries of the div containers. But this meant navigation of a page involved a zig zag browsing approach.

And in case you’re wondering WordPress makes extensive use of CSS.

But now there are a few themes about that organise content into one long column on a narrow screen, yet displays 2-3 columns on a desktop browser.

With the help of a new CCS editing app I love called Coda 2, I’ve now got my head around how to produce a site that is “responsive”. Mostly the work is done for me in the theme, and I use Coda and a few other tricks to tweak colours and line widths.

On the left you can see how this site organised itself when displaying on my iPhone.