Peter Keating

Developer from the New Forest in the South of England.

New Theme for my Blog


For the last few weeks outside of work I have been creating a new theme for my blog. I decided that when I had published ten posts I would set to work on a new theme and this is it. The fresh look has plenty of changes not only visually but also under the hood that I will discuss in this blog post. I am not a designer, so I never expect to create a master piece, however I do try to keep things neat and tidy which is something I think I've achieved with this new theme.

Version One

The first version of my theme wasn't too bad, it showed my content in a way that it could be easily read by a user on any device. However it was plain and there were things that I wasn't happy with.

Firstly the header took up too much room. When viewing on mobile the header would take up two-thirds of the screen, and that was just text highlighting my name. The blue background with white font also didn't really have any character or identity, it was boring basically. The navigation in the old theme just took users away from my site so they can view my profile on various social websites (the good ones). Once again it took up a bit too much space for my liking, especially coupled with the header, all in all these two sections needed a bit of work.

I use Google Analytics to monitor users who visit my blog. I noticed that the bounce rate is quite high (around 80%). If your not familiar with the term bounce rate, it is a percentage of users who exit the site without viewing another page. I am making the assumption that this is due the home page showing the entirety of a blog post instead of a snippet with a link to the post. Showing the whole blog post also discourages the user from clicking through to the post, which means that it is difficult to see in Google Analytics a true reflection of what content users are reading. Last thing is that my blog posts seem to get quite long so there is no way to quickly scan through the blog posts without a heavy amount of scrolling.

There isn't much about me. Other than the content I write, my name in the header and the links to my social profiles there really isn't much about myself.

New Version

I was very eager to get started on a new version of the theme for my blog, but I didn't just want to dive in and get it done. I wanted to use it as a learning experience too. In order to do this I wanted to try some new things.

WordPress

With the first version of my theme, I didn't dive too deep into WordPress as all I was doing was displaying blog posts. With the new version of the theme I wanted to start introducing pages, not only so I can actually have some page navigation (other than the social profile links) but also so I can have a page about me. The new theme also has an Archive page, which required some digging around the WordPress documentation and API in order to access the posts & properties needed. The WordPress documentation is great and covers so many scenarios. It was easy to find exactly what I was looking for when I was trying to load post into a page. In order to code the archive page with the layout I had to remember back to some of my old PHP days, the language I first used when getting into web development.

Sass

In the first version of my theme I used LESS to assist with CSS development. It seems whenever LESS is mentioned on the Internet and there is a comments section available you can almost guarantee that there will be someone saying Sass is better. This also seems to be the view of many respected people in the CSS community, such as Chris Coyier who has written a great piece on Sass vs LESS, where he declares Sass the winner. I decided to give it a go, but I am not going to go through my experience as that is a blog post I am already in the middle of writing. I will spoil it though and say I loved using Sass, and will be using it in any future projects.

CSS

The majority of time when building the new theme was spent playing with CSS. I set out to make sure that the CSS I wrote followed standards that I had picked from a couple of places. The first place is , which is a set of principles from Nicolas Gallagher that provide a guide for developing CSS. The second place was from Harry Roberts blog on his own HTML & CSS coding style that is well worth a read, in fact his whole blog is worth a read if your getting into CSS development, it is brilliant. One of the important points both Harry & Nicolas point out is the importants of comments. I used comments in the CSS to provide introduction and explanation of tricky or unusual sections to give other developers (including me in months down the line) understanding.

Also I used CSSLINT to validate my CSS to ensure it wasn't breaking any rules.

Typekit

A large chunk of the content on my blog is text so an important part of getting the design right is selecting typography. Typekit is a service owned by Adobe that assists with providing a large library of high quality web fonts that can easily be integrated into a website. Once browsing the font library, fonts can be added to a kit. Once the fonts have been added to the kit they can be configured to make different forms of the font available to your site, such as italic, bold, bold italic etc. Once the kit has been configured there is a publish button that will update the fonts that are available on the specified websites. In order to access the fonts on specified websites some JavaScript has to be included in the head section of the page. A sample of the JavaScript with instructions on how to embed the code is accessible from the kit editor. If the browser hasn't got JavaScript enabled then the fallback fonts declared in the CSS after the typekit font would be used. Typekit is a great service, and has a large selection of free fonts but if you can't find one to your taste, then it doesn't cost too much to get the basic package that would make even more fonts available to you.

Going Forward

I had a lot of fun redesigning my blog, and I have come out of it learning a lot of new stuff that I am looking forward to start using in projects for Moov2. I can't see another redesign happening for a long time, but then again the little tiny bit of designer in me will always want to make changes, so we will see. For now though I am pleased with what I have come up with.

As always the code for my theme is hosted on Github so please go and have a browse. Any suggestions or queries I would love to hear them. Just send me an email or a tweet.

Back to Posts

-->