Summer Project: Responsive Web Design

I spent more time than I’d like to admit this summer redesigning my WordPress website. The new theme emphasizes thumbnails, which are very easy to create on an iPad or handheld and upload via the WordPress iOS app. Most important for me, though, is the fact that this new theme is responsive — that is, it arranges the content in a manner that is useful for very narrow screens through very wide screens, keeping the most important information visible, without forcing the user to scroll left or right, and without leaving oceans of unused space on the sides of a narrow screen.

My previous blog design, using the Atahualpa theme.

My previous site used the Atahualpa theme, which was very powerful, but  added lots of overhead to my server.

As you can see from the screenshot, in the Atahualpa version, the first post took up most of the room. While the first post ought to be prominent, I didn’t like how quickly each new post would knock the last one “below the fold.”

For a while, I maintained a separate theme optimized for iPad, and yet another theme optimized for handhelds. But it became tedious maintaining three different themes. I purchased a good handheld theme, thinking that it would save me time, but I spent almost as much time customizing the CSS on that purchased theme as I would have if I had constructed the theme from scratch.

I also traded my iPad 3 in for an iPad mini, which means that I had yet another size of screen to design for. I decided that I would instead choose a responsive design — one with scalable elements that stretches to fit any screen size.

For the past few months, I have been adding a small square thumbnail image to each post; even though the thumbnail was not visible in the home page of my old theme, it did show up elsewhere on my site. But I wanted to feature those thumbnails more prominently in the stretchable design.

Here are screenshots of my current site, a heavily customized version of the Expound theme. I use the CSS @media rule to trigger different CSS rules based on the width of the screen. Here are screenshots showing narrow (for handhelds, with the sidebar hidden), medium (for tablets) and wide (for desktops).

Note that I don’t actually check what kind of device is requesting the file; if you change drag the edge of your browser window, you’ll see the size of the images changing gradually, and the size of the type and a few other layout things changing. (I’m particularly proud of how my blog tagline “Humanities, Cybertext, Journalism, Writing” shrinks into a little menu button at the narrowest setting, freeing up precious real estate for the tiniest screens.)

I’m sure I’ll keep tweaking the design, but for now I’ve got to set this aside and start turning my attention to prepping my fall courses.