Best blog design is one that shows your best content on top

Topmost blog design advice ever!

When you think of design of your blog, or any other type of website, what comes to your mind? Its appeal? Colors, backgrounds and fonts? Columns and their content? Widgets and plugins?

I think, the best web designing advice anyone can give you is that Your blog or website must have great navigation: visitors should be able to easily find what they are looking for.
Its topmost content must come on top: it must show up at the first opportunity.

In this post, I will deal with the second advice.

The design and layout of any website should be such that people are served this main content when they visit the website. On the web, visitors do not have the patience to visit the bottom of the web page to look for the content and then select the best. It is the top 8-10 inches of space on your blog's desktop version and top 2-3 inches on its mobile version.

During our review of blogs and compilation of blog directories, we look at thousands of blogs every few months. Our experience tells us that bloggers do not make the best use of the opening screen of the website or individual pages. They either clutter it with too many elements or put a big image there. On many websites and blogs, the first page has almost nothing and the real content shows up after clicking on the homepage.

Many big companies use this space with their latest product, a prestigeous award they recently received, an important announcement or an impressive image that displays their core strength. These help in brand building or serve some other purpose. In such cases, the space is productively utilized for showcasing the best thing of that time.

On blogs, the most important content mostly is the posts - the refreshing content. So, in most cases, the top should be simple, with the latest post coming soon after the title space.

Menu bar is one item that greatly helps navigation within the website/ blog. When you give it a prime place in the top of the screen it makes use of both the topmost principles of web designing (as given above: good navigation and showing top content).

Blog and website design ideas for the top portion

Let me take the discussion one step forward and give you some elements that should occupy the top part of the screen:

A well-composed title, within a thin title bar.
Pithy and SEO-optimised description (about the company/ blog/ blogger).
An appropriate background in the title space, or no background.

The above elements make the title area. These together should brand you/ your website/ a product.

Menu bar. The menu bar can be above, below , upon or on the side of the title. There should be provision to collapse it or customize it for mobile devices.
Something great to announce (e.g. the latest product, a discount sale, upcoming webinar).
If something is not there to announce, think of something that will do great branding.
On the blog, display the main content just under the title.
On mobile version of the site/ blog, ensure that the best content shows up in one column.
If your website or blog has one or two sidebars, let their top portions show the best widget. On blogs, the most important category or latest posts or something that you want to promote through the blog can come here.

Do not clutter the blog with too many elements placed together or their weird coloring and arrangement. Take special care that the top portion is not at all cluttered even if you cannot avoid having some clutter in the lower part.

If you monetize the website or blog through advertisements, put just one ad in the top portion of the blog. The idea is to get visitors' attention to the ad so that they click on it, and at the same time, the ad should not clutter the prime space on the website.

Website design and attention map

Website attention map

I have put on the linked post an attention map of websites, as shared by Google. The attention map given above shows which areas of a website are looked at by website visitors more than other areas. In this picture, orange color shows the greatest attention, yellow lesser and white low attention received from visitors.

Notice that the top, center and left of the top portion of the website invite the most attention. (When the visitor happens to scroll down, the footer part also gets good attention.)

The above image shows total waste of top portion of a blog. Half of the screen is covered by a big image on which the title and description are written. If the image represented the core business of the blog, that would give some justification for that image but that is not the case; the blog is on cinema. In fact, even the lower portion of the screen should have a picture and not an ugly placeholder for a movie.

In contrast, look at the screenshot of a news blog below. The design is simple and the top portion has title, description, menu bar, the top news of the day and a collage of other news items. Next to the title, there is even an ad. To accommodate other categories of news, there is another menu bar (in yellow color) under the main news area - these less important news items do not take prime space and yet are accessible in one click.

If you carefully look at the topmost professional websites, you will find their web design simple - and their top portion very functional and yet clean. If they are colorful and experimental, there must be some purpose that outweighs other considerations. In any case, no professional website wastes the prime space at the top portion of the screen.

If you look at the top blogs, you will find the same principles of design applied to them. Even when these blogs need to have many widgets, they accommodate the most important ones in the top part.

I will like to offer this very blog, Top blogs, exposed to scrutiny. I have kept its top simple to the core, with just the title and description. These are followed by a menu bar and then the latest post starts. There is a strip of advertisements just under the title. This is an experiment I am running on AdSense and these ads have been placed there by Google. Please note that even after Google has placed this (rather unappealing) ad strip just below the title, the description and menu bar are still visible to the visitor.

Blog themes that give a clean web design

On Wordpress as well as Blogger, there are many themes that have an appealing design and efficiently laid out top portion. I advise that you go for a theme that gives easy navigation, display of top content in the top portion of the screen and clean (not cluttered) overall look.

Also don't forget to check the mobile version of the theme for same attributes.