According to 1024 x 768 was the most popular monitor resolution in January 2007. 53% of their stats used that resolution. That's a lot.
On the other hand, most Web designers use monitors that are even larger than that, in the 1280 x 1024 or even 1600 x 1200 range. (And if you have a 1920 x 1200 monitor, I hate you... :) According to 25% or more had a monitor resolution higher than 1024 x 768.
But you shouldn't be designing Web pages for yourself, but rather for your customers. If you don't have any access to your site's real stats, then using the stats at The Counter.com are better than nothing.
But wait! Is Your Browser Maximized?
According to people with 1024 x 768 monitor resolutions often run maximized, while people with higher resolutions do not. In fact, that has been shown in other studies as well. Small monitors (800x600 and smaller) tend to run maximized, while the larger they are the less likely it is.
My monitor resolution is 1680 x 1024 times 2 for two monitors - but I would never maximize my browser window across both windows, and I think I've maximized it across one screen once in my life.
But Wait, There's More - What About Browser Chrome?
Browser chrome is all that stuff that isn't the Web page in the browser. Like: scroll bars, title bars, tabs, standard toolbars, extra toolbars, and so on. So even if your readers do browse maximized, the available screen real estate is smaller than the resolution.
There isn't an exact correlation, browsers and monitors are different, but here is what I use:
• 640 x 480 = 620 x 310
• 800 x 600 = 780 x 430
• 1024 x 768 = 1000 x 600
• 1200 x 1024 = 1180 x 850
• 1600 x 1200 = 1580 x 1030
So What's a Poor Web Designer to Do?
As I said above, the best solution is to design for your audience. If they are using 800 x 600 monitors, then you can assume they are maximizing their browser window, and you should design pages that fit in about 780 x 430 pixels.
But since more people browse at 1024 x 768, it's a good idea to build larger pages - I prefer to design no wider than 850 to 950 pixels. I'm assuming that most people on higher resolutions are not maximizing their browser windows.
One trick to designing is to use a browser widths background image. This is an image that has the different widths marked out on it. I created a browser widths template for you. Feel free to download the image and use it for your page designs.
Another solution is to design your pages dynamically - and use a script to determine the page width. The JavaScript Guide at About.com has a great script to help you find the width of the browser window. His series even has an example for how to add an extra column to your Web page if the page width is above a certain amount. |
