Learn to Design Page Sizes Based on Monitor Resolutions

Decide How Big to Build Your Pages by the Resolution of Your Customers’ Monitors

Female photo editors discussing in office
Maskot / Getty Images

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 scrollbars 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 scrollbars, 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

  1. 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.

  2. 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.

  3. Test your site at various resolutions: Either change your own screen size (change your Windows screen resolution or your Macintosh screen resolution) or use a testing tool.

  4. Don’t expect your customers to change: They won’t. And placing restrictions on them just encourages them to leave.