Today I decided to take the time to do some updates to my blog layout and design based on some suggestions by Matt Gemmell in his recent article on Designing Blogs for Readers. In his article, he outlines a number of steps that can be made to improve the readability of your blog, including things like layout and typography. I am going to outline some of the changes that I made and my reasoning for them.
The first change I made was to increase the font size for the whole site. Depending on what readability guides you look at, it is easiest for people to read things that are at most 80 characters long. Gemmell outlines a guideline that recommends 2-3 alphabets per line (which accounts better for variable width fonts). While new layout is slightly narrower with a smaller font, I opted to keep the width of mine intact and increase the font. This should do away with the need to zoom the page for some readers and should make it more comfortable for everyone to read longer articles.
In order to increase the font size, I added the following to my source/sass/custom/styles.scss:
//Increase the font size for the body from 1em to 1.6em.
body {
font-size: 1.6em;
}
//Adjusts the header size so that it fits on one line.
body > header h1 {
font-size: 2.2em;
}
Because the entire theme uses em for measurement, increasing the font size of the body increases the size of all other font-size attributes by a proportional amount.
The other major change that I made was to remove the sidebar. While I like having the information that the sidebar presents, I think I went a little overboard with adding things to it and I also think that it tends to distract people from the important parts of the page (which is to say, the content). I will be moving a lot of the information in the sidebar to either the about page or to the footer of each page. I will be removing my Twitter Timeline, Recent Posts, and GitHub Repos from the site completely. Twitter timeline had been broken for some time, so there is no reason to keep it. Besides which, if someone wanted to read my tweets, they would follow me on Twitter. Recent posts in the sidebar was a duplicate of the front page, so there is no reason to add it elsewhere. GitHub projects will be replaced with a link to my GitHub page from the About section of the blog. I will be writing about important projects anyway, so there seems no need to add extra clutter to the blog.
Removing the sidebar was a lot easier than I thought it might be. I was looking for some type of include in the Octopress markup, but i could not find anything, so I started looking around for the actual markup for the sidebar. It turns out to be a little easier than all of that.
At the top of each file in source/_layouts, you can simply add the following to the YAML header:
sidebar: false
In default.html, you will need to add the YAML header info, so it will look more like this:
---
sidebar: false
---
I hope the new changes help out with reading my content.