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:

Example 1: Suggested redesign.

Example 2: 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.

The show is recorded live every Friday evening at 21:00 EST using the TalkShoe recording platform. It follows the round table discussion format where apart from the panel of guests also any of the listeners can call in and have their own say about the topics being discussed.

There are already five episodes available that you can download and listen to.

This week’s panel members were Ronald Huereca, Andrew Rickmann, Rob White and me (featuring the most wonderful sentence structures and wording at 4:00 in the morning; I was so nervous at the beginning). Topics discussed include: usefulness of pingbacks/trackbacks and their presentation (check out the yet-to-be-released Comment Sorter plugin); content theft and spam blogs (splogs); two new plugins by Sony; and the regular WordPress Tips of the Week by all of the panel members.

Homepage (and blog): http://www.wptavern.com/wordpress-weekly
WordPress Weekly on TalkShoe: talkshoe.com/tc/34224
RSS feed: recordings.talkshoe.com/rss34224.xml

• Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8 by Aaron Gustafson,
• From Switches to Targets: A Standardista’s Journey by Eric Meyer.

To me the idea of browser targeting seems absolutely absurd, and reasons for that are so many that it will require another post to explain them all in detail. Here are just a few.

Which Browser, Which Version, What Targeting?

Browser targeting through a meta tag inside the HTML <head> is the strategy proposed by Microsoft (developed together with the Microsoft Task Force from the WaSP) to deal with the forward-compatibility of their browsers. Essentially this means that if a website is developed by following the W3C recommendations, you would still have to add: <meta http-equiv="X-UA-Compatible" content="IE=edge" /> to the HTML, so that IE 8 renders it according to the standards.

If previously you could develop everything by following the standards and only then add tweaks for IE (through conditional comments), then now you will have to not only do that, but also add an extra “conditional comment” (in a form of a meta tag), just to say:

“Dear IE, please use the standards if IE=edge, but if <!--[if lt IE 7.]> this makes sense to you <![endif]--> then fix-ie.css, while if <!--[if lt IE 6.]> you're still used this old <![endif]--> read this crapy-old-ie-fix.css“.

Therefore, browser targeting would encourage developers to write for browsers and even specific version of certain browsers, instead of adhering to the standards. Sure, it might be a dream for some developers to design a site for a specific version of IE, Gecko, Opera and WebKit rendering engine, and then forget about it. But such ability is also a huge contradiction to the reasons we need Web standards in the first place.

Microsoft’s requirement of an additional code for enabling the “standards mode” will punish those who have actually built their sites according to the standards in the first place, and applaud to those who didn’t. Is this fair?

Conclusions

We already have a Document Type Definition (DOCTYPE) for specifying the version of HTML markup and Cascading Style Sheets used in a document. Why do we need an extra Preferred Browser Version Definition (BROVER)? This would be a double standard — browsers would have to consider not only the DOCTYPE, but also the preferred BROVER, which would result in an inconsistent rendering among different browsers. Absurd.

What do you think? Have you used any IE CSS “hacks” outside the conditional comments, that could potentially break the site in future? Do you know any CMS software which could suffer from the IE going the standards way?

Further Reading: Compatibility and IE8 by Chris Wilson at the IEBlog.

Lets begin with the Boagworld — a weekly audio podcast by Paul Boag and Marcus Lillington discussing the issues of web design, development and related news. Over 100 (and counting) episodes of the Boagworld are much more than just the Web design and development 101 course for someone starting out on the Web — it is The Late Night with Paul and Marcus for everyone involved in the web design.

Home page (and blog): www.boagworld.com
Feed URL: http://feeds.feedburner.com/boagworldpodcast

Every page on the web can be viewed as a single document. Hypertext enables linking and organizing them into groups and sets, which requires that each document has a clear purpose and structure.

Domain names are unique identifiers of those different groups of documents and are the broadest description of their content. Therefore usually they already include the name of a business, person or product (I will refer to them as ‘logos’).

Overall there are three definite ways to describe the unique content of each page:

1. URL of a document,
2. <title> tag in the header of a document, and
3. <h1> tag as a part of a document.

Usually both URL and <title> tag already contain the name of a logo, therefore it is unnecessary to include it in every page as the most general description of that particular document.

Good example would be a news site, such as news.bbc.co.uk which already has the logo and the most important keyword ‘news’ included in the URL. Although ‘news’ is a subdomain of bbc.co.uk, it clearly describes the content that can be expected.

The <title> tag should be more descriptive of the kind of ‘news’ this website is to offer. Currently news.bbc.co.uk uses ‘News Front Page’ which could be definitely improved to better describe the content of the ‘Front Page’.

For blogs and business websites the <title> tag should include a name and a slogan or a short description of the organization or person. Front page is the only place where the logo could be marked-up using <h1> tag because it is the entrance, the starting point of a website.

According to The World Wide Web Consortium (W3C):

A heading element briefly describes the topic of the section it introduces. There are six levels of headings in HTML with H1 as the most important and H6 as the least.

Every section, however, is a specific part of a website with a clear purpose and message which deserves to have a separate and descriptive title. Logo should be included at the end of a <title> tag content together with the main heading of a particular section, which also has to be a part of URL in a human readable form (not something like id=123).

Title of a book repeated before every section of a book seems unreasonable to most of us. And the web is just like a book, but with links instead of page numbers.

Suggested Reading

• W3C Tips for Webmasters, Use <h1> for top-level heading
• Andy Budd, Quick Quiz: H1′s and Logos
• Dan Cederholm, SimpleQuiz › Site and Page Titles › Conclusion
• Chris Pearson, The Definitive Guide to Semantic Web Markup for Blogs