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.
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
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.
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.