A web page should fit my browser

Posted 09/22/2009 in: Interface design | 0 Comment | Permalink

Before starting the design of a web site, one of the first things to evaluate is what computer screen resolution our expected audience will be using when browsing the site. It is typical for first-time web designers to then design a web page to fit these dimensions exactly. This is a mistake.

A web page is not rendered in the full width or height of the screen. It is rendered within the content area—or “live area”—of a web browser. Each browser is set by default with some specific interface elements—such as the address bar, scrolling bar, tabs, etc. which limit the web page display to a smaller size than the screen resolution. It is typically difficult to evaluate exactly what the ultimate size should be because each user may have a different screen resolution, use a different browser, or have changed the browser’s default settings as well.

Based on W3Counter’s global web statistics, as of September 2009, about 95% of internet users browse web sites with a screen resolution over 1024x768 pixels. Because 30% of users actually use that resolution, we can safely say that a web page should be designed for that resolution for maximum compatibility.

The screengrabs below illustrate the default interface for the most popular browsers for Windows and Macintosh in a 1024x768 screen. For a web page to fit into the live area of each, it should have—

• a maximum width of 1006 px. (700 px. with an 18 px. margin);
• a height of 590 px. (if you want your content to fit without scrolling).

Mac OS X with Firefox 3

Windows XP with Firefox 3

Windows XP with Explorer 7