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.

 

 

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 most offensive case is where different devices specify different default fonts. For example, a small handheld device may choose to use a sans-serif font while personal computer-based browsers use a serif font. Even between personal computers there are differences. The Macintosh uses Times Roman for a default font but Windows-based computers use Times New Roman.

 

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).

User Agent Constraints

The second set of factors deals with the user-agent applications (the web browsers) running on the target devices.

XHTML Element and CSS Property Support

As you may well be aware, there is considerable difference between personal computer web browsers when it comes to element and property support. The differences increase when you move beyond the computer platform to set-top boxes and handheld devices. For example, the WebTV platform does not support the <applet> element and the Palm web clipping platform does not support the <frame> element.

File Format Support

Non-traditional web devices may only support a limited set of file formats or features within these file formats. For example, the Palm web clipping platform only supports JPEG and GIF files (not PNG or animated GIF files). The WebTV platform is also limited on its native support (what it can do on the set-top box), but there are special servers that automatically convert many graphic file formats (such as PNG) to these formats before the user sees the web page.

Plug-in Support

A great deal of the multimedia on the Web is realized through plug-in decoders like Flash and Quicktime. While these types of plug-ins are well supported by the major browsers, the lack of memory in many non-traditional web devices prohibits their support. For example, the WebTV Classic platform only supports Macromedia Flash Version 1 and the Palm web clipping platform does not support any plug-ins.

Human Interface Device Constraints

The third set of factors deals with the way in which users interact with the device.

 

Mouse Support

You can feel pretty confident that anyone accessing your web page on a computer has a mouse, or something like a mouse, as an input device. A common feature of these types of input devices is that they control a cursor that can move from any pixel on the screen to any other pixel on the screen, moving over any pixel on the screen.

 

This type of input is not always available on some web devices. For example, on some set-top boxes, your users may only be able to use an up-down-left-right set of keys that moves the cursor in a grid pattern.

Key Support

Likewise, you can feel pretty confident that anyone accessing your web page on a computer has a full-function keyboard. This means that they can enter any alphanumeric symbol with relative ease.

 

This may not be the case on some web devices. For example, WebTV does not normally ship with a keyboard. Therefore, many WebTV users must use their remote control for entering alphanumeric characters – quite cumbersome, indeed.

Viewing Distance

Another important factor is the distance between the display and the user. As the user gets further away from a device, it is more difficult (and stressful) for the user to move a cursor to a small region on the screen.

Usage Models

In addition, the mode of the user may change as well. When the web device moves from the office to the living room, the user will change from an active, lean-forward, posture, to a passive, lean-backward, posture.

 

The device may also go from a single owner device (like a handheld device), to a single user at a time device (like a personal computer), to multiple users at a time device (like a television set-top box).

Strategies

So the big question is: how do you deal with all of these factors?

 

Well, the simple answer is that you do not need to deal with all of these factors all of the time. First and foremost, you need to identify:

 

            What you're trying to do with your Web page (your goals)?

            Who is your audience?

The answer to these two questions will help you identify which 'factors' you need to address.

 

Once you have identified which factors you need to address, you can determine which strategies or combination of strategies are appropriate to your needs.

 

There are three basic strategies for managing content that targets multiple devices (rather than just traditional web browsers that we looked at in the page and site design chapters earlier):

 

            Content selection

            Content generation

            Content adaptation

 

Each of these is described in the following sections.

Content Selection

The content selection strategy means that you have multiple versions of your web page, each version tailored to one or more devices or web browsers. 

 

This is the simplest approach from a technical perspective – all you have to do is determine which web browser is asking for your web page and deliver the web page for that browser. On the other hand, it will require that you author multiple versions of the same document. This can become a considerable maintenance headache if the number of files or the number of devices increases.

 

Content Adaptation

The content adaptation strategy means that you adapt an existing web page to meet the constraints of the target device.

 

This strategy is very common in the Web. AOL and WebTV both perform content adaptation using something called 'proxy servers'. Proxy servers intercept documents as they move between the servers originating the documents (often called origin servers) and the client devices. These proxy servers adapt and cache the documents before passing them onto the client devices.

 

Unfortunately, proxy servers are not always available and their autonomous processing may lead to less than desirable results.

 

Content adaptation can be as simple as converting image and audio formats into those understood by the target device (WebTV converts PNG images to the GIF file format, for example), or content adaptation can be as complex as changing the content of the document.

 

As an example of this, WebTV does not support frames in the set-top box, rather, the WebTV proxy servers convert frames into tables.

 

A similar approach is being taken by the Wireless Application Protocol (WAP) Forum, an industry group working with the World Wide Web Consortium to define a markup language and protocols for delivering web content to mobile terminals (like cell phones). The WAP architecture calls for 'proxy servers' that can convert between the HTML and XHTML languages into the WAP Markup Language (WML).

Content Generation and XSL Transformation

The content generation strategy means that you dynamically build a web page that meets the constraints of the target device.

 

Typically, you would have an XHTML template for each target device, and the content comes from a database. Today, each of these template-database systems uses a proprietary solution.

 

The World Wide Web Consortium has introduced a new technology aimed at solving this problem. This new technology, called XSL Transformation (XSLT), is a language for transforming one XML document into another XML document. This means that you will be able to use your 'sniffer' technology to determine which browser is being used, and then apply XSLT technology to generate the correct XHTML document.

 

While the tools are not quite there yet, you can get a taste of XSLT using Microsoft Internet Explorer.

 

 

In this exercise, you are going to get a taste of things to come. Specifically, you are going to use the World Wide Web's new XSL Transformation technology to convert an XML document into two different presentations.

 

1.       Run your text editor and type in the following: