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

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 work 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#section2

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?

• • Design one column layouts and avoid floats.
  • Optimize your HTML by using efficient, semantic markup and CSS.
  • Minimize the use of decorative images, avoid relying on images or plug-ins for navigation.
  • Write good alternative text for images.
  • Avoid dynamic effects that specifically require a mouse or keyboard for navigating.

Scaling it Down#section3

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#section4

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:

table, tbody, tr, td, th { 
display: block; }

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#section5

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:

pre { white-space: -pre-wrap; 
    /* Opera CSS Extension */  
      white-space: pre-wrap; 
    /* CSS 2.1 Addition */}

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

Dropping the Dynamic Effects#section6

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#section7

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:

• Hiding unnecessary images with display: none so that Opera will not bother to download them.
• Using real text for navigation labels and headers.
• Telling Opera to use an image’s alt text instead of loading the image itself:

img.as-text { content: attr(alt); }

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#section8

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.

• Don’t overdose on class, <div> and <span>. If there is a more appropriate HTML tag, use that and subclass if necessary. If the element is not actually necessary, take it out. If you can select based on context, do not introduce another class.
• Choose the tags that best convey the purpose and structure of the content. Semantic HTML tags have universally-recognized meanings, which font changes and author-defined classes don’t. Among other advantages, meaningful markup allows non-CSS browsers, which are more common on small devices than on the desktop, to present the reader with a coherent display of the page content. Semantic tags are also a lot shorter than div+class combinations, leading to smaller file sizes.
• Create semantic, not presentational, class/id names. If your code explains why you are styling an element rather than how to style it, the markup is not tied down to one particular presentation. The styling and the layout can then be easily and intuitively changed independent of the markup. Code designed this way is usually also much more compact and readable.

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#section9

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:

<!-- --><link rel="stylesheet" href="..." type="text/css"
<!-- -->      media="handheld">
<!-- --><style type="text/css" media="handheld">...</style>
<!-- --><style type="text/css">
<!-- -->  @media handheld { ... }
<!-- --></style>
<!-- --><style type="text/css">
<!-- -->  @import url(...) handheld;
<!-- --></style>

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:

<link rel="stylesheet"
href="site-style.css"
type="text/css"
media="handheld,all">

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#section10

To illustrate the above approach to adapting a site design to handhelds, we have made an annotated ALA style sheet for the “handheld” media type. It is available from https://alistapart.github.io/code-samples/pocket/handheld.css. You an see it in action by viewing https://alistapart.github.io/code-samples/pocket/ with a handheld-mode browser.

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.

Related articles#section11

Making Small Devices Look Great by Jonny Axelsson

A Touch of Class by Tantek Çelik

Designing for Context with CSS by Joshua Porter

Going to Print by Eric Meyer