BitWareSolutions

Early History - Timeline - Changes - Statistics - Page Width

Page Width

Screen Resolution

Approximately 91% of today's computers support screen resolutions of 1024 x 768 or higher and 8% run at 800 by 600. Mobile devices currently account for less than 1% and generally support SVGA at 800 x 600, VGA at 640 x 480, and QVGA at 320 x 240. Making allowances for a 19 pixel scroll bar and possibly an additional 33 or 41 pixels for the buttons on the Microsoft Office toolbar, we can create the following table:

Available Page Design Width
Screen Resolution Scroll Bar
(19)		 Small Buttons
(19 + 33)		 Large Buttons
(19 + 41)
1280 x 1024 1261 pixels 1228 pixels 1220 pixels
1024 x 768 1005 pixels 972 pixels 964 pixels
800 x 600 781 pixels 748 pixels 740 pixels
640 x 480 621 pixels N/A N/A
320 x 240 301 pixels N/A N/A

Printer Resolution

The default Internet Explorer printer settings are portrate with 0.75 inch borders on the right and left. Unless the user modifies the defaults, this leaves a print area that is only 7 inches wide. I've never been able to find out why, but the conversion of screen resolution to printer resolution is 96 pixels per inch. The following chart shows the maximum screen widths that will print properly at the various printer settings.

Printer Widths
Portrait Landscape
3/4 inch margins 672 pixels 912 pixels
1/4 inch margins 768 pixels 1008 pixels

Page Width Solutions

Variable Page Width

One way to handle all of these different page and printer widths is to let the page automatically expand to the size of the browser. The minimum page width is then determined by the widest element on the page. Keep your graphics small and your page will display properly on small screens and automatically expand to fit the entire screen no matter how wide it gets. Variable width pages work well on narrow screens but they are difficult to read on wide screens.

Readability

"The ideal line length for text layout is based on the physiology of the human eye... At normal reading distance the arc of the visual field is only a few inches, or about 12 words per line . . ." Web Style Guide - Basic Design Principles for Creating Website Patrick J. Lynch and Sarah Horton 2nd edition, page 97.

Fixed Page Width

You can design your page to fit inside a table with a fixed width. This will keep your text columns from becoming too wide and difficult to read. Fixed width pages work well on the screen width they are designed for, they waste space on wider screens, and are almost impossible to read on narrow screens because you have to scroll sideways to view the page.

The BitWare Solution

All you have to do is design multiple pages, one for each screen width, and have the computer automatically decide which one to display. This answer sounds simple enough. Designing the multiple pages isn't that hard, but having the computer "automatically decide" requires Variable HTML. The remainder of this tutorial will explain the concepts used by BitWare Solutions to accomplish dynamic page designs.

Early History - Timeline - Changes - Statistics - Page Width

North East, Md Chamber of Commerce


Elkton, Md Chamber of Commerce


Cecil County Chamber of Commerce


Harford County Chamber of Commerce