Strategies for Handling Media Types

As we mentioned earlier, there has been an explosion of devices for connecting to the Web. As wonderful as this phenomenon may be, it places a considerable burden on authors (like you). No longer can authors write documents with expectations on how the content will be displayed. This is because each of these devices is a very different medium than the computer — the physical characteristics of the devices are different, the relationship between the device and the user is different, and the cost of using the device is different.

There are a variety of factors that we need to consider when developing our content and authoring our style sheets. Some of these we talk about in the following sections.

Device Constraints

The first set of factors deals with the differences between the target devices.

Physical Size of the Display Surface and Graphics Resolution

The physical size of the display surface, combined with the graphics resolution, significantly affects how much content can be displayed on the screen and how that content is presented.

	Low Graphics Resolution	High Graphics Resolution
Small Screen Size	Single Font Limited Text Icons	Many Fonts Limited Text Simple Graphics
Large Screen Size	Few Fonts Constrained Text Simple Graphics	Many Fonts Full Text Support Complex Graphics

The table above is a generalization of how the physical size of the display surface and the graphics resolution may affect what content you present to your user and how that content is presented. An example of a device that fits the 'small screen-low resolution' space is the current generation of mobile phones. An example of a device that fits the 'large screen-low resolution' space is the current generation of Internet-enabled television products (like WebTV). An example of a device that fits the 'large screen-high resolution' space is the personal computer. There are no products (that we know of) that fit the small screen-high resolution' space, although future generations of handheld devices may fit this niche.

Looking at the entries in the table, we will see that there are three general issues at stake: font support, amount of text displayed in a single screen, and graphics support.

The graphics resolution affects how many fonts can realistically be supported. If we look at the difference between any two fonts, we will see that fonts differ in the way in which pixels are drawn. If we have very few pixels to work with, we have very few ways of differentiating between fonts.

The physical display size and the graphics resolution affect how much text can be displayed. If the screen is small and the resolution is low, there are simply few pixels that can be used to draw text. For a small display, if you increase the graphics resolution you could increase the amount of text displayed by making the text smaller, but this is generally not a good strategy since the text will become harder to read. As the display gets larger, you have more 'real estate' to work with and can generally display more text.

Likewise, the physical display size and the graphics resolution affect how graphics are displayed. If the graphics resolution is low and a small display size, you have few pixels to work and you are probably left to working with icons. As the graphics resolution increases, you have more pixels to work with and are only constrained by how large you can make the images (which is bounded by the size of the display).

Differences in Fonts

Different device types are very likely to display fonts differently. There are three factors affecting fonts:

• Default font
• Font presentation
• DPI

The presentation of any single font may be different on different devices. If the vertical extent (the height of a font character), the horizontal extent (the width of a font character), and the white space (the space between characters) are not exactly the same, characters may word-wrap differently.

Finally, the DPI (or dots per inch) of the screen may also be different. If the DPI is not the same between any two devices, a 12- point font on one device will appear larger or smaller on another device. The Macintosh display has a 72 DPI resolution and the Windows-based computer display has a 96 DPI. This means that 12-point text on a Macintosh will appear significantly larger on a Windows- based computer.

Differences in Display Bit Depth

The display bit depth is how many colors can be shown on the device. If the device supports 24-bit color, 16.7 million colors can be shown. If the device supports 8-bit color, only 256 colors can be shown.

The display's bit depth is different than the bit depth of the image (see Chapter 5). The bit depth of the image is how many colors are in the image or the image's palette. If the image is a 24-bit graphic, that image may contain up to 16.7 million colors. Problems in display may arise if the image bit depth is larger than that of the display device.

Technology Side-Effects

Different target devices may use different technologies for their displays. While in this day and age, computer displays are generally comparable in terms of quality, there is quite a variance in legacy and leading-edge display technologies.

Looking backwards, most televisions are still based on NTSC or PAL standards. This means that the color space for these displays is not the same as the color space used on computers. In general, televisions tend to over-saturate pure reds, greens, blues, and cyans. This means you need to be very careful using large fields of these colors. Worse, color saturation varies significantly between television manufacturers. In fact, considerable consumer brand preference is actually based on the nature of the color (over) saturation. This also affects your ability to display images to consumers in which the color of the image is very relevant – such as in apparel advertising.

In addition, most televisions are still interlaced. This means that the odd 'scan' lines for images are draw first, then the even lines, and then the odd lines, and so on. This creates 'jitter' when you try and draw small straight lines: they appear to shake (or 'jitter') between one or more scan lines. This significantly affects your ability to display fonts that have any details (such as small fonts and serif fonts).

Looking forward, some televisions that support overlaying graphics on top of video do not have square pixels. On these systems, the height of a pixel is not the same as its width. This means that if you try and draw a square, it will look like a rectangle, and if you try and draw a circle, it will look like an oval.

In addition, some emerging display technologies are using fundamentally different chemistries and physics that result in different display qualities. Some displays appear brighter, some may have certain tints to certain color values, and others may have different persistency characteristics (some pixels stay illuminated for some time after they are supposed to change color).

Applying Margins to the Body Element
Beginning XHTML
User Agent Constraints