Web Design Critique: Consistency and Homogeneity of the Blog Layout

Blogherald.com is a blog featuring news from all around the blogosphere since 2003, and is run by a dozen of contributors and writers. It was founded by Duncan Riley from Australia and is now owned by Splashpress Media. The Blog Herald has gone through multiple design and layout variations, including the latest one made by Brian Gardner.

Web design and design in general should never be judged from the aesthetic viewpoint or by how much one likes/dislikes a particular color scheme, typeface or the layout of different content elements. The purpose of design is to make the content organized and accessible to the widest target audience possible. Design should be the information highway without traffic jams and clearly marked road labels which don’t require any Design Positioning System (DPS) in order to navigate.

By content I don’t mean only text and photos, and by road labels I don’t mean the physical labels or navigation tooltips on a website. The message which the website wants to deliver to its users is the content — everything from writing tips, or well explained PHP tutorials for beginning web developers, to “make money online” suggestions for young mothers. The content defines your audience and only by understanding that audience one can shape or design the content in a way that works the best. The purpose of the website should define its design and structure.

Luckily the blog authors can relatively easy understand their audience, because they write or post about something they are truly passionate about, and it is most likely that their audience should be as well. Their audience is very similar to themselves and therefore the simple question to ask is “what would I like to know?” or “what have I found out recently, that other people might find useful?”.

Keeping the above consideration in mind, lets look at the current design of Blogherald.com and ask a few questions:

1. Blog Herald logo is a square with rounded corners and red background with a symmetric horizontal darker shade gradient with two lower-case oblique styled letters bh (an abbreviation from Blog Herald) in the middle. Square logo is aligned to the very left on the black header background without any padding from the header border. The icon is the only element on the whole website which uses gradient background or an oblique sans-serif typeface. Why such a decision?
2. Blog Herald logo title is right next to the logo icon and is set in capitalized sans-serif typeface with letter ‘o’ in theme’s red. Why exactly ‘o’? Is it because ‘o’ resembles a sphere the most? Use of the word Herald comes from the newspapers, so why was the sans-serif typeface chosen? Just below the title is the tagline ‘Blogosphere’s latest, daily’ and ‘Since 2003’ set in the same typeface, but in upper-case.
3. Related Network links in the top right corner are set in serif typeface without any differentiable styling (in color or with an underline) that would suggest that they are links. Each of them are separated by dots which are never used anywhere else on the website. Below the links is a description ‘Your friendly neighborhood blogosphere’ set in the same serif typeface but with cursive styling, which again is never used anywhere else. The current layout and positioning very weakly suggests that Blog Herald is one of the proud network members and doesn’t encourage the readers to explore the other sites.
4. Search bar is aligned right without any padding from the rightside border of the header background, even though there is plenty of horizontal space around it — enough for an input field label or a ‘Search’ button. This would also allow removing the obvious search instructions.
5. Main Navigation menu items are aligned horizontally bellow the header and are set in uppercase sans-serif typeface similar to the one used for the tagline, and are separated by lighter vertical lines. Although this font choice is good for the limited horizontal space and it ties well with the style of the tagline, in such combination (sans-serif + uppercase) it never appears anywhere else on the blog. The first two menu items ‘About’ and ‘Advertise’ are much less important to the readers than those items that follow and correspond to the blog’s content like ‘Editorials’, ‘Reviews’ or even more importantly ‘News’, which is currently placed only fifth.
6. Section headings use a slightly larger and uppercase serif font which is fairly different from the viewpoint of typography.
7. Post tagline is styled the same way as the rest of the content, and would much help the vertical rhythm and the scannability of the post listing if it was set a bit different than the rest of the content. Placing ‘Leave a Comment’ link right after the post title seems to be the most unreasonable design decision (yes, it is a design decision, because placing it there expects a certain user behavior or need). Having the ‘Filed under …’ information below the post introduction and the ‘Post a Comment’ immediately after the title is definitely unjustified.
8. Post related information contains the same link to all the articles written by the same author, which is already mentioned in the post tagline. Removing this link and replacing the ‘Filed under …’ information as suggested above would leave there only the copyright information which is repeatedly displayed after every post introduction. Why display it under every post, if it is also mentioned in the page footer?

Suggestions for improving the Blog Herald

These are just a few observations about the top part of the Blog Herald’s layout and an examination of all content elements including the column content and individual section pages would be required for a complete design analysis. Nevertheless, it is enough for creating a layout that would correct the design mistakes mentioned above:

Suggested Redesign

Unique theme color for each of the member blogs

Ideas behind the suggested design

Although most of the changes are obvious, here are some of the design features worth mentioning:

• Blog Herald is part of a blog network, therefore the top horizontal stripe which links all the network members would span across the full browser width, while each of the individual blogs would have the usual width (~70em) which is visually emphasized through the top and bottom borders of the main navigation. The slogan of the network placed before the links and the tabbed design of the network navigation distinctively shows that the site currently viewed is one of the members.
• A single theme color in each of the member sites would create a strong and unique brand for the whole network.
• Separated content navigation and general information links in the main menu put more emphasis on the unique content of this blog.
• Only two typefaces are used — serif font (like Georgia) for “important type” of content, and sans-serif (like Arial) for the body copy. Notice how the capitalized serif font is used consistently in navigation and for all the sidebar headings.

Conclusions

One should never criticize the design of a website on the grounds of visual liking or preference, but rather by how well the design enhances and delivers the content to its readers and viewers. Different content requires a different approach to presenting it in the way that is both accessible and easy to explore.

All of the blog authors want their readers to stay around and view more of the content they have produced. Unfortunately the format of blogs inherently makes the latest content to appear more prominent and buries some of your much beloved older posts deep into the archive pages. Although describing the solution for this problem would require another article, it is worth mentioning that sometimes just grouping and organizing the existing content, and removing the clutter makes the users much more comfortable with staying around.

Want to hear my critique of you blog/website?

Just leave a comment with your views on the blog design problems discussed in this article or about the web design in general. If more than three people post a comment, I’ll randomly choose three.