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.
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.
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.
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.
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.
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 <a href="https://github.com/necolas/idiomatic-css"idiomatic-css, 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.
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.