Using your blog real estate effectively

When you buy a piece of land, you have only a limited space to build the house of your dreams. When you design a blog, you have only a limited space to convey information. We call it “the blog real estate”.

The most precious real estate is the top of your homepage, the part a visitor sees when arriving at your blog. It is crucial you think about what information you want to display in that limited space.

Why? A typical occasional visitor will make up his/her mind to stay on your blog, in less than one minute. Between 20 and 57 seconds to be exact (see this post). He/she should, at the glance of an eye understand what your blog is all about, how to navigate through it, and what its key features are. Within less than a minute, we have to convince our adhoc visitor our blog is worth spending more time on.

In addition to ‘seducing the adhoc visitor’, the prime real estate area of your blog is also the main working area. It is the safe harbour from which each visitor will start the voyage through your blog. It is also the safe harbour the visitor will return to after a trip through one or more posts. For instance: few visitors will look for the “home” link or main navigation features at the bottom of the page, will they? Nope, they will go back to your prime real estate: the top of your blog.

How large is your prime real estate?

Funny, enough, the surface varies.. Ever heard of “elastic real estate”? Well now you have… Seriously, the surface of your prime real estate varies on your visitor’s screen resolution.
I took some statistics from the 300,000+ visitors on my personal blog”, and here is what I came up with:

Screen resolution statistics

The majority of visitors (51%) is using a “laptop resolution”. Subtract the space for a scroll bar on the side, browser toolbars on the top and at the bottom of the screen, and we are left with a real estate of 1,000 pixels wide and about 700 pixels high. 700,000 pixels, so little space to cramp all of the goodies in.. So let’s use it sparingly.

The blog building zones

Just as in a building permit, a traditional blog real estate has some main zones where we can build content:

The building zones of a blog's prime real estate

The main area is the header zone, which consists of a banner and blog title area, with optionally a small area just above (“super”) and below (“sub”). The latter two are typically used for navigation and key links.

The “Super” area is often used for information pages (“home”, “about”, “contact”, ..) or links to other websites your organisation might have.

The “sub”-banner area is typically where we can dock some navigation, or our post categories.

On the side (left, right or both), we have the side bar items. Only a few will be visible with a screen resolution of 700 pixels depth, keep that in mind. Put your most important widgets as the first side bar items. It is a good idea to put a key phrase for your blog, a search and a way for people to subscribe to your blog (RSS or Email subscriptions). Social bookmarks and social networking sites (Facebook, Twitter, Friendfeed, ..) normally find their home in that area.

The “main” section is the start of your area reserved for your blog posts. I find it important that within the 700 x 1000 pixel real estate, the user already sees the start of your actual “dynamic” content: the stuff you actually write.
While all of the other areas are pretty static in content, the “main” section will change as you write content. It serves as the teaser for the visitor to scroll down and explore the rest of your home page (or blog page if the user does not land on the home page).

What information to display in my prime blog real estate?

While there are no key rules, there are some conventions on what to display in your prime real estate:

• The name of your blog
• Your branding (logo, banner)
• A key slogan explaining what your blog is all about
• A link to the home page
• Links to key information (“about”, “contact”, “author”)
• Navigation features (be it categories, or a real navigation)
• Hooks for visitors: RSS, Email subscriptions
• More hooks for visitors: social bookmarking and social networking sites
• Links to the key goals and key areas of your organisation or of your site (fundraising, cooperation, key content)
• A search bar
• And… the first of your posts

Do know though these conventions should not stop you from experimenting. What I just described are the mainstream thoughts as to what to display, but often the eye-catching blog, is a blog “that does it differently”, so the layout and type of information might change.
Some shrink the width of the banner, and put part of the side widget content in the area traditionally reserved for the banner. Others have virtually no banner, but use that space as blog teasers.

Whatever you come up with, the key principle remains the same: the visitor should not get lost. He/she should, at the glance of an eye, understand what your blog is all about, how to navigate through it, and what its key features are.

Examples

I thought long and hard whether or not to show examples on this post. I decided not to do so, out of respect for my fellow bloggers. Everyone is doing his or her utter best to build the nicest house. Who am I to criticize or praise the home of others?

I would advise you though, to scan through my list of 280 odd nonprofit blogs, and you will see exactly what I mean.
By itself, scanning rapidly though those blogs, is a useful exercise. You will quickly see the difference between blogs, the different colours and flavours. After you did so, have a look again at your blog. Check it out with the eyes of a stranger. Scan your prime real estate for what you normally look for in a blog. Is it there? Is it prominent and easy to find?

Tagged as: design, tips