Welcome to the second part of the Blog design best practices series. In this post you will be guided through some tricky aspects of blog design that clears and upgrades the layout of your blog!
The reason for blogging is to spread information. This, generally great amount of data, must be served adequately. As a first best practice, you must reduce the gap between the top of the page and the start of the content area. This can be done by simply reducing or eliminating the non-functional parts of the header. These non-functional parts are those whom purpose are design. Why? The simplest answer is that new visitors stay just for a few second or less whilst deciding whether they will read the post or not. If they do not read the post, you can be sure that they won’t subscribe to your feed, etc.
After we discussed the vertical positioning of the content we must talk about the horizontal divisions of the layout. A good blog design consists of two or three columns: two less promoting columns for sidebars and a dominant part that has clearly defined boundaries of the content area. Having such a clean design the visitor always will find the information provided and he/she will stay on the blog.
Another aspect that needs attention is typography! I mentioned this one in the previous post too, but it is very important. Using adequately, typography can do much for our blog layout. Using harmonious, balanced, colors and well selected font family the blog interface can be graded up radically! The main idea is to reduce the number of disturbing elements of the blog that can mislead the reader. Use no more than three or five main colors and their hues and use no more than one or two font families. The colors have to ensure good contrast and easy reading!
Trick: you may use one font family and the diversity of different styles of it combined with slight differences in the color in use. For example: italic, 20% darker.
One of the trickiest details is the alignment to a virtual grid of the building blocks. All the elements displayed on the blog must take in consideration this imaginary grid that runs both vertically and horizontally through the layout. For instance, if the distance between the bottom of the header and the top of the highest heading is 20 pixels, than the highest heading in the sidebar must be 20 pixels down from the header.