Now With Responsive Styles

/ Geek Stuff /

So September was kind of a big month for the blog. First, I posted 10 book reviews, starting with the most recent book I had read and working backwards. I’m going to try to write a review for every book I read this year, but it obviously gets harder each time, because it’s been longer since I finished the book. If all goes as planned, my review for The Lies of Locke Lamora will be the next post.

The second reason that September was a big month is because I made some pretty cool updates under the hood. What I’m talking about is responsive web design. CSS3 allows us to detect the browser’s width and apply styles that kick in at specified sizes. CSS3 is a new technology that has great support modern browsers and has led to responsive design becoming common technique for creating mobile friendly web sites.

I’m a web designer and developer by trade and we’ve been doing a lot with responsive styles at work and I’ve been eager to apply some of the techniques that I’ve learned to the blog, to make it more usable on small screen devices like phones and tablets.

Really, creating the styles was pretty simple. I simply tweaked the layout of the site at certain points. I kick in the majority of the styles at 950px, which is point when a scrollbar would appear if you reduced your browser width. To start off with, I mostly just reduce whitespace and make the content area a fluid width, rather than a fixed width. Later, I reduced the size of the sidebar and then I turn it off altogether, except for the search, which I placed directly below the header.

But the thing I’m most proud of is the MONSTERS. When I designed this site, I bought the artwork in the header at istockphoto.com, which at the time, worked entirely on a dollars-for-credits system. I bought the awesome moonscape artwork, but still had credits leftover. Eventually, istock notified me that the credits would soon expire so I found an amusing set of monster vectors by the same artist and snatched them up before I lost the credits.

And then I sat on the images because I didn’t have a use for them. That is, until I started thinking about responsive styles. Now, those monsters have finally made their debut. It’s true, depending on your browser size, you may not see them. However, if you browser width reaches 1250px and you are using a recent version of Chrome, Safari, Firefox, Opera, or even IE9, then you should see a monster peaking out of the right side of the browser. There, I’m randomly drawing a monster from a set of twelve and linking it to a random blog post.

Also, if you reduce your browser width, you’ll see the responsive styles kick in. At first, I keep the same header graphics, but then I swap it out for another monster. In fact, I keep swapping every 50px until I just ran out of space. I’m really happy with how it turned out.

If you are too lazy to resize your browser or, sadly, your browser doesn’t support CSS3 media queries, here’s a couple of screen caps of what I’m talking about: