Web page resolution is a big deal. Many sites that teach web design have written about it, and depending upon who you believe, you should design pages for the lowest common denominator (640x480), the most common resolution (800x600), or the most cutting edge (1280x1024 or 1024x768). But the truth is, you should design your site for the customers who come to it.
Facts About Screen Resolutions
- 640x480 is not dead
While 640x480 is not as common as it used to be, this resolution is still around. Older computers, laptops with smaller screens, netbooks, and people who need larger fonts all use this resolution. Even if you choose not to design your page to this resolution you should test your site at this resolution.
- 800x600 is very common
Many website design guides recommend designing websites for 800x600 resolution. While this resolution is more common on the web at large, this may not be the case for your customers. If you’re planning on redesigning your website, take a few weeks to analyze your browser statistics to determine the most common resolutions used by your customers.
- 1024x768 is a lot more common
Screens are getting larger and 1024x768 is the other popular size to design for because many designers have monitors that support this natively. But this resolution can be fairly hard to read for many people. A 14-inch laptop monitor might support 1024x768, but the text is virtually unreadable. And laptops are very popular.
- 1280x1024 and larger are less common
Mostly you’ll see these larger resolutions on desktop computers, or high-end laptops. But often at these larger sizes, the customers aren’t browsing full-screen. So designing a site that’s wider than 1000 pixels is going to cause horizontal scroll bars on most screens.
Keep These Resolution Tidbits In Mind
- Not everyone maximizes their browser
If you determine that your customers browse at 1024x768, you may be building pages that require horizontal scrolling. Why? Because while they are browsing at that resolution, they don’t maximize their browser window, so 800x600 might fit their browser window better.
- Don’t forget the browser chrome (not the Google Chrome browser)
Browsers subtract as much as 50 pixels on the right and left, and 200 pixels on the top and bottom for their own use for things like scroll bars, toolbars, and the container of the window. This is called browser chrome. So if you create a table that’s 800 pixels wide, customers with maximized browsers on 800x600 resolution screens will have to scroll horizontally.
How to Handle Screen Size Based on Resolution
- Determine who views your site
Review your web log files, or put up a poll or a script to determine what resolution your readers actually use. Use the real-world browser size script to track your readers.
- Base your redesigns on your customers
When you redesign your site, build it based on the facts of your website. Do not base it on statistics of "the web" or what other sites say. If you build a site that fits the resolution your customers use, you’ll keep them a lot happier.
- Test your site at various resolutions
Either change your own screen size (Change Your Windows Screen Resolution or Change Your Macintosh Screen Resolution) or use a testing tool.
- Don’t expect your customers to change
They won’t. And placing restrictions on them just encourages them to leave.