Two months and 132 commits later, bermuda is done.

What is bermuda? You’re looking at it. If you’re reading this block of text in your inbox or a feed reader, stroll on over to my blog and you can see the new theme I’ve built.

It took me two months, and I can’t remember exactly what made me finally get to work on a new design. The previous glorious red and orange one was live for seventeen months. I suppose I was getting sick of it, and things started to fall out of place or feel a bit incomplete. The world of web design and development is always changing, so I felt there were a few things that were getting a little bit outdated.

Originally, bermuda was just going to be like this:

Just a refreshed, updated stylesheet with some new colours and borders, and everything else pretty similar. It’s no surprise that bermuda was inspired by the following Hey Geronimo poster which also sits on my bedroom wall. My previous design was in fact inspired by an older Hey Geronimo poster.

I don’t think I need to mention for the thousandth time that Hey Geronimo is my favourite band. Also, bermuda was named after a Hey Geronimo song that hasn’t been released yet, but I’ve seen them play enough times to know the song.

I decided I didn’t want to simply re-do the stylesheet. I wanted to do everything over from scratch. bermuda is my first project on GitHub. I have used GitHub before, but never for personal projects.

The first thing I did was rebuild the HTML and all my WordPress theme files from scratch, with a complete focus on structure. I had a really radical idea to have blog posts set out like postcards, with text on the left hand side and post metadata on the right, and individual posts set out like a letter with a letterhead. I soon realised this was far too difficult, especially if I was considering a mobile-first approach and wanted a responsive design. It was too complex.

Colours

The colours actually came last, even though they were in my mind visually. It was difficult trying to get a lot of shades of blue and teal. I also avoided using more than two main colours from the advice of a designer at work, so the orange I was originally going to include didn’t make it. Also, there’s only one shade of pink!

I think the main blue background may still be a little bright. I had to tweak it a little bit because on some monitors the text in the sidebar is hard to read. But I am absolutely in love with this blue.

Fonts

I wanted to use exactly the same font on the poster (League Gothic) but it was not going to look very nice as headline text if it was going to be in uppercase many times throughout a page (particularly the homepage). I was going to go for something fancier or at least one other font for headings, but decided to try just one font across the whole website.

I used Source Sans Pro, as I had on my previous design, but made the font thinner. James pointed out that it was incredibly hard to read on his Windows machine, which prompted me to select Roboto, the font I use on my portfolio.

The cute rounded font Karla came up as a second option since I had used it as a body font on another website, but I decided it was more suited to subheadings, and of course, buttons!

Buttons/links

I have been working on updating button styles at work, and it has taken me many weeks because of a whole range of issues (my branch was reverted at least seven times!), so the simple, flat, square-cornered buttons and links on bermuda are a silent protest. I mean, they are still lovely, am I right? ;) In that vein, I have kept the use of any complex code to a minimum, only using rounded corners for the post thumbnails, and just trying to keep things really, really simple.

Figures and images

Previously, any images with captions would have a coloured background behind the caption and borders around the edges of the image. To avoid really bad scaling on these elements while maintaining a maximum width of the containing element, I ditched the border and just made the caption an attachment to the bottom of the image. That way, images without captions wouldn’t look strangely different.

Edit (03 May 2014): I had a bit of feedback that the captions were hard to see, so I used the Karla font instead and made the text darker.

Comments

Normally it’s the comment and comment thread styling that takes me eons. But this time I got it out of the way quickly. There was no need for all that metadata to be displayed fancily, there was no need for the Gravatar to be fancily displayed, or for any background colours. It’s all very simple with just a few lines to indicate comment threading.

I’ve had too much trouble with background colours and getting the overall functionality working with the CSS while keeping the HTML as semantic as possible, because WordPress comment threading can be a pain in the backside.

Search Results

I spent a while glorifying the search results with a handful of PHP functions, and it took me a while to work around how the post excerpt worked all around, but I got it working! Now if you search for something like “velociraptor” you will have your search terms highlighted and everything will overall be quite friendly. I’m not too sure the search function is used very much on my blog, but I’m proud of what I’ve done there.

Categories

I also spent time including category descriptions, so if you visit a category – take Fashion Friday, Photoblog and Stories, for example – you will see a small description of the category before the list of posts. I cleaned out some old categories, so hopefully you won’t miss ones like Doctor Who, Reviews, Minecraft, and others that didn’t really need their own category.

404 page

My old 404 page was Minecraft-inspired, with a giant smiling creeper on the page, and me claiming I forgot to install a “door” in my “house”. My current one is – you guessed it – inspired by the Bermuda triangle.

Favicons and app/bookmark icons

Even though I was trying to stray from triangles, I couldn’t help it. I really wanted to move away from the circles I was so obsessed with. I made the favicon a triangle. If you’re on an iOS device and create a bookmark or add to your home screen, you’ll see a custom favicon as well.

Other changes

There are a handful of other changes and bits and bobs. The tutorials have moved to tuts.by.georgie.nu and I will not be posting tutorials here anymore, nor will I be updating the old ones.

I have now written a manifesto called The LZRGUN Manifesto [page no longer exists] to summarise my general views on life (more on that next time, but have a read of it now).

You can also subscribe to my blog via email by using one of the subscription forms either in the sidebar or footer (depending on what device you are using to browse).

Not saying that there are any Easter eggs… but you may notice some other cool things I forgot to mention.

Would love to hear any feedback on the new design. I am expecting a couple of complaints about the bright blue, but I may be hesitant to change it… everyone needs colour in their lives!