Avoiding Unpleasant Surprises

The amount of information that will fit on a computer screen is controlled by its screen resolution setting. Screen resolution, expressed in pixels, divides the screen into a grid of so many pixels across and so many pixels down. For example, 1024x768 is a screen resolution that creates a grid 1024 pixels across by 768 pixels down. When a shopper is using that screen resolution nothing wider than 1024 pixels or higher than 768 pixels will fit on the screen.

Of principle concern is allowing for the smallest likely screen resolution shoppers may be using and that is 800x600. At 800 pixels wide by 600 pixels high, minus 50 pixels for the scroll bar, those shoppers only support 750 pixels of content width in web pages or item descriptions. So, obviously it's best to avoid displaying photos in sizes larger than 750 pixels but there's more to it than just that. If your page includes frames around the edges or employs a columned or side by side layout, combined widths may produce unsatisfactory results when viewed on an 800 pixel wide screen.

Here's a template that looks well balanced and attractive when viewed with a computer set to display with a screen resolution (screen size) of 1280x1024:


When viewed by a shopper who has only 800 pixels of screen width, however, it will look like this:


Not to mention the loss of cosmetic appeal, those shoppers will experience a challenge reading textual content having to scroll right to read the end of each sentence, then scroll left again to read the start of the next:


So, before finalizing your web pages or item descriptions, it's wise to test them by simulating an 800x600 screen size. The easiest way to do that is to reduce your web browser window size to 800x600 pixels. To help with that you may use this page: 800x600.htm. If you are using a tabbed browser, right click on the link and choose "open in new window".

Incidentally, making the example template above work with both screen sizes would require either using smaller photos (the one shown is 750 pixels wide), narrower fixed width frame layers (the example frame layers add up to 144 pixels thick), or frame layers expressed in percentages so they contract and expand in width depending on screen size (with this example would need to disappear completely when viewed at 800x600). A compomise among those solutions is usually best, for example showing the photos at 560 pixels wide, fixed width inner frame layers at 95 pixels thickness, with one "filler" layer that expands and contracts based entirely on screen width available.

Text size is another setting that will be different for your shoppers. A line of text that might take up a certain amount of space on your computer could very well take up either less or more space on another. When composing a single line of text, such as a section heading, that's usually not something to be concerned about. But, if you have gone to a lot of trouble to carefully line up several sentences by use of the space bar and line breaks, that whole effort will backfire on you if the shopper has their computer and/or web browser set up to display text larger or smaller than you do.

It is wise before finalizing your layouts to test them with different settings for text size. Find the setting for text size in your web browser's tool bar under "View". Set it there to "Normal" or "Medium" and see how your presentation looks, then test its appearance one step larger and one step smaller than the normal or medium setting.

A closely related issue is the font (style of text) you choose to use. As you create a presentation if you use a stylish font and find yourself increasing or decreasing its display size to make it fit or to keep it legible, you're in danger. That's because many shoppers will not have the same fonts loaded on their computers as you do. When you use a font they don't have, that text will display in a different font which could be smaller or larger than the one you used.

Below are a couple of examples. I adjusted the display size of each of the fancy fonts so they are about the same; reducing "Lucida Calligraphy Italic" by 10%, increasing "Edwardian Script ITC" by 80%, and increasing "Monotype Corsiva" by 30%. Those size adjustments will also apply to whatever other font that is used by the shopper's computer when they don't have the one I used. In most cases what will be used then is "Times New Roman" so I've shown that underneath each of the fancy font examples. As you can see the difference in resulting display size could be serious.


There's no easy way to test your presentations for this potential problem so your best course of action is to only use fancy fonts that require the least amount of size adjustments. Or you might only use fancy fonts for content that isn't necessarily size critical, such as for section headings.

Ultimately, the best you can do to keep your presentations accessible to all shoppers, including those using dial up connections, is to always remember to add compression to your photos. With EAPH.com hosting you have tools available that will compress photos and allow you to compare the result of one or more different levels of compression applied to the original. If you do not see any important difference between the original and the compressed version, neither will shoppers. It's that simple - all you need to do is trust your eyes!