Posted on 18 November 2012

Some people have hobbies like woodworking or painting. Apparently, I do web design.
The very first post on this blog is from when it was hosted on Blogger and I outlined how I had hacked an existing theme to look like the minimalist Depo Skinny WordPress theme. Since then I’ve moved onto WordPress and installed that theme, modifying it along the way. It’s in these modifications that I’ve come to learn about html and css, the building blocks of web design. If I want to change a font or make a photo larger, I’ve had to figure out where that particular piece of code is and fix it to my liking. In this way, it’s like tinkering with a car: you may not build it, but the more you start taking it apart and modifying it, the closer you get to understanding the whole process.
This last iteration has been one of my most ambitious yet. In the past, I basically only cared about what my site looked like on a desktop computer running Firefox or Chrome. Safari was usually OK, but Internet Explorer had some bugs and it was not at all optimized for cellphones or tablets. For a while I was running a (still very good!) plug-in called WPTouch that makes sites readable on these smaller devices, but eliminates virtually all your design in the process. This didn’t make me very happy.
So over the last couple of weeks, I’ve learned all about the theory and the code behind responsive web design. Long story short, this makes your website adapt to the screen it’s being viewed on. Everything is measured in relative terms rather than absolutes so it remains proportional as the screen gets bigger and smaller, and certain elements move or disappear as the screen gets smaller to accommodate the most important parts. Doing this was made all the more challenging by my desire to have it work on Internet Explorer, which doesn’t obey normal commands like everyone else (this is why anyone involved in making stuff for the internet hates it, in case you were wondering).
Overall, I was still going for the same thing I’ve been working on from the start: a clean, minimalist design that’s easy to read and navigate. To this end I’m still using Depo Skinny as a basic building block, with the same stylistic modifications I made when I first moved to WordPress in 2010 such as a navbar at the top and the Flickr images at the bottom. I finished what I started this summer and completely eliminated share buttons (if you want to post this to Facebook or share it on Twitter, I’m sure you know how without me cluttering things up), and I got rid of a few sections in the header to be less distracting, sticking everything else under “etc”.
Then came the fun part: making it work everywhere. I won’t go into all the detail of that, but suffice it to say it took a lot of Googling, bookmarking key pages and finally using the awesome resource that is Stack Overflow. I couldn’t possibly link to everyone who helped me get here, but that’s what makes the internet awesome: you have a whole bunch of people writing a whole bunch of things and someone like me can pull something like this off.
I should say that in addition to the aforementioned Depo Skinny, I took a lot of design inspiration from Marco.org and the Svbtle network. It was these two sites that even made me aware there was such a thing as responsive web design:   I noticed that the sites looked slightly different depending on the screen and wanted to figure out how to do that. If there was a measurement I wanted, I probably stole it from their source code, too. And the whole bit where my logo jumps to the center on a tiny screen is a straight-up taken from what happens on Svbtle blogs (it’s also the only thing that doesn’t happen on Internet Explorer, but I’ll live with that). Oh, and I even cleaned up my moose logo a little bit, to make it look somewhat nicer on larger screens.
Anyways, that’s enough about that. I hope you like the look, but more importantly I hope it continues to be a place that a small group of people like to come to read.
Screenshots for posterity:
fullscreen header & footer – everything floats in the middle, with 20% padding on the left and right

Photos resize as the screen gets smaller. Also, as the screen gets smaller the content takes up 80% of the space instead of just 60.

Photos must maintain a size of at least 150px, so they don’t get too tiny on a phone screen.

Speaking of phone screens, by this point the header has moved to the center of the screen and the footer is single column. Also, content now takes up 96% of the screen, with a 2% margin on either side.

Filed under: meta