.
Standards of Measure
Inches and Pixels Compared, etc.

Inches to Pixels:

Above measures are based on standard image resolution of 72 dpi used in nearly all web sites.

Maximum Browser Size
The chart below shows the approximate pixel measures of a computer screen at various monitor settings. The end user using an Internet web browser such as Explorer or Netscape may or may not choose to use the full monitor since most people like to leave some space for multitasking. Each user has their own preference for monitor resolution. Typically web sites are designed so that the entire horizontal width of web pages are visible without a need for scrolling sideways when the user chooses the common standard of 800 (horiz.) x 600 (vertical) pixels. This also assumes that such user will need to use his full computer screen. However, most end users who have 17 inch or larger monitors prefer higher resolutions whereby everything appears smaller and more fits on a screen.

Pixels
(Monitor Resolution Setting)
Inches
Horizontal Vertical Horizontal Vertical
640 480
(Standard) 800 600 11.1 inches 8.3 inches
1024 768
1280 960
1600 1200
1920 1080
Typically a web designer needs to plan everything for 800 x 600 pixels of space with no horizontal scrolling required by the end user. Thus the non-flexible content of each web page must have almost 800 pixels and not more. When you subtract 30 pixels to allow for the right scroll bar and left bevel of the browser you end up with 770 pixels to work with. Many end users prefer to use higher monitor resolution settings such as 1024 x 768. End users who use the higher monitor resolution settings typically still use only roughly 800 pixels of width for their web browser and use the remaining space for multi-tasking. On the other hand some of these high-res folks do expand their browser window to full screen. Thus web designers usually structure pages so they will expand or flex, especially where tables are used. Simple text has the ability to flex. But graphics do not flex in this way. Thus measuring page content is very much about sizing and placing graphic elements for a variety of end user monitor settings. To put it simply, each web page must fit into 800 x 600 pixels with no sideways scrolling required.

How Space is Used:
The standard 800 pixel wide x 600 pixel wide space allocated for web design is the gross maximum that every web designers choose to work with. The actual amount of this that is usable for the immediately visible portion of a page can be calculated almost exactly to 729 x 445 pixels based on the calculation below. But keep in mind that the horizontal space can be scrolled and is thus not really limited to any specific amount. Even so, most designers know that the vertically visible area at the top of each page (before scrolling down) is the most important area.

Width:
Microsoft Explorer, the most common web browser, has a left edge with tabs. This edge uses up 27 pixels. The right edge with scroll bar uses up 20 pixels. That's 47 pixels total. When subtracted from the 800 pixels, that means there is a maximum of 753 pixels width that the web designer has to work with in order to accomodate pages and any web site frame that may reduce width further. And of course, good design means allowing a bit of margin that reduces this amount further. Plan text at full bleed (running to left and right edges) will typically full all but 12 pixels on each side for a total of 24 pixels of side margins. Thus the net maximum width of any web page and optional frame must not exceed 729 pixels (about 10.1 inches).

Heighth:
Most computers use about the same amount of space for pulldown menus at the top of the screen. On a Mac this is 20 pixels. Indefault configuration, Explorer uses another 115 pixels of vertical space for the toolbar, URL section and default bookmarks. Explorer uses another 20 pixels of vertical space for the bottom edge including the status area. Web design programs typically impose 15 vertical pixels of top margin for each web page. That's 170 vertical pixels not available for web design. Subtract that from 600 and you get 430 pixels.

To put it simply:

A web designer has 729 pixels of horizontal width that can be used after allowing for 71 pixels of browser side edges and minimal margins. If he exceeds this amount in favor of folks that use higher than 800 x 600 monitor settings, anyone using 800 x 600 settings will need to scroll sideways. Only a tiny percentage of professional web designers design for anything other than 800 x 600 viewers.

A web designer has 445 pixels of vertical heighth to play with in the immediately visible portion of the page before the end user is forced to scroll down. This is essentially an area of immediate visual impact.

To visualize the above principle please click here to see a panel showing what a 729 x 445 pixel space looks like. If your monitor resolution is set for 800 x 600 pixel resolution, you will need to maximize your browser window in order to see the entire panel. If your monitor is set to a higher resolution you can reduce your browser window accordingly.

© 247 Web Pages

.