Sandcurves

First impressions count.  On your blog or website much of that impression comes from the header section.  Make sure you're catching some of the people landing on your page. 

We'll chat about aesthetics, usability, design and what features to include or leave out of your header.  Of course, a great deal of this content relates to having some control over your website's guts (CSS, HTML, and so on). 

Aesthetics - The art of having a good looking header

You're never going to design the perfect header that pulls everyone in.  Aim for specific groups.  How would you go about guessing a headline that appeals to any one particular group? 

You could do some testing, using tools like Google's Website Optimizer. 

I suggest there's a simpler way.  There's a group of people who like exactly what you like.  To attract this group make the website look awesome to yourself.  Simple as that. 

You need to realize that it's not a cope out.  I've never designed a website I'm fully happy with, and so I keep tweaking trying to make it look better - to me.  I've still got a long way to go, but I enjoy the learning process.  Commit to it 100% and soon people will let you know that your blog is looking sharp!

If you don't have time to read the whole post, I think it's the most important take home message of the whole blog post - create a website header that you love. 

Usability of the header

You could use various testing tools to see how visitors move through your header. 

I see three aspects of your header as being important with reference to usability - i.e. how easy it is for readers to use your site, based on what's in the header. 

Firstly, can users find your content with ease.  I've seen many websites/blogs were this is a serious issue. 

Secondly, related to the first is getting around your website.  If you've included some navigation within the header section, you want to make sure that the user will be able to see that it is your sites navigation. 

If you've got to many links, consider grouping them under a main links and using drop down menus.  Here's an example [opens in new tab]. 

The third aspect to usability I'll mention is browser compatibility.  This is obvious, but it's a hard one.  I'll discuss that more in future blog posts.  These days it's not only good to check all the popular browser, but also with smart phones. 

Header Features - the nuts and bolts of your website's header

What you decide to include in your header is up to you.  You'll have to weigh up the pros and cons.  Here are 7 things you'll need to give some thought. 

1. The actual title - of course. 
2. A picture and/or logo.  A picture can also be a part of the background, such as a texture. 
3. A tag line - which I think is crucial.  Personally it's always what I got to first to get a clue about what's happening in the site. 
4. Navigation, as we've mentioned before.  I think it's especially useful to have internal links to an 'About' page and perhaps a 'Contact' page as well.  You may also want some external links such as your twitter url.  And then there are also the RSS feeds. 
5. You could have a search box.  If you have a site like mine - with lots of different stuff going on, it's a good idea.  You could implement it yourself, if you're happy coding the scripting involved (and the time) or you could stick in a third party search tool, such as Google's Site Search. 
6. If you're building an e-commerce site, you may want to put payment options right up in the header. 
7. Ads - the header's at the top, but many people on the web hardly even look at the header, so your ad is likely to simply get bypassed.  Some big sites, such as Problogger use ads within their header.  On the flip side, to many ads can discredit your blog entirely.  Make it look sharp, and keep the ads to a minimum within the header.  I'd rather get the traffic and worry about how I'll monetize it later. 

The Header's Design

As I said at the beginning, the test you're looking for is how professional/attractive your blog looks to you. 

You need to balance all the features you plan to include without making the header into a crowded mess.  Here are some aspects of design to consider: 

• How big do you plan to make the header.  Too big and it puts people off, to small and your website goes unnoticed.  Too normal, and you'll also go unnoticed. 
• Background - Do you want to stay with plain white (not a bad idea) or have color, texture or images.  Remember that images cost you a lot more in load time than a little HTML, so if you want to use textured images, optimize well. If it will work with a repeat (a think picture that you repeat many times over the width of the page), that's one way to keep images small. 
• Related to that is Flash.  I've never worked with flash, and don't intend to start any time soon.  Keep the use of flash to a minimum.  Your title itself can be HTML (probably using an '<H1>' tag).  You can style it with CSS and use interesting fonts if you like.  If the title's an image, make sure you use a good 'alt' attribute in the image tag. 
• Your site's title is usually also a link (to the home page).  Links on your site usually have some behavior when the user's mouse hovers over them, such as an underline (like I've done here) or a change in color.  Make sure that you reset this for the page title.  For example, perhaps all your links in the page get an underline ('text-decoration:underline').  Then, for the header you may want to clear that ('text-decoration:none') so that your title doesn't do funny things you didn't intend. 
• Navigation - Make sure that it's clean and easy to work with, as we mentioned under usability.  You can see the navigation I've used in Sandcurves (at the time of writing) also has slightly different hover behavior to the rest of the page. 
• Most importantly, think of the overall design.  Think about what placement is both appealing and useful.  Think about how you've trapped space and what attracts the users eye.  You want a design that attracts a reader, but doesn't hold them there - the page content is where you want them to go.  Think invitation, don't think megaphone. 

I thought I wouldn't have much to write about on this post, but it turned out to be a heavy one, and I left out a lot of my thoughts on it.  It struck me what a huge topic it really is.  I'll try to cover sidebars in my next post, in somewhat of a similar vein as this post, but since a lot of the design and usability is the same, hopefully it will be easier to get into. 

Please add your thoughts - I'm not a designer - simply my thoughts. 

« Older Post  |  Newer Post »