Pocket-Sized Design: Taking Your Website to the Small Screen

by Paul Hardy

and Kelly Staples

Among the many websites that are out there, few are standards-compliant. Among those few, only a handful sport style sheets adjusted to the needs of handheld devices. Of those which do offer styling for handhelds, not all will fit the smallest, lowest-resolution screens without presenting the user with the ultimate handheld horror: namely, horizontal scrolling.

The Opera browser runs on handheld devices of all screen sizes and resolutions, some of them only 120 pixels wide. We know someone that works for the company that produces Opera, so we can offer a degree of insight into the functions of Opera for handhelds.

In this article, we've prepared a set of general suggestions for creating a handheld-friendly style sheet, along with a few Opera-specific pointers that you may find useful.

The Constraints

The main limitation of a handheld device is the small screen, which may also lack a mechanism for horizontal scrolling. Input is often with a stylus, not a mouse. Downloading to the device is likely to be both expensive and slow, the processors are slow, and the memory is limited. A lot of users may therefore choose to turn off in-line image loading.

Now, what do these limitations imply for the designer?

Scaling it Down

Even if the screen resolution of devices increases with time, the physical width will not be much wider than your pocket. The most significant implication is that you can't sensibly fit more than one column of text on the page. You also want that column to be as wide as possible, so that the column of text doesn't turn into a ragged-right poem.

First off, avoid using pixels for anything larger than 5px (really!). Pixel sizes larger than that will scale badly, so use ems or percentages for larger sizes.

Reduce margins, padding, and border widths to suit the small screens. 3em before a heading is perfectly reasonable on the screen, but it is excessive on a handheld device. Wide borders should be slightly narrowed and the padding adjusted to match. In some layouts it helps to reduce redundant borders and spacing; they will seem squeezed-in on the smaller screens.

Large text looks awkward and eats up a lot of room on small screens. Large type, therefore, should not be larger than twice the size of paragraph text, and there shouldn't be very much of it. Small type should also be kept closer to paragraph size than on the desktop.

Keep the text blocks as wide as possible by using only small amounts of horizontal spacing. 1em of indentation is a lot on devices with narrow screens, so in most cases, margins and padding in the horizontal direction should be no more than 1em. As percentages scale with the width of the display, specifying a margin in percentages instead of ems will work well on a wide variety of screen sizes.

Linearizing the Layout

Linearizing the page into one column works best when the underlying document structure has been designed for it. Structuring the document according to this logic ensures that the page organization makes sense not only in Opera for handhelds, but also in non-CSS browsers on both small devices and the desktop, in voice browsers, and in terminal-window browsers like Lynx.

Assuming that you are using CSS for your layout, collapsing the layout into one column is fairly simple: just leave out or override the rules that add floating and absolute positioning behavior. If you are using tables for layout, make the cells behave as a sequence of blocks by using:

The top of the page is prime real estate; you do not want the reader to get bored scrolling to the content. Therefore, minimize the navigation and decoration at the top. A logo and one or two small navigational elements, such as a short navigation list, breadcrumbs, or a search input, should be enough. Long navigation lists, advertisements, and other marginal content should go after the main text. For most layout schemes, this corresponds to putting it in the right sidebar (as opposed to the left) for desktop layouts. A List Apart 's XHTML structure is excellent in this respect.

Inessential navigational elements should be hidden using display: none . For example, if you are using dynamic drop-down menus across the top, make the menu's title a link to that section of your website and hide the menu of subsection links. This makes the navigation less top-heavy, and if your site is well-organized, shouldn't cause much navigational difficulty.

Preventing Overflow

Because their screens are small and the device may not always have a horizontal scrolling mechanism, overflow in the horizontal direction is a major problem on handhelds. In addition to letting content wrap into a single column, you need to make sure wide elements fit the narrow screen.

Fixed-size elements include images and form controls. Assign them max-width: 100% to keep them within the viewport.

For preformatted blocks ( <pre> ), either wrap the text very tightly (25-30 characters) or allow long lines to break. You can allow line-wrapping by adding the following CSS rule to your style sheet:

Beware of fixed positioning. A fixed-positioned element that overflows the viewport is completely inaccessible.

Dropping the Dynamic Effects

Opera for handhelds supports the same dynamic effects as Opera for the desktop. However, a lot of dynamic effects that work well for the screen just do not adapt well to the handheld. Features that are a bit annoying on the desktop become even more annoying on handhelds.

Don't use frames or pop-up windows. Although Opera can display frames on handhelds, they make navigation and display painfully awkward. Multiple windows are also far more unwieldy on a handheld than on a desktop, so keep all links going to the same window.

As with desktop layouts, make sure navigational elements are accessible even without the mouse. Keyboard events don't necessarily apply, either; interaction on handhelds is often only with a stylus, which does not track keypress or hover events and cannot right-click or double-click.

Reducing the Images

Mobile phone operators delight in charging per kilobyte of transfer, making image-intensive sites both slow and expensive to download. This often causes users to browse with images turned off to save time and money.

You can make your design less image-intensive by:

For the images you do include, set the width and height attributes so that the page can be laid out in its final form even before the images are loaded. Also, images designed for the desktop often do not scale well to the small screen. Crop, scale down, and/or size-optimize images targetted at handhelds.

Don't forget to write meaningful alternative text. The idea is to replace the image, not to describe it. If the image is purely ornamental, the alt text should always be the empty string ( "" ).

Optimizing the HTML

Use efficient, semantic markup and leave the presentation to CSS. CSS is more powerful, more compact, and does not clutter the document with redundant presentational data. Although this is good authoring practice for all media types, it does become even more important when authoring for handheld devices.

Place repeated scripts and styling in external files. This lets the browser cache them, which reduces the download requirements for subsequent pages from the same site.

Making Opera Use Your CSS

Now that you know how to design for a handheld, you have to make sure it is enabled in Opera for handhelds:

Opera works under the assumption that most web pages are not designed for handhelds. If "fit to screen" is enabled, which it is by default on most devices, author styles are ignored and pages are reformatted for the small screen unless the page has a style sheet specifically aimed at handhelds.

To let Opera know that a handheld style sheet is there, specify "handheld" in the media attribute for <link> or <style> , or use an @media or @import rule targetted at handhelds in your in-page CSS:

If the style sheet also applies to other media (or to all media), list all of the media types in a comma-separated list and make sure to include handheld explicitly. For example:

As long as at least one style sheet has handheld among its list of applicable media types, Opera will disable SSR and use all style sheets targetted at handhelds (including style sheets without a specified media or with media="all" ). Opera will not download external style sheets to check for @media or @import rules for handhelds before deciding whether or not to disable "fit to screen". You must declare the existence of a handheld style sheet in the HTML page itself.

When your design is finished, be sure to test it . If you do not have access to a device running Opera, you can make the desktop version emulate a handheld device by pressing Shift+F11 .

Looking Good

Opera has found a way of dealing with the fact that only a tiny fraction of the web is adapted to the devices that an increasing number of people carry around in their pockets and purses. On an ideal web, Opera might not have to pull all these tricks to make pages fit. However, we hope that more and more web authors will gain an interest in pulling their own tricks to make great designs for the “handheld” media type. It is hard, but hardly impossible, for a website to look fantastic on small screens.

For further information about how to promote your business on the smaller devices please contact us directly.

Call one of our Internet Business Consultants on 0800 011 2164