Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

How do we determine the size of an header graphic

header graphic determination

11:57 pm on Sep 15, 2007 (gmt 0)

New User

10+ Year Member

joined:Sept 15, 2007
posts: 5
votes: 0


How do we determine the size of an header graphic? I mean what width by what height?

All too often this is an issue that bugs me again and again when I outsource graphic design.

Does the size of the overall layout determine the size of the graphic header?

I can't determine the size of the of layout at all through the body tag.


[edited by: jatar_k at 12:07 pm (utc) on Sep. 16, 2007]
[edit reason] no urls thanks [/edit]

3:34 pm on Sept 17, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Apr 2, 2004
votes: 0

Great question!

Header graphics should require a lot of thought as they are the "first" thing people usually see on the screen.

Does the size of the overall layout determine the size of the graphic header?

Yes and no. Potential screen resolution of your viewing audience should determine the size of your layout. There are still 15% to 25% of monitors out there set at a 800 X 600 pixel width/height (depending on who you talk to). A majority are set at 1024 X 768. also with the advent of widescreen laptops you are looking at 1280 X 800 screen resoulution or higher.

This means that as far as width, you should probably keep your headers (and overall layout) at somewhere between 750 and 800, but you could probably get away with 850 to 900 without peeving off too many people. Most major websites still have layout widths of 750 to 800 unless they use a "floating" width which is set as a percentage rather than a fixed number of pixels.

As far as the overall height here are some things to keep in mind...

A good rule of thumb is to experiment with keeping the most important information of your website "above the fold" meaning, if there is something your REALLY want them to see, make sure they can without having to scroll down to see additional information.

I usually go about 450 to 500 pixel in height for the overall layout with "above the fold" content. Of that 450 to 500, I usually don't go over 150 to 175 pixels for a graphic header. However, websites are like snowflakes; no two are exactly alike, so you shouldn't let a fixed number limit your creativity.

A lot of the space needed for your header will be determined by the information your need to have at the top. Some clients will want a biger logo at top or every phone number, mailing address, and email address they've ever had. Site navigation also usually appears at within the header in more conventional design. Readability, usability, and creative presentation all factor into what needs to be in the header, so keep an open mind.

Also, don't forget to look at your page in multiple browsers at multiple resolutions and try to find a happy medium that satisfies the client and audience.

Hope this helps!

12:57 am on Sept 22, 2007 (gmt 0)

New User

10+ Year Member

joined:Sept 22, 2007
votes: 0

I have my site width set to 875. I tested a few different PCs to see how it looked. I think the "age" of 800 width resolution will be coming to an end soon :) but for navigation's sake, it still looks better around 900. I think 875 just works with my layout. Once you decide on the page width, THEN its time to fit the header.

My header height is a little larger than I would like, but I wanted a lot of info up there to grab attention as soon as you enter the store. I like what was said about keeping info above the fold. I try to get the "heavy hitting" content in front of the customer without them having to scroll.

4:54 am on Oct 2, 2007 (gmt 0)

New User

10+ Year Member

joined:Oct 2, 2007
votes: 0

It depends on which resolutions you are testing