XOR Media

Coding, Operations, Etc.

Anatomy of a Redesign

Posted on Tue 01 January 2013 by
Screenshot of the previous XOR Media theme, a slightly modified notmyidea

A new year, a new theme. Since switching XOR Media from it's hand-coded, mostly placeholder, last May I'd been planning to build a custom theme for it and over the holiday break here in the US I had a chance to tackle it. I started by looking around for inspiration. I was looking for something clean and simple with a horizontal top-nav, but that was all I started with. From there I skimmed over the wordpress's theme directory and visited a lot of the sites that I read, but normally don't visit thanks to Google Reader.

The image to the right is a screenshot of the old theme, a slightly modified version of the Pelican's notmyidea theme. It's pretty un-inspiring and was lacking lacking with respect to SEO and responsive/mobile design.

Content & SEO

The major, non-aesthetic, change was to the home/index pages where the most recent article is no longer included in full. Repetition of content isn't good both from an SEO and usability standpoint. Here it was easy enough to find what you were looking for and wasn't particularly confusing, but there was no point to the duplication. The SEO case can be dealt with by using rel=canonical, but it's a little odd to use that on the top-level url. At any rate I had no reasons to and a couple reasons not to so all of the listing pages are summary only.

Another SEO-related change was setting up Google Author Attribution. Article pages now have a clean and simple "About the Author" section with links to my profiles on social networks. Those links include rel=author identifying the link as pointing to the Author's profile. In the case of the Google+ link that tells Google who to attribute the content to.

Visual Design

The most evident visual change was increasing the margins. (screenshot to the right in case I've moved on before you read this) The new theme makes much more effective use of your screen real estate. The major margins are set to 2% of the screen width including the insets of the body, masthead, boxes, and gutter between the main content area and the sidebar. If you look closely you'll be able to pick out the care that was taken to build shared lines, where groups of elements share a left/top line. This is the more important design rule that I've picked up in my reading and experimentation. It's not something you notice, but without it the design will look amateur.

Screenshot of the new XOR Media theme.

The masthead changes are nearly as obvious, dropping the large single-line h1 and breaking it in to an h1 for the site name, and putting the tag line in to smaller tightly spaced h2 below the site name. I've also selected a set of Google Web Fonts from a recommended font pairings. I'm making use of 700 weight ARVO for the sitename, and 400 for the tagline and nav. Everything else is PT Sans.

The nav changes are less drastic, dropping the odd red/pink active tab in favor of a simple mono-chromatic alternative. The first subtle effect is a linear gradient on the nav background. The top is slightly lighter than the bottom which is the same color as the intra-item borders which causes it to disappear. It's also important to note the area of the <a href>'s are the full size. Navigation bars where you have to click the text are a UX no-no.

All of the content, both in the main area and the sidebar resides in boxes which groups and breaks up functional areas nicely. The second subtle effect is a slight shadow on the bottom of these boxes. Again you don't notice it, but without it the page is flatter.

Functionality & Usability

Screenshot of the new XOR Media theme on a phone-sized screen, the sidebar has been hidden and the nav has been broken up in to two lines.

Finally we're to the biggest functional change of the new theme, mobile-first responsive design. My starting point was HTML5-Boilerplate, which I highly recommend. Even if you don't directly use it as a starting point you should read through it's code and docs and watch Paul Irish's HTML5 BP Talk. You'll learn more about quality/high-performance web design in the couple of hours you spend there than any other way.

My base markup/css is pictured to the right. The first thing you'll notice is the nav has been broken up in to two lines since it would have stretched beyond the right side of the screen. There are no borders between the nav items as they don't look good when they fail to line up and the gradient trick would not work on the top row. The other big difference is the sidebar, it's hidden. The sidebar never contains essential content and so having it hidden doesn't hurt the navigability of the site. The main margins are much tighter here where there's less room to spare, the benefit of doing a percentage based margin, but you'll notice the margins inside the boxes are still constant since they're specified in pixels. This was required in order to match up the content and sidebar box styling since they're different sizes 2% in each wouldn't match up. At some point I plan to play around with %-based numbers here as well, which in theory is possible with some math, but I like the current look so I haven't bothered.

Screenshot of the new XOR Media theme on a tablet-sized screen, the sidebar has been hidden and the main content is now full-width.

As you grow the window size things start to move more towards the full-width version. The screenshot to the right is an example of what a tablet device would see. There's enough room for the single-line nav, but the sidebar is still hidden since showing it would crowd things.

Conclusion

I learned a lot about the Pelican engine in building this theme and quite a few otherthings, but most of that will be saved for future posts. In closing I invite your feedback. Tell me what you think of the new design. What can be improved? I've decided that my focus for 2013 will be to expand my artistic/design skills. I have a lot of blogs, books, and projects lined up to that end, but the best way I can imagine to learn is to discus with others so have at it.

In misc, tagged: copywriting, css3, design, html5, and pelican.

About the Author

Ross McFarland Ross McFarland | | |

Ross is a 17 year veteran of the software industry with experience spanning low-level signal processing, web and mobile user interfaces, high-scale distributed web services, infrastructure, and networking. He has made extensive contributions to open source highlighted by his time as a primary maintainer of Gtk2-Perl and author of requests-futures and python-asynchttp libraries. (more)