Last week A few weeks ago I gave myself a challenge, I’ve had the domain for well over a year now and done absolutely nothing with it. So I decided spontaneously on a Monday to attempt that evening to build a quick blog site and get it launched that night. In the end it actually took me 2 nights spending a total of four hours designing and building the site (plus about 45 mins deploying it), which was launched finally on the Wednesday morning. I’m actually quite happy with the end result, there are quite a few bugs and lots of things I could spend time tidying up, but I’m really pleased to finally have a site up and running after so long.

Here I just want to talk through what I did to get it set up, the little things I used to help me get something that worked and looked alright to me.

WordPress

For a while I’ve wanted to build a quick and simple WordPress theme that composed of as few files as possible. So I decided to combine this challenge with trying to get the site turned around in as little time as possible. For me WordPress is basically my go-to CMS for most things, it does pretty much everything I need and no matter what people say it’s still great for just a simple blog.

The overall structure of the site was pretty easy to come up with, a header, a content area, some pagination links, and a footer with a few bits of supplementary content. There would also generally be only two types of page on the basic blog, an archive (listing) page, and a single post page. Now, due to the nature of trying to create this WordPress theme with a few templates as possible I decided to take care of these just using the index.php file, making use of some of the WordPress conditional functions to decide on what type of content to display. Here’s the entire loop section of the template where you can see both pages share a lot of similar content, with the conditional statement only being used to output a different main body content of the article.

<?php if( have_posts() ): while( have_posts() ): the_post(); ?>

    <article role="main" <?php post_class(); ?>>
        <header>
            <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <p class="byline">
                Posted on <time><?php echo get_the_date(); ?></time>, in <?php the_category(', '); ?>
            </p>
        </header>

        <?php if( is_single() ): ?>
            <?php the_content(); ?>
        <?php else: ?>
            <p class="excerpt"><?php the_excerpt(); ?></p>
            <p class="read-more"><a href="<?php the_permalink(); ?>">Read full post &raquo;</a></p>
        <?php endif; ?>
    </article>

<?php endwhile; endif; ?>

Thanks to this I managed to keep the theme down to only 3 files in the end. The functions file is used to just set up a load of options in WordPress and to remove a few bits of unwanted meta data WordPress likes to output by default, and the third is the style.css. You can find the entire theme up on my Github here, I’ve got quite a bit of work still to do on it so excuse some of the code for the moment.

Vanilla CSS

Just a quick note on why I decided to write plain old CSS for once on this project, it was really just so I didn’t spend 10 minutes to an hour going over my Sass/Compass set up. I often find it easy to procrastinate with things like that which is exactly what I didn’t want to do with this project.

Sometimes I find it nice to go back to the bare essentials of our work and write without a framework or pre-processor or any of the many many tools we have now. It helps to remind me what actually does go into the browser and how to write it better and more efficiently. I did another quick project recently and stuck to plain CSS again and once more I ended up taking a bit more from it than I would have if I’d just have written Sass as usual, it just helps you think in a slightly different way.

Design

I think the design side of the site is probably the reason I’ve had the domain so long and not done anything with it yet. Trying to design for yourself is always one of the biggest challenges you can take on as a project. I can build a simple WordPress theme in minutes, but when it comes to selecting fonts, colours, and a layout I can sit and stare at my screen for hours and get nowhere. So due to the challenge I’d given myself and the short deadline, I decided to cheat a little.

Selecting fonts

I hate choosing fonts, there’s more fonts than I’d care to count now that web fonts are the default on the modern web. I remember when you could count the number of font choices you had on your fingers, and that included things like Comic Sans, which no one that called themselves a “designer” would ever dream of using.

I understand the importance of good typography when it comes to design, I’ve listened to plenty of talks and read loads of articles trying to improve my understanding, I’ve learned about ligatures, ascenders, descenders, glyphs, widows, orphans, and the rest. But for the life of me I still can’t choose a pair of fonts that look good together. This was my first opportunity to cheat a little. I simply googled “good Google Font combinations” and had a look around. The site I eventually took inspiration from is the lovely Beautiful Web Type website by Chad Mazzola. After staring at it for a while I settled on this combination of Open Sans, and Gentium Book Basic. With a couple of tweaks to letter spacing and line heights, they make a really good combination.

Colour palette

The next challenge was to select a colour palette for the site, again something I’m not very good at doing. My usual inspiration for colour palettes come from superheroes, if you’ve ever seen me give a talk in the last year, you will probably have noticed the familiar comic book style fonts paired with a colour palette inspired by Batman. That’s about as far as I go with design creativity usually!

This led me to my second opportunity to cheat a little. Almost any time I’m working with colour and need to test out some colour options I turn to Adobe’s Kuler tool. I can’t remember how long I spent searching through the explore section of the site. I was looking for a specific set of things in the palette, namely a light colour for the background, a black/grey for the text and a strong colour or two to use for highlighting parts of the design. Eventually I found the Pop of Pink theme that had everything I needed. I really like how the strong pink works as a bold colour to pick out the links, it’s probably one of my favourite parts of the design.

Responsive design

Finally I just want to mention a small point about the responsive design of the site. It’s nothing special of course, at the moment the site is simply a one column layout so really there’s nothing too fancy to cover. Except when you’re building a single column layout, how do you define your breakpoints? Do you even need breakpoints? Surely a good font size and a max-width is all you need…

I decided that I would use the single column layout to do something I’ve been wanting to try out for a couple of years now but haven’t had the chance based on the limited amount of design work I actually do for myself. I’ve set the breakpoints up to allow for an optimal line length based on the font size. As the width of the site increases I’ve bumped up the font size whenever the line length gets a bit uncomfortable to read. There’s a max-width on the site as well just to make sure the font-size doesn’t get too large to be uncomfortable as well, although based on sites like Andrew Clarke’s or Jeffrey Zeldman’s blogs I could have gone a bit larger with the type and it still been readable.

Work in Progress

The site is still very much a work in progress and development has been a bit stale for the last month or so – there’s still the broken bits it launched with (hint: don’t visit a category page the titles are HUGE!). I’m working on switching the styles over to Sass to help making the little fixes a lot quicker to do, and soon I’ll be working on setting up a few more sections to the site like an about page and a speaking section seen as I’m doing that a little more lately.

I’m still unsure about adding comments locally, I like hearing what others have to say about the things I write about. Based on what I’m aiming to write about in the near future as well, I think comments in the context of the post itself might be the best option to keep the discussion going as opposed to losing the discussion if we left it up to Twitter or an equally volatile medium. But for now if you do have any comments, feel free to tweet at me and I’ll happily continue on the discussion.

Final thoughts

I guess this goes to show that it is definitely possible to build a website in a very short amount of time. But to do so, you need inspiration, a system you have plenty of knowledge in to quickly put together what you want, and ultimately you need to be able to cheat a little.

Thanks for reading.