Monday, February 8, 2010

What is the best size to make a website?

As of 2010, the best size to design a website would be 975px wide.  As far as height, I would put your most important content no lower than 530px which is "above the fold", or the portion that can be viewed without scrolling down.

Here is why:

To date, the most popular screen resolution is 1024px wide by 768px tall.  Keep in mind that this information may be out of date in as little as 1 or 2 years.

As you have probably already noticed, when you open a browser window, you immediately lose a sizable amount of height due to the title bar, the menu, navigation buttons, tabs, and, often times extra toolbars such as google's or yahoo's search bar.  In my former career as a computer repair technician, it was VERY common to see one or 2 extra toolbars in addition to the default functions located at the top of popular browsers.  The most common anti virus programs like to install their own toolbars at the top of Internet Explorer, and have all too many times seen yahoo's toolbar being "piggy-backed" on top of several software applications.  Then, of course on the right side you almost always have a scroll bar which also removes some width from your common 1024x768 screen resolution

While visiting family, I found that the computer they used appeared to be a perfect representation of what I thought would be your average novice to medium tech savvy person's computer.  I noticed that almost every website I visited was just a little bit too wide!  As most web designers know, having a horizontal scroll bar is a big no-no!  I created this website to measure screen resolution of a web browser so that I could see how much "screen real-estate" their browser contained.  I was VERY surprised to find how little space there was!

Using the link above, the red box in the upper left corner shows you where a web page would "start".  When I opened it in Mozilla Firefox, I noticed that it immediately moves a web page about 5 pixels down and 5 pixels to the left.

I checked on my laptop, which is currently set at 1440px by 900px resolution and I have about 1400px by only 725px using my browser!  And this is with a minimum of toolbars and functions opened!  

Anywho, I hope this is of use to someone else besides myself.