homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderators: not2easy

Site Graphics and Multimedia Design Forum

How do we determine the size of an header graphic
header graphic determination

5+ Year Member

Msg#: 3451939 posted 11:57 pm on Sep 15, 2007 (gmt 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]



10+ Year Member

Msg#: 3451939 posted 3:34 pm on Sep 17, 2007 (gmt 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!


5+ Year Member

Msg#: 3451939 posted 12:57 am on Sep 22, 2007 (gmt 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.


5+ Year Member

Msg#: 3451939 posted 4:54 am on Oct 2, 2007 (gmt 0)

It depends on which resolutions you are testing

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved