Web Pages with Multiple Views

What looks good on a big screen will not necessarily look good on a small one, but it isn't hard to make pages look and work great on a device without compromising the quality of the full screen design. Start with the normal page. Have document order in mind, using a few device-specific tips and doing a little extra testing is what it takes. If the HTML code is simple to understand and maintain, making a well-designed pages that can be used everywhere is a snap.

The best tool is media-dependent CSS. You can have acronym>CSS

that only applies to PC screens, print-outs, presentations, or with devices. When you have finished a design for one medium, optimizing for the next will merely be to add a few extra lines of CSS.

Styling for handheld

The same HTML page can be presented in many different ways for different media using CSS. The most efficient way to add code for the different media is to split up the style sheet into one for each media rule, that way it isn't necessary for a handheld device to download the projection style sheet, or the desktop PC to download the handheld stylesheet.

<!-- This stylesheet will be displayed by all -->
<link rel="stylesheet" href="all.css">

<!-- This stylesheet will only be displayed on PC screens -->
<link rel="stylesheet" href="desktop.css" media="screen">

<!-- This stylesheet will only be used for printing -->
<link rel="stylesheet" href="printout.css" media="print">

<!-- This stylesheet is for slide shows -->
<link rel="stylesheet" href="presentation.css" media="projection">

<!-- This stylesheet will be used by devices -->
<link rel="stylesheet" href="phone.css" media="handheld">

There are other variants that can be used, for instance a simple override for devices like this:

<!-- The styles used on all media -->
<link rel="stylesheet" href="all.css">

<!-- But there are some device-specific rules  -->
<link rel="stylesheet" href="small.css" media="handheld">

It is possible to have a list of media a style sheet applies to. This set of style sheets has one style sheet for all interactive media, and one style sheet for printouts.

<!-- A style sheet for the screen media -->
<link rel="stylesheet" href="screen.css" media="screen, projection, handheld, tv">

<!-- Some print specific rules  -->
<link rel="stylesheet" href="printout.css" media="print">

Screen

What the web page looks like on a computer screen. This is the most common way to browse the web. Web pages for computer screens are often "optimized" for a certain size (for example 800x600), and use tables for page formatting. Obviously this will not work well on a phone or other small devices, but this problem can be overcome by adding a few handheld rules.

Print

What the web page should look like when printed out. Many sites use a "Print button". This is hardly ever necessary with modern browsers that all support the print media type.

A print style sheet will typically:

• Hide screen-specific content like navigation and repeated elements,
• Take into account that print is a paged medium with fixed page size,
• Compensate for lack of color and for lack of interactivity, for instance by printing out the URLs that in other media would be clickable links.

While absolute units (points, cm, inches) should be avoided for other media, they may be appropriate for print.

Projection

The projection medium is used for slide show type presentations. The major difference with screen is that projection (like print) is a paged medium, while screen is a continuous medium (you scroll from the top to the bottom of the document with no interruptions in between). The projection type is only supported by Opera, and only on desktop.

Like print, projection is a paged medium. A web page can consist of many slides. Since projection is primarily used for presentations, extraneous information (like web navigation) is usually hidden to show only the main points in the presentation.

Handheld

This media type is used for devices. It is mainly used to compensate for the small screen size, and partially other factors, like color capabilities.

The handheld style sheet is primarily used to reposition and resize content to fit the small screen. Like projection, it can hide some content for a more efficient presentation.

The "handheld" medium is a relatively coarse mechanism, as "handheld" includes a very diverse group of devices from the smallest smart phone to the largest PDA. One future technology that will allow more precise customization is Media Queries. Opera is actively involved in the development of Media Queries.

TV

Used for TVs and similar media. In most cases the same styles as with screen would be used.

Aural

Used for spoken version of a web page. The CSS properties that are used (such as voice-family, volume, cue-before) are entirely different from the five visual media types above.

Other media

The list is not complete. There are four more media types defined in CSS2, and there might be more in the future. One of these, all, is the default value and applies to all media. The three remaining CSS2 media, braille, embossed, and tty, aren't currently used by any browser.

Document order

Designing a web page for multiple media is much simpler when you take in account document order. Document order is the order the HTML source code is in. In most cases a page is displayed by this order. Content early in the source code is displayed above content that comes later, and elements close to each other in the source code remain close to each other when displayed.

One exception is tables. Tables are displayed cell by cell left to right for each row going down. If the cells have a large size, the distance between the elements can be great, even if they are close in the page source. In the example below cell 3 is far from cell 4, and cells 1 and 4 are visually close even if they have the entire content of cells 2 and 3 between them.

While a PC screen may be large enough to have several columns of text, this is rarely feasible on a handheld device. For that reason tables will usually be reformatted to document order (that is, the text will be read 1-2-3-4-5-6).

The other exceptions to HTML being displayed in document order are the CSS features floats and positioning. Float moves content to the far left or right of its containing box. Positioning can move content to any position on the page or even stack content on top of each other, or hide some content behind other content. Float and positioning are rarely useful on a small screen, and, if you are not careful, they may result in the positioned element being moved outside the screen, forcing the user to scroll.

It is better to place the important content early, and to have the additional/extra code (like navigation sections) grouped so that it is easier to skip.

Pages: 1 2 3 4 print