Slowly but surely I have been redesigning this blog. I say redesign but really I mean design this blog for the first time. Previously, I was using the Carrington Text theme. The original idea was to start of with a simple base and then tweak it bit by bit, blogging about the changes as I went along. In the 4 months that was the plan I tweaked a grand total of 0 things. The plan was not coming together. A different approach was required so I decided to start from scratch and design my own WordPress theme.

I started it about 6 weeks ago, doing 30mins here 30mins there, until progress was halted by the theft of my laptop (dries eyes). I’d had it all backed up but my current temporary MacBook didn’t have my development environment set up nor a dev instance of my blog. It took me a while to get round to rectifying that by which time I’d lost my momentum and only recently did I start working on it again.

WordPress Theme

Being my first WordPress theme I didn’t want to start from absolute zero so I decided to use one of the many freely available boilerplate themes. Plus I do think it is good practice and see no harm in using good boilerplates in your dev projects. My 2 favourite basic themes are Chris Coyier‘s Blank theme and Elliot Jay-Stocks Starkers theme. In the end I decided to go with Elliot’s. It’s well written, has nice useful comments and plenty of useful example code. It’s ideal for a novice like me.

I’m not going into too much detail about the intricacies of making a WordPress theme (probably warrants a post of it’s own). I think it’s suffice to say there was a fair bit to get my head around but luckily for me there are plenty of good tutorials and guides around. Plus WordPress’ own documentation is very useful and thorough.

Content Is Key

Content strategy and designing from the content are all the rage at the moment and have seen their popularity grow over recent years as people have begun to understand their users, or readers, better. A blog has readers and if those readers are distracted from the content it is likely they wont be readers for long. As the 2009 Alistapart article, In The Defense of Readers, says readers flourish when they have space to read alone. Distractions and the like found on many sites only serve to stop this happening.

I think it is fair to say that the foundations of any blog is its content, it is its key asset. Without it it’d be impossible to succeed, similarly if it is poor quality or is clouded by other distractions it is bound to fail. Wanting to make it clear that the content is key I decided to focus every design decision on whether it would aid a reader’s experience.

Typography

Taken from the same post mentioned above is this great paragraph about the part typography has to play in making content accessible to the reader.

Attention to the basic typographic details—line length, a readable typeface, the right balance between font size and line height, appropriate contrast between the text and background—can make the difference between a reader who makes it to the end of the article versus one who tires and gives up.

With that in mind and following on from reading Just My Type I spend some time exploring what would be best for the web. I wanted something that made posts as easy to read as the Readability bookmark does whilst staying in tune with the overall site design.

I wanted to use a serif font because generally it is easier to read large bodies of serif text. I also wanted to limit the words per line to 12-15 whilst setting a reasonably spacious line height. The font I chose to use initially was Georgia, which is widely regarded as the best Serif Typeface to use on the web (pre font-face et al). However when I showed it to Harriet the first thing she said was “Err, the font looks a bit dated.”

I turned to twitter to get some help and was pointed to the awesome Revised Font Stack by @psd.

Anyway after a little too much toing and froing I remembered reading the wise words of Jim Parkinson, esteemed typographer and creator of the Rolling Stone Masthead.

…the type must never be allowed to become too important.

I was on my way to letting that be the case. Thinking it’d be best to just make a decision I ended up choosing this family for the main body text.

font-family: "Hoefler Text", Constantia, Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;

Issues

I did encounter my fair share of issues along the way with the most annoying occurring because of WordPress’ sensitivity to white space. There was a bug with my theme that occurred whenever I saved anything from the admin dashboard. Instead of saving and letting me get on with what I was doing it was saving and then redirecting me to a blank page. It was a strange issue, everything had worked in my dev version and no mistakes were glaringly obvious.

A bit of digging later and it turned out the whole problem was cause by a single blank line in the functions.php file.

endif;
?>

<?php
// add custom caption function and shortcode
add_shortcode('wp_caption', 'cj_caption_shortcode');

Apparently WordPress isn’t a fan of these spaces so be very careful if you are ever writing some code for it.

Next Steps

There are still many things that aren’t complete, things like the way comments are displayed. There are still things I haven’t implemented yet, for example, I’d want to utilise posts’ custom fields to display custom images and drawings in place of the black headline text. On top of that, inevitably, there are still things that I’m not 100% happy with – the header and footer are still pretty crufty.

However now that I’ve put time, energy and effort into it I’m sure I’ll keep iterating away and keep improving it. In all likelihood I’ll probably have issues trying not to tinker with it.

Not forgetting that I still haven’t designed a logo there is clearly plenty to do but I must say that finally doing it has been fun and I’m looking forward to continuing working on it.

That is just a summary of a few of the things I had to think about when redesigning this blog but I hope it gives you some useful insight into some of the thought processes you need to go through when going through a redesign.

Needless to say, any feedback you’d like to give me would be greatly appreciated.

One Comment

  1. Pingback: Code Snippets | A learning curve

Leave a comment

Your email address will not be published. Required fields are marked *

*