In a ideal world, your words and images would be enough to attract readers to your blog, and persuade them to stick around. However, the reality is that the Internet is a visual medium – you need to make content easy to make sense of, and easy to read.
When you start blogging, you’ll probably use a standard template provided by your blog company. But as you get a little more confidence, you’ll want to tweak your blog, adding your own colours, images and layout touches. Here are some tips to help ensure your new design adds to – rather than detracts from – your content.
- Steer clear of patterned backgrounds: Text on a patterned background can be almost impossible to read. It makes your pages look busy and unprofessional. Sometimes you might have the option of a patterned background with a plain column in the middle for your text – this is a little better, but tends to be slow to load, so still isn’t ideal.
- Steer clear of dark backgrounds with light text. It might look cool, but this sort of design is incredibly hard for people to read. If you must do it, then a very slightly off-white text on black is the best option. And remember that high-contrast designs such as black and white are always harder to read so choose a font that leaves a little more space between the letters. If you’re looking for something easy on the eye, the classic combination of a white background with a dark grey text is widely acknowledged to be your best option.
- Don’t post tracking HTML in the sidebar, or at the top of your site. When you sign up for Google Analytics or similar, you’ll get a snippet of HTML code to insert on every page of your blog. This code can be notoriously slow to load, so it’s important to place it somewhere so it won’t delay the loading time of your blog content. This means the best place for tracking code (and any third party HTML) is in the right-hand sidebar, ideally at the bottom of the column.
- Resize images. Images are just as important as words in blog posts but there’s no need to display massive images. If you have a large image file, it’s simple to resize it using iPhoto (on a Mac) or Picture Manager on a PC. Ideally, only images should be no more than 100kb.
- Consider using a layout with excerpts. When you write a blog post, most platforms and themes give you the option of publishing the full post on your home page, or just a snippet. Using snippets is a good idea because it means more of your posts fit on a single ‘page’ and readers can browse more easily than they can when scrolling down a long list of text (although I don't take my own advice here, I must admit). However, don’t confuse this with using excerpts in your RSS feed – where I’d say that using full posts is a far better option.
- Remember not everyone has the same computer. My blog is 900 pixels wide – the header is 800 pixels and there’s a 25 point border at each side plus a page border. When I view the blog on my Macbook, the blog fills the screen. But if I view it on my PC laptop, there are acres of space at each side. The difference is in the resolution of the two screens – one is 1500 pixels wide, the other just 1100. If I use the Macbook to look at some blogs that are wider than 900px, I constantly have to scroll left and right as well as up and down – annoying if (like me) you’re essentially lazy. For this reason, I tend to design blogs at 900px wide, so that everyone can view them easily.
- Make navigation easy. It’s simple to turn your banner into a link to your home page. Use categories in your sidebar to help people navigate by date or topic. Use a navigation bar at the top of the screen to link to important content, such as your top 10 posts or your ‘contact’ or ‘about me’ pages. Make it easy for people to find the key pages on your blog.
- Keep it clean. The longer you blog, the more you’ll acquire badges, awards, advertisements, sponsorship logos, campaign logos and other widgets and content. Too much and your blog starts to look cluttered and will be slow to load. Every few months, have a clear out of content and get rid of badges, logos and widgets that are no longer relevant.
- Use space. Graphic designers use the term ‘whitespace’ to describe the gaps between elements on a page. Using plenty of whitespace in the sidebar and between/around posts makes your blog look less intimidating than a heavy block of dense text – and has the added benefit of being much more readable for your visitors. You can easily add ‘padding’ to key elements on the page, and clear borders around images to create this important whitespace. On longer posts, consider using sub-heads and cross-heads to break up the text.
- Put key elements above the fold. The term ‘above the fold’ originated in newspapers and refers to the fact that papers will tend to put important content in the spot where most readers will see it – in the top half of the page, and towards the outer edge. In the context of a blog, this means important information should be visible as soon as someone lands on the blog, and doesn’t require them to scroll down to look for it. So, for example, your RSS subscribe button and your about/contact pages (or any other ‘call to action’) should always be above the fold.
What are your favourite blog design tips and techniques?