Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

Toggle Open Guide Table of ContentsGuide Contents

Close Table of ContentsGuide Contents

Close Table of Contents

Cascading Style Sheets Part 6: Styling for Small-Screen Devices

Last updated Oct 17, 2003.

By Sarah Horton, author of Access by Design: A Guide to Universal Usability for Web Designers

How can you make a single web document accessible and usable across multiple contexts? Adaptation. Using adaptive design, you can modify document content and provide context-appropriate formatting to enable basic access and usability across contexts—without requiring multiple versions of a document.

Since paper is a static medium, adaptive design in the print context is about suppressing interactive elements and formatting the remaining elements for display on paper. The mobile context is far more complicated, primarily because small-screen devices are used for interaction as well as access to information. Additionally, mobile devices have many limitations—in particular, a small display area, limited input options, and limited device capabilities. That said, there are ways to apply adaptive design techniques to the task of designing for small-screen devices.

This is the last in a series of articles on using media style sheets to design for different contexts—specifically print and small screen devices. This article covers document design principles for mobile devices, as well as basic CSS techniques for designing mobile-friendly pages. Note that some mobile devices do not support author-supplied style sheets, and instead apply device-specific styles to all web pages. Others, like the iPhone, use screen styling and ignore handheld styles. There is no harm in providing a handheld style sheet. Just bear in mind that your mobile-friendly designs may or may not be applied to your pages.

Designing Source Documents

Many web designers work exclusively on the visual layer, working with tools such as Dreamweaver and GoLive to execute designs through a graphical user interface (GUI). When we work with this flavor of web authoring tool, we rarely, if ever, look at underlying code. In many contexts, this approach works—imagine working at the code level with word processing software to prepare reports or brochures!

But the documents we produce for the web have a more complex purpose and functionality than those we produce with standard desktop tools. A report or brochure has one purpose in life: to be read, most probably on paper. Web documents have multiple purposes, the most fundamental of which is to be read by software and accessed by users on different access devices.

Visual web authoring tools are more concerned with generating code that supports visual designs created through the GUI than with machine-readability and adaptation. Designing web documents that provide a good read when read by software, and that adapt gracefully to different contexts, requires knowledge of what’s under the hood of visual layouts. Despite claims to the contrary, the fact is that you need to be able to pop the hood and make adjustments to code so that pages run smoother and work more effectively in the web environment.

Pay Attention To Document Order

Document order is the sequence in which elements—such as branding, navigation, and content—appear in the document source code. Visual users on desktop displays are not likely to be affected by document order, other than indirectly by its impact on machine-readability, and therefore search engine indexing and findability. But other users are very much influenced by document order, including those who access web pages using small-screen devices.Small-screen devices, such as PDAs and mobile phones, have a... well... small screen, which is sometimes referred to as a viewport. Many small-screen browsers collapse multi-column layouts into a single column for easier viewing. The flow of elements in the single-column layout is defined by the document order. If elements in the code follow a logical sequence, this approach works. More commonly, however, source code is jumbled, with elements scattered higgledy-piggledy throughout the code, making the mobile web experience less than optimal.

A good way to experience the affect of document order is to view pages using Opera’s Small Screen Rendering (View > Small Screen), which applies mobile-appropriate styling to web pages (Figure 1).

Figure 1

Figure 1 Applying Opera’s Small Screen Rendering to article pages from The New Yorker and The New York Times illustrates the impact of document order on mobile browsing.

Note that, among other contexts, document order influences nonvisual access to web pages; learn more in the article Designing Pages for Linear Access.

Group Related Elements

Proximity and continuity are design strategies for conveying the relatedness of elements. Elements that are close to one another and are presented without interruption are perceived as part of a group. This is true for document design as well as visual design. Elements that are related should be proximate and uninterrupted by other elements in the page code. That way, they will appear in sequence when the page is displayed in a single column.

Put Important Content First

The inverted pyramid is an approach to communication, where the most important information is at the beginning of the page. In the mobile context, the important information is not branding or navigation. With as few as 120 pixels of display screen, content is the most important information, along with some basic navigation. Top-heavy pages that begin with branding and navigation require users to scroll and scroll and scroll before arriving at content. And when navigating between pages, users have little feedback that a new page has loaded since the visible area is nearly identical from page to page (Figure 2).

Figure 2

Figure 2 With very little content "above the fold" on small screen devices, users have little feedback to confirm that a new page has loaded. These screenshots are taken from the Opera Mini Simulator.

Code for Selective Display

Given the relatively small viewport of small-screen devices, users will not appreciate elements that are superfluous in the mobile context. Your mobile designs should not include multiple navigation systems, advertisements, branding, and other space hogs. Anticipate which elements will need to be suppressed in your mobile designs and code those elements for selective display. (What’s selective display? Learn more from the related article on selective printing).

Favor Text Over Graphics

Typical web pages require significant adaptation in order to be usable on small screens, and for flexibility, nothing beats good ol’ text. Unlike graphic text, real text scales, reflows, and can be read by software. Also, on small screens, graphics are generally reduced to fit the width of the screen, and text that is embedded in graphics is likely to lose clarity and legibility in the translation.

Build Simply And Well

Most small-screen devices have limited memory and processing power, and sport web browsers that are not as powerful or fully featured as standard desktop browsers. Most do not support scripting and plug-ins, such as JavaScript, QuickTime, and Flash. For the best performance on small-screen devices, stick with basic XHTML, and be sure to validate your pages.

Styling With CSS

Media style sheets are the key to offering appropriate designs for different contexts, including small-screen devices. Listing 1 shows how to use the link element to apply mobile-friendly styling to a source document.

Listing 1

<link rel="stylesheet" type="text/css" href="handheld.css" media="handheld" />

There are different schools of thought when it comes to defining media style sheets. Many designers code one style sheet to apply to all devices (media="all") and then provide additional styling for different contents, such as print and handheld (media="print", media="handheld"). In the first article in this series, I advocate creating a style sheet specific to each context (media="screen", media="print", media="handheld"). With this approach there is no need to override screen styling, such as unfloating elements to produce a single column layout, which results in a concise handheld style sheet that contains styling that is appropriate for the mobile context.

Use A Single-Column Layout

Many web designs use multiple columns to take advantage of the width of desktop displays. Because of the narrow viewport, most mobile devices cannot accommodate more than one column. When designing for mobile, use a single column layout so that users do not have to scroll horizontally to see the full width of the page.

Be Concise

File size plays an important role in mobile design because many users pay by the kilobyte for Internet access, and because connection speeds are often slower than with desktop computers. Also, with limited device memory, file caching is not guaranteed, meaning your handheld style sheet may have to load with every page. Therefore, keep styling to a minimum so that your designs are not too costly, either in time or money.

Provide Feedback

Most handheld users have no other option than to navigate web pages using the device keyboard. Generally this involves using the arrow keys to move among links and form controls. To help users know which control is currently receiving focus, use a visual indicator, such as border and color, to highlight the currently selected control (Listing 2).

Listing 2

a:focus
{
  border: 1px solid black;
  background-color: yellow;
}

Minimize Navigation

Most screen designs have extensive navigation options that allow users to move laterally across the sections of a site. While arguably useful in a large screen context, these extensive navigation systems are an impediment for mobile navigation.

A better approach for mobile users is to enable hierarchical navigation, where users begin at the home page and navigate to subsections, and then return home in order to explore to another section. Breadcrumb navigation works perfectly in this context because it allows users to easily navigate back up the branches of the information tree (Figure 3).

Figure 3

Figure 3 Breadcrumb navigation allows users to navigate back up the navigation hierarchy.

Hide Graphics

Graphics are not that welcome in the mobile context. On the one hand, not all phones can display graphics. But most importantly, graphics stress the weak points of the mobile context: they take a long time to load, require processing power to display, and take up precious screen space that is already at a premium. Many mobile browsers reduce graphics to fit the screen width, which often degrades the quality and usefulness of the image. And larger graphics require scrolling to see the full extent of the image.

In general, the best approach is to hide graphics in the mobile context. If a graphic contains essential information—for example, navigation links or site identity—use selective display techniques to include text-based equivalents that display only in the mobile context. (These techniques are described in the related article on selective printing).

Minimize White Space

With very few available pixels, the luxury of white space is not fully appreciated on small-screen devices. You are best off zeroing out margins and padding for your mobile designs. This includes formatting for elements that typically use white space, such as lists and blockquotes (Listing 3).

Listing 3

ul
{  padding-left: 0;
   list-style: none;
}

Use Basic Text Formatting

Small-screen devices do not have the typographic variety of desktop computers. With some devices sporting only one font, one font size, and no character formatting, you simply cannot rely on typography as a means for communicating information. In fact, the only way to reliably achieve typographic emphasis is to use uppercase. However, no harm is done in providing styling for those devices that do offer more options.

Since most devices have only one font, there is no point in defining font family. However, some browsers, including Opera Mini, do support bold and different text sizes, so go ahead use size and weight, for example, to style headings. When specifying size, use relative measures, such as percentages, keywords, or ems.

Resources

This article covers the fundamentals of document design and some basic CSS for creating source documents that adapt to small-screen devices. These concepts are illustrated in Example 1, which uses media style sheets to provide appropriate designs for screen, print, and handheld. Use the Web Developer Toolbar in Firefox to view the print and handheld styling.

For more about mobile design in particular, check out the following resources: