Eduka

News > Minimum width standard for web design

Eduka Minimum Width Standard for Website Design

Feb 2007

Background:

This research note is written to provide some consistancy when developing designs for websites.

Browser resolution statistics:

July 2006 W3C browser resolution Stats:

  • 800x600: 17% 
  • 1024x768: 58% 
  • higher: 19%


April 2006 boutell.com Stats:

  • 800x600: 8.92% 
  • 1024x768: 61.57% 
  • 1280x1024: 25.71% 
  • 1600x1200: 3.68%

Oct 2006 The Counter Stats

  • 1024x768: 56% 
  • 800x600: 22%

Survey of high traffic sites minimum widths*:

  • google: 676
  • yahoo: 950 
  • ninemsn: 1005 
  • amazon: 842 
  • ebay: 772

*note these sites viewed in IE 7 with no toolbars.

Conclusion:

Judging from these stats, 800x600 resolution still has quite a large percentage share. However, the majority of the big sites cater for varying larger than 800 resolutions. 

It is worthy to note that these high traffic sites' minimum widths are larger because they have a lot more content and ad space.

To make a definitive decision, we'd have to take in account the server stats, to see what our users resolutions are.

We would still like to cater for a minimum width of 800 since there are still quite a large percentage of users viewing in this resolution.

Recommendations:

We have based our decision with the browser resolution stats, current browser version stats and future trends in mind. A large percentage of users still use 800x600, a large majority use IE and IE 7 will replace IE 6 as the dominant browser version.
 
In IE 7 @ 800x600 resolution, with no extra toolbars, the maximum viewing area is 772px wide.
 
The following options are currently available to designers:

  1. 1. fixed width of 772px 
  2. 2. minimum width of 772px, larger resolutions will scale indefinitely
  3. 3. minimum width of 772px and a maximum width of textual content of 400px.

These options will of course become easier (and cheaper) when we no longer have to support IE 6 because IE 7 supports min-width and max-width attributes.

Pros and Cons:

1. Fixed width of 772px

Pros:

  • Easy to implement
  • Cheapest option

Cons:

  • Lot of white space in larger resolutions
  • Can look cluttered with sites with a lot of content

2. Minimum width of 772px larger resolutions will scale indefinitely
           
Pros:

  • Layout is flexible, looks good on larger resolutions
  • Scales to fit smaller resolutions

Cons:

  • Textual content becomes harder to read due to long line lengths
  • Minimum width is not supported by current dominant browser version (IE 6), would have to use JavaScript or css hack

3. Minimum width of 772px with Maximum width of textual content of 400px.

Pros:

  • Fits nicely in 800x600 resolution and larger
  • Textual content remains readable

Cons:

  • Currently hard to implement due to IE 6 lack of support for min-width/max-width
  • Would have to use hacks just for IE 6 - development time will be longer

Summary:

Due to the current limitations of IE 6, the best option is option one, fixed width of 772px for basic designs – designs with few elements, i.e. text and a few images.

For sites with a lot more content, it is best to offer a larger fixed width area like the high traffic sites mentioned above.

We recommend 900px to comfortably fit layouts with larger volumes of content.

In the future, when IE 7 becomes the dominant browser version we can move to option 3 as the standard.