Designing a header

Posted October 22nd, 2008. Filed under Sandbox

For the purposes of this article, I am defining the header here as the top-most portion of the blog stretching from left to right across the entirety of the browser.  The header represents a site’s dashboard — this is where users will turn for the major static navigational elements they expect to find on every website.  A header should facilitate, in a very general way, the goals of a site while satisfying visitors expectations.  So, we have to ask the questions — what do we want to give our users?  What do we want to get back from our users?  My answers to these questions follow:

I want to give: relevant content on demand; easy and self explanatory yet attractive design

I want back: frequent and interested visitors and readers

Content on demand

My number one goal is delivering quality content to my visitors.  The first and most obvious way a blog delivers content to visitors is via actual blog posts.  Posts are the vehicle by which a blogger expresses something to a reader.  Many visitors, however, arrive at a blog not to passively listen (read), but to demand a piece of content.  This demand is usually met in one of two ways - archives and searches.

Archives are a topic I will cover in some depth later.  For now, I will just say that I do not think archives belong in the header of a blog design, so we can move on…

…to search.  Searching is the primary method visitors will use to locate content.  As such, a search box should feature prominently towards the top of a site’s design.  Jumping ahead a bit, the heat map image found a bit further along in this post suggests that the search box may be the only part of the header that visitors look at frequently.  (Teaser: I have an interesting idea on maximizing the utility of a header search box.) Styled search boxes are extremely popular, and while I do like many of these, I feel a search box needs to be instantly recognizable to visitors.  Remember, we are after simplicity and intuitiveness.  Therefore, for this design, I will slightly stylize the search box, but nothing extreme or radical.

Attractive design

Header images are, again, popular.  Properly used, a header image provides character and a sense of branding.  Header images do not, however, lend themselves to simplicity.  In addition, I am actually looking to minimize the use of graphical elements as design elements.  I will not use any major images or backgrounds in the header.  Text is preferable but can be a boring.  The compromise I will make is a small text image in the header.  Using an image instead of straight text will allow me to add a bit of character.

The decision to use only a small graphic in the header will allow me to honor another personal preference - maximized screen real estate dedicated to actual content.  I will shrink the header to as small as I can get it without sacrificing accessibility and whitespace.  Another advantage of a minimized header is that I can squeeze a little more of the content area into the all-important upper bar of the F-pattern.

F-pattern heatmap

F-pattern heatmap

Notice, the heatmap suggests most users don’t even look at the header in any meaningful way.  This is another good reason for a minimalistic header design.  I suspect visitors tend to ignore the header because they have expectations about what is in the header.  Familiarity allows for less attention to detail.  A good comparison is driving — when driving on unfamiliar roads, you tend to pay more attention to roadway signage; closer to home, you tend to ignore signs since you know what to expect (My father, an insurance agent, told me once that accidents tend to happen closer to home because of this same lack of attention to detail caused by familiarity with one’s surroundings).

Building a readership

I find it useful to measure readership through two metrics — hits (visits) and subscriptions.  Without speculating on exactly how many people actually use RSS, I’d like to think that hits happen because of a combination of quality content and a solid base of subscribers.  Since subscribers are such an important metric to me, I will feature subscription links and options in several locations.  The header will be one such location.


I’m working now to make changes to the design of http://sandbox.kwjr.com based on these ideas.  I’ve already applied the color scheme discussed in a previous post.

Note: This is the fourth in a planned series of posts detailing the step-by-step development of sandbox.kwjr.com.  For all such posts, follow this link.

Leave a Comment

CommentLuv badge