Design your blog

image My Tripod.com homepage, circa 2001. Homepages have come a long way since those primitive days when we had to manually create every hyperlink and thumbnail.

Many people kick off their blogs without thinking of, or even knowing about creating a proper blog structure with a logical design. Yet a proper visual and content infrastructure is necessary for a blog to be decent-looking and accessible.

In plain English, all blogs need good design and content layout.

Think about it, a blog is essentially no different from a webzine or newspaper. It is meant to present the latest information in appealing, bite-sized pieces, while allowing you to retain creative control over how the site should look. At the same time, people should be able to access your old and new content easily, and get to their desired content quickly. That’s where proper content management comes in.

However, most people believe a blog should simply be about plonking in the latest content, and don’t think much about how the blog is laid out for long-term accessibility.

I disagree with that approach, because blog design indirectly affects how people feel about you and your content, whether they realize it or not. And if your blog lasts a few years, you’ll realize like I did that people are missing out on a lot of older posts that are probably worth revisiting. Heck, there are posts I don’t even remember writing!

Now it could be that many blog owners have no affinity for good design, or think that nice designs are out of their reach. I often feel much like the latter group, because unless you’re using a proprietary WYSIWYG blog creator like iWeb from Apple, most blogs require some serious programming skills to become exactly what you want it to be.

But good blog design is not impossible, even for non-techies. I’ve been writing on this blog for over 4 years and every year or so, I’d take a good jab at revising the blog design with my limited HTML skills. The good news is that blogging software is getting easier to use and there are more powerful plug-ins for the awesome (and free) blogging software WordPress with every passing month.

MY BLOG DESIGN

For 2010, I launched a new front page for my website as I realized that all the blog content I was creating was disappearing into oblivion and needed to be called out.

You’ll see now on the homepage that the main content on this site is now consolidated and updated on the fly in compartmentalized boxes (The Blog, On Christianity, Reviews) etc as I found that few people would bother clicking on the content categories on the sidebar. There’s also a Random Post of the day to revitalize the archives.

image

The blog itself remains unchanged in structure, but will no longer appear as the first page if you visit www.iantan.org. I used to wonder why people didn’t put up their blog posts upfront to new visitors, but now, with over 500 postings, I understand the need to shuffle them to the side. But it’s still important to call out the latest posts (I’m still exploring different options on doing content slideshows like major news websites).

image

Here’s what my site would look like with older WordPress themes:

imageThe WordPress Classic theme – zero design elements if you ask me.

imageMy previous theme – Mistylook – which was nice looking but difficult to tweak for non-geeks.

The current theme that I use – Atahualpa – is excellent. It has extensive menus that let you customize the layout of your blog exactly as you want it, without having to edit the theme code files manually. It also works well with most plug-ins. Highly recommended if you’re thinking of starting a WordPress-powered blog or reworking your current one.

TIPS AND TRICKS ON BLOG DESIGN

These are written for WordPress users in mind, but most of it will apply to users of free blogging software or other blogging platforms too. I am no professional web designer and this blog itself needs plenty of work! But these are the key principles I picked up over the years for an amateur blogger. I will start with infrastructure before I go on design suggestions. The key question to ask yourself is “Is my blog easy to read and explore?”

Categorize carefully

image

Good content is essential, but what you really have to take note of is careful categorization of your posts. You shouldn’t have too many Categories (I personally think I have too many myself, about 15 at time of writing), and they should be clearly differentiated.

For example, my movie reviews used to fall under Recommendations, when they should have been under Reviews (most online users home in straight for the Reviews category). Tags are useful too, but I’m too lazy to tag my posts regularly.

To take this further, think about what you really want your site to be about. If it’s about random thoughts, then it’s okay to have randomly scattered postings. But if you want people to find out more about knitting tips, they shouldn’t have to comb through postings about your travels.

Bring old posts out of the closet

image

I can’t believe I only did this recently. I installed the Yet Another Related Posts Plugin on my site, and if you visit each blog post on a single page, it’ll throw up suggested related posts at the end of each posting. So if you’re reading an Olympus Pen posting, it’ll suggest other Pen postings or photography related article for your browsing. This is great for letting readers comb the depths of your writing and your passions.

Consolidate posts and call them out

image

What I did on my front page was to use a common plug-in called List Category Posts that dynamically highlights the latest posts to capture people’s attention on my blog page. I also used it to call out a random post from the archive to follow the earlier tip of revisiting old content regularly.

Don’t abuse page menus

Some people put a dozen drop down menu options on the top of their site but who would bother looking at such a long list? I’ve kept mine to just a few (Home, Blog, Photos and Contact Me) because I want people to focus on the grouped content on the front page. Much as my ego tells me that every post is important, I know they aren’t. Each blog or website should be focused on just a few key objectives or themes, and allow users to discover the rest for themselves.

Make use of SEO

Search engine optimization (SEO) is the key to allow people using search engines to find your blog easily. In plain English, blogs that are optimized have invisible tags that tell search engines what this site offers. For example, at time of writing, if you search for “Ian Tan”, I’m the first or second hit depending on which country you’re residing in. That’s because my site and my identity is engineered to rank highly on certain search engines.

This does wonders for the ego too.

The Atahualpa theme has built-in SEO mechanisms, and you can find other plug-ins to do the same too. It helps to write your blog headlines carefully. For example, if you’re writing a Storm Riders review, search engines will find it better if you write “The Storm Warriors Movie Review” instead of “Feng Yun 2 sucks”. Tagging also helps to increase your content’s visibility on search engines.

Arrange your sidebar(s) carefully

Think like a reader who is visiting your site for the first time. What sidebar content do you want him/her to see first? An online ad or your online profile? Most people mess up their sidebar widgets with crap and it is a true eyesore. People don’t need to see a calendar on your sidebar, but they might want to see a random photo or a Facebook badge.

Font frugality

Since the dawn of printing, people have abused fonts to death. Use as few different fonts as possible, or stick to just one font family. And for body text, try to use simple and elegant fonts like Arial or Calibri, and avoid Comic Sans like the plague ok? Read more on font usage here and here.

Give your blog breathing space

Want to see a site that is gasping for breathing space? Visit AsiaOne and you’ll understand this bit on poor web design immediately. I have no idea why this site has been around for over a decade and still looks like a 1997 webpage.

If you are not good at design, just remember that it pays to have as few visual elements on your page to begin with, then you can add on new elements (widgets, banners, badges, ads). I wrote more about this topic here.

The past ten years have seen a proliferation of “clean design” (thanks to European designers and Apple) that emphasize proper allocation of empty space in relation to content.

In practical application, it simply means

  1. Breaking up long text paragraphs into shorter, more readable chunks
  2. Writing shorter, more concise sentences.
  3. Use bigger, more legible font sizes where possible.
  4. Having distinct gaps between different design elements.
  5. Don’t have some fancy headline banner that takes up half the screen.

Of course, these design principles will work well on any other platform like advertisements, flyers and books.

Narrow text columns

dumas 

Alexandre Dumas’ journal Le Mousquetaire, circa 19th century

Ever wondered why newspapers and news websites keep their text confined within a narrow space? Because it’s simply easier to read and scan. If you let your text flow unmitigated from one end of the screen to another, you can imagine how tough it will be for a reader who is using a 24” widescreen.

That’s why it’s useful to have fixed-width layouts for your main text. This keeps the text narrow and neat, no matter what kind of screens are being used. This also aids folks who are surfing your site on mobile devices like smartphones or the Playstation Portable.

Currently, my site is set to display text across a 500 pixel width, which I feel is a little too wide, but that’s because I like to display my thumbnails bigger.

Proper color schemes

The wrong or inappropriate use of color is one of the fastest turn-offs for any visual object. Poor use of color contrast also leads to eyestrain and less time spent on your blog (think tiny white text on black backgrounds). Bright red backgrounds are also a no-no, unless you have enough white or black elements to balance them out.

I’m not advocating that everyone uses a boring white background like my site, but just as you would spend time color co-ordinating your clothes, it’s important to color match elements on your website carefully for the ideal emotional and intellectual impact.

colorindex2

Read more about color literacy here, and if you really need help with colors, getting a book like the above would help. Jim Krause’s Color Index books contain thousands of color scheme suggestions for different uses.

Remember the golden maxim – less is more. In the age of information overload, we are prone to pour way too much content on our readers, and it’s important to know how to shape our content for maximum accessibility and impact.

7 Replies to “Design your blog”

  1. I think your new frontpage is great. I think for people who just start blogging, having a frontpage that points straight to their blog postings is probably sufficient ‘cos they wouldn’t have sufficient content to break into sections anyway. Over time, however, I suppose the need to have more distinct sections will be required, and it transforms a simple blog to a full scale website (at least that’s how I differentiate a “blog” to a “website”). Anyway, great job!

  2. Sorry, just wanted to add something – people should also test how their blogs/websites look on different browsers ‘cos not all free themes work well on all browsers. For example, I’ve deleted many themes that looked good, but would only work on either IE/Firefox/Safari (which I consider the 3 most popular browsers), but not on all.

  3. Hey thanks UTG! I’m most amused by my “random posts” link as it throws up postings I don’t remember writing. Shows you how useful it is to have an online diary, as the human brain keeps chucking out info.

    Yep, thanks for mentioning about testing in different browsers. I tested this theme in IE and Chrome, so far so good 😀

  4. Eh, can remove my real name pls? Thks. 🙂

    And I stand corrected… I juz read a report yesterday that said that Chrome has overtaken Safari to the 3rd most popular browser. So I guess now I need to test my themes in IE, Firefox & Chrome. Heh.

Comments are closed.