Headers (not the PHP file “header.php,” but the content at the top of each web page) are the first things that load on any web page, and they are nearly as important as good content and good navigational design. It’s the first impression of your website, the first inkling visitors have of your style and website content even before they’ve read anything. Making your website’s header as impressive and lovely as possible is a priority!

My Personal Experience with Headers

When I was first learning how to do websites in the fall of 2003, the style for many sites I visited was the iframe style, which didn’t actually get much of a header–in fact, the site’s style was generally defined by the use of a big background image over which the iframe floated. What we would now call the “header image” was just part of the background image–it was usually a stylized-text version of the site’s name and purpose.

However, this began to shift over the next few years, as CSS became more and more popular for designing page styles. I began to see more designs featuring a long rectangular image at the top of the page, with columns of information displayed below. I began to design more CSS-based layouts around this time, which is probably one reason why most of my layouts tend to have that same 900 x 200-pixel header image at the top–I found something that worked and I stuck with it!

This was around the same time that header images started being called “header images” in the web design field. Having a beautiful image at the top of your page often meant that you got a bit more attention for your site, and to some degree it’s still that way today.

Headers Today

But web designers today are not confined to just having a specifically-sized glossy image at the top of their page. There are actually many ways to style a header these days, and I’ll go into some of those styles here.

Navigation as Header

Image credit: EvolvingOctopus.com

Some sites, with a more compact style, choose to have their navigational links as their header. They might have the name of the site in a pretty or cool-looking font, and then right out to the side of that, or even above their site name, they have their navigation links.

This is great for web designers who want a very clean look, or they want their navigation up and out of the way so people actually see their content rather than just web graphics up front. This is also fairly mobile-friendly design (I say “fairly” because sometimes the bar of links can be too long for mobile screens to display properly).

With this style, you want to be careful that your navigation links are larger and clearly visible so visitors aren’t hunting all over the page looking for your content. Making the navigation links have a background color or eye-catching graphic effect of some sort can draw attention to it better.

Content Samples as Header

Image credit: Riyuu.org, now GeekyPosh.com

Pictures? Featured content links? Author information? Yes, all this can go in your header if you want it. Some web designers will place little teasers relating to their content in their header, so that when your page is loaded, visitors get an immediate taste of what your site is about.

This is great for web designers who want to highlight certain sections of their website, or to connect their sites to their social networking activities. I’ve seen people use a feed of Flickr photos, post their latest Twitter status, have a selection of featured articles, or just have a beautifully-styled Author Info section that makes you want to know more.

With this style, you want to be careful that you’re not overloading your header section with a ton of information–just a few pictures, a few links, or a small blurb of info is all you need. Otherwise, your users will be suffering from info overload before they’ve even scrolled down the page!

Simple “Text as Header” Design

Image credit: Devlounge.net

I’ve seen a lot of designs going with this header style lately–just a CSS-styled site title, often in a cool font in a large size, and with a shadowed effect to the text. This style is minimalist, bold and to-the-point.

This is great for web designers who want their site’s name to be the most important thing on the page–especially if you’ve gone around the Internet and done a lot of advertising, you don’t want your visitors forgetting what site they’re on!

With this style, you want to be careful that you’re choosing a font style with some punch–“default” fonts like Arial, Verdana, or Times New Roman just ain’t gonna cut it. You want a great-looking font, since it’s taking the place of a header image. Using the CSS property @font-face, which I recently learned about by visiting this article and this article on Devlounge, you can make your simple text header really amazing!

Summary

Headers can be intimidating–you want to make your site look amazing on first impression, after all!–but don’t let yourself be locked into one style, thinking that’s all you can do. If you’ve thought of another way to organize your site’s header, go ahead and do it; let your Muse dictate. Who knows, you might come up with the next big Web trend!