Test page optimization with every update

Optimizing your pages right from the start can help ensure that your site design and images support fast page load times, and that the site's development is smooth and efficient. Whenever you add anything to your web site - new content, new images, or new web pages - check that content's optimization to help keep the site streamlined. If you're not yet familiar with web site optimization, see Chapter 11, Web Site Optimization.

Document Weight and Load Time Tools
Some HTML editors include features that tell you a document's weight, or a page's load time at various connection speeds, and most image editing software products indicate file size load times at various connection speeds.

There are also free online tools that calculate document weight, composition, and page load times, and even offer recommendations for optimizing web documents. Siteoptimization.com's helpful Web Page Analyzer is one such tool.  

View pages on a variety of displays

You may find that your beautiful design, which is wonderfully contrasted on an LCD monitor, is impossible to read on a CRT monitor, and completely unusable on alternative devices. Different displays will not always interpret your site's design and colors consistently, so it's worth testing your initial design, as well as the site's ongoing development, in a variety of displays.  

View pages on different screen resolutions and with various color settings

Some HTML editors provide a feature that allows you to check your pages at various screen resolutions and with a range of color settings. Similar tools can also be downloaded as plug-ins for some browsers. For example, the highly recommended Web Developer Toolbar extension for Firefox includes a customizable window resizing tool, among many other useful features. (For more on Firefox's tools for web developers, see Chris Pederick's article, Web Developer Extensions for FireFox and Mozilla.)  

Consider Nonstandard Resolutions
Screen display sizes may or may not reflect the actual dimensions of the viewable web page. Many users don't expand browser windows to fill the entire screen (especially on larger monitors), and various toolbars and side panels can take up portions of the screen width and height. For example, on an 800x600 display, a browser that has a side panel and a couple of custom toolbars across its top would display only 500x400 pixels of a web page - less if the browser window isn't maximized. Be sure to conduct testing that accounts for this wide range of variability - not just the standard maximum screen resolutions. Table 14.1, which shows screen resolutions of various devices, and Table 14.2, which shows the color depth settings of different displays, should help your testing.

Table 14.1. Typical screen resolutions and displays (in pixels)

Computer displays	640x480, 800x600, 1024x760, 1280x1024, 1440x900 (iMac G5 17" display), 1680x1050 (iMac 20" G5 display)
WebTV/MSN TV	544x383
PDA, Pocket PC with Windows Mobile, smart-phones	240x160: Palm; 320x240: Palm, Pocket PC with Windows Mobile pre-2003, v2; 640x480: Windows Mobile pre-2003, v2; 320x320: Palm OS smartphone

[a] Lisa Gade, palmOne Treo 650 Palm OS Smartphone, Mobile Tech Review (December 10, 2004).

Table 14.2. Typical display color depth settings

Computer displays	Newer displays: 24-bit, 32-bit, 65,000 colors, 16,777,216 colors; Old displays: 16-bit, 256 colors, 65,000 colors
PDA, Pocket PC with Windows Mobile, smart-phones	Pocket PC: 16-bit, 65,000 color screens; Old PDAs: 8bit, grayscale

[a] Browser Statistics: What Is the Trend in Browser Usage, Operating Systems and Screen Resolution? W3Schools (January 2005).
[b] What is a Pocket PC (PPC)? What models are out there? Mobile Tech Review (no date).  

In addition to the displays mentioned in Table 14.1 and Table 14.2, there are standalone tools - such as BrowserCam, an online subscription service - which provide screenshots depicting the way your content will appear in a wide range of screen resolutions and browsers.