Section 14.4. Effective Mobile Web Design

14.4. Effective Mobile Web Design

There is no secret to creating effective mobile content. In fact, the advice we've been giving throughout this book applies to mobile devices just like it does for their larger desktop cousins: know your audience, know their needs, and know their browsing environment. With that said, the mobile browsing experience is different enough from the desktop that we'd be remiss if we did not offer some specific hints to make your web content look and act great.

With the popularity of mobile web access mushrooming, there is an abundance of mobile web design advice, good and bad. In the following sections, we'll offer up our favorite bits of guidance, based upon personal experience and many visits to many bad mobile sites.

14.4.1. Understand Your User

People turn to a mobile browser for different reasons than when they access the Web from the desktop or laptop. Most users are not seeking an extended perusal of some deep, thought-provoking dissertation, nor are they looking to apply for their next home mortgage. Instead, they most often need small bits of data delivered quickly: news headlines, weather information, flight information, sports scores, and the like. Browsers have become the interface to many other networked devices, too, so a mobile browser can have commercial and industrial applications. They won't be looking to download large pictures or a feature-length movie. They may want to receive driving directions, to obtain a price check, to buy tickets to a movie in a real theater, to adjust the operating parameters of a smart machine, to....

Keep this in mind when designing your content. What are you making available to your users? Why would they want to view it in a mobile browser? Is your content so useful that users will want to see it on the run, in their hand, while they do other things? Don't try to shoehorn your site into a mobile format just to say you did it. Select and deliver content that matters to people when they are in a mobile setting. In almost all cases, judicious editing is the first step to creating an effective mobile experience.

Once you have determined who will see and use your content in their mobile browser, think about their environment during the browsing session. Most likely, they will be distracted while viewing your site; many will be driving, in a meeting, or talking with others. Your content needs to punch through the distraction, quickly deliver the needed data, and get out of the way. It needs to be easily understood , readily navigated, and quickly accessed. Bandwidth restrictions will most likely make your content arrive slowly; don't make things worse by making users work to get what they want. Fast and mobile are the catchwords.

14.4.2. Links and Navigation

Except for overly large pages, poorly designed content navigation models are the worst aspect of most mobile web pages. Many pages offer useful content, but they make it so difficult to navigate that most users give up and surf elsewhere. It seems that many designers, having built complex navigation structures for a conventional desktop browser, feel compelled to reuse that same structure in a tiny, little mobile browser. It also seems apparent that these designers never actually try to use their content in a mobile environment. If they did, surely they would make things simpler and more accessible.

Moving around within a page on a mobile browser is much more difficult than in a desktop browser. Scrolling is a pain in a mobile browser, requiring many clicks of tiny buttons. Shifting focus from link to link is similarly tedious , often requiring use of slightly different tiny buttons . Be kind to your users: design your page navigation to avoid scrolling and focus movement wherever possible. If you require traditional "home," "next," and "previous" links in your pages, put them at the very top, where users can see them and access them immediately. Don't force users to scroll through the entire page to find your navigation elements at the very bottom. Use just a few effective navigational elements that clearly indicate where they will lead the user.

Some browsers support the accesskey attribute, allowing you to associate a key on the keypad with a link or form element in your content. Pressing the key selects the link or switches the focus to an appropriate form element. If you arrange your links as a numbered list map, each with an accesskey number, users can quickly jump to a link with a single key press, instead of tediously tapping to get to the desired link. For example:

 Kumquat Resources: <ol>    <li><a accesskey="1" href="growers.html">Growers</li>    <li><a accesskey="2" href="vendors.html">Vendors</li>    <li><a accesskey="3" href="fanclubs.html">Fan Clubs</li> </ol> 

enables the user to press "1" on the device keypad in order to access the kumquat growers page, "2" to see vendors, and "3" to find a fan club. Enable these as simple hyperlinks , and the user has to make several key presses to access and select the embedded link. Small design decisions like this can make a big difference in the overall user experience.

In general, following a link in a mobile browser is costly, in both time and money. Clearly identify your links so that the user knows where they lead and what they will provide. Anonymous "click here" links are annoying. Users do not want to explore your site; they want to get to the desired content quickly. If a link might lead to a large amount of content, such as an image, let users know in the linking page so that they can choose to avoid it.

Especially avoid image-based links, except when the images are very small. Many mobile browsers allow the user to navigate the page and select a link before the full page is loaded. Remember that the page gets fully downloaded from the server before going back and downloading supporting files such as images. Accordingly, text-based links appear nearly immediately, whereas image-based ones make the user wait. In any case, avoid image-map navigation because the regions in the map may not be easily visible or selectable, as they would in a browser with a mouse.

Resist the urge to link to other windows with the target attribute. Many mobile browsers cannot handle multiple windows and will simply drop the linking window content. Users will be confused and your content will certainly not be presented as you intended.

14.4.3. Forms

Forms present a challenge to the mobile web designer. To make the mobile experience interactive, you need to include forms for users to input requests and parameters and for them to receive customized content from a site. Unfortunately, most forms do not translate well to the mobile browser, where text input and field selection is difficult and error-prone . Mobile users crave quick, customized information. Design your forms to be easy to use, and your users will return again and again to use them.

As always, good content begins with good editing and forms are no exception. Make sure that your forms are short and to the point. Clearly and succinctly label the various input fields and elements so that users know immediately what is expected of them. Whenever possible, set default values in the form so that users need not fumble through every element before they can submit the form. This is especially useful when a user must return to a form to correct an error. Forcing the user to reenter data each time he visits the form is especially punitive.

Text entry is a special problem, especially when entering passwords and other masked text. Not all mobile devices handle masked text input cleanly, and entering a masked password using multitap text entry is exquisitely painful. In some mobile browsers, the text entry is conducted in a separate pop-up window provided by the browser, forcing the user to go through several levels of selection and acknowledgment to place a single text value in a field.

Keep it simple. Forms with many input elements do not translate well to the small mobile screen. As users scroll through the form to fill it out, they are unable to see the previous elements already entered and cannot see the items to come. This disorientation makes it harder to get forms right in a mobile setting. You might consider breaking your large form into multiple smaller forms, letting users incrementally enter their information. If you take this approach, make sure you validate data as you receive it; don't collect six screens of information and then force the user to return to the first screen to fix an error.

14.4.4. Layout and Presentation

The mobile web is not the place for fancy layout and slick content presentation. The limited tags in XHTML Basic help ensure this, and the prudent mobile designer will not try to go beyond those limits. While the transition from the feature-rich desktop browser to the minimal mobile environment can be difficult, designers must remember that the point of content design is to inform the user, not to impress your designer peers.

14.4.4.1. Stylesheets

All is not lost for those wanting to create attractive mobile content. Good designers use stylesheets to separate their content from its presentation attributes. This also makes it easier to have a single content source whose appearance is controlled by different stylesheets depending on the user device. Because inline styles are not recommended or supported in the standard for mobile content, use external links to your mobile content stylesheets. For example:

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

In this link, the media attribute is key: it ensures that this stylesheet will be applied when your content is viewed on a mobile device, and will be ignored otherwise . You'll want to keep your stylesheets small because they contribute to the delay required to load your pages over a slower mobile connection.

Know, too, that not all mobile browsers support stylesheets. For those that do, connectivity issues may prevent the browser from loading the stylesheet. Test all your content without any stylesheet, and make sure that it presents well without styles.

14.4.4.2. Text fonts

Fonts present a particular problem to mobile content designers. Unlike desktop browsers with access to hundreds of fonts in many variations, mobile browsers often have just one available. It may come in only one or two sizes, and may not offer italic and bold characters . The reality is that the tiny displays on mobile devices are not equipped to show complex fonts, so the device vendors avoid them because they would be illegible.

To work around these font restrictions, use header tags to enable different font sizes, if they are available, instead of relative or absolute font sizing. Most mobile browsers try to make a distinction between the <h1> , <h2> , and <h3> tags, so use them as intended for page titles, section headers, and content delimiters in your pages. Keep in mind, too, that many mobile browsers represent all the various emphasis tags (bold, italic, emphasis, and the like) with bold text. If you try to use different emphasis tags in a single page, your users may see only one kind of emphasized text.

14.4.4.3. Margins and spacing

The narrow display on mobile devices constrains how you lay out your pages. Avoid any sort of margins; you'll just be giving up precious horizontal space. The same is true for nested lists: deep nesting will cause your content to creep to the right, forcing your text into a single river of words down the right edge of the display.

Absolute spacing and layout control is difficult on mobile devices. Common desktop tricks, such as 1 x 1 images and transparent GIFs, just don't work as you would expect on a mobile device. Standard HTML elements such as frames and layers are generally not supported, and limited table support makes table-based layout difficult as well. In general, view the mobile device as a simple vertical flow of content and allow the mobile browser to format your content as best it can without your interference.

Finally, be aware that adaptation may occur with your content. Adaptation is the automated conversion of your content to make it more suitable for a mobile client. It may occur at the server, when a mobile device is found to be requesting a page. It often occurs within the carrier networks, where pages are stripped of offending tags and images are dramatically reduced to make them more acceptable to the mobile device. It also occurs implicitly in the mobile browser, where unsupported tags and attributes are ignored during rendering.

You cannot prevent adaptation. Your best bet is to avoid it by creating simple content that will not be subjected to adaptation at any layer. In short, the simpler that your content is, the more likely it is going to appear as intended on the mobile device.

14.4.5. Images

In the early days of the Web, images made life difficult. Dial-up connections just weren't able to deliver large images in a timely fashion, leading to user frustration and unusable pages. Older web users may remember the days when links often had parenthetical sizes appended to them. When running on a 28.8 kilobit modem, selecting a link followed by "(132K)" gave you time to grab a coffee while the image made its way to your browser.

Fabulous advances in cheap bandwidth have made an image-rich web experience the norm. Designers are used to using large images to make their pages beautiful. Unfortunately, these kinds of designs fail on slow mobile devices, as well as fast mobile devices with limited memory. As a result, images, especially large images, are a luxury in a mobile environment.

That isn't to say that images are forbidden in your mobile content. Instead, use images sparingly. A small logo may work just fine in your pages, and tiny navigational icons will certainly make your pages easier to use. If you must deliver large images do it with a separate link, with a warning about the size of the object the user will be accessing. This way, users understand the cost before they select the link.

When you do deliver large images, use common file formats such as GIF89a and JPEG. We know of no mobile browser that cannot handle these well-established file formats. Keeping in mind the small display sizes of mobile devices, use images that are close to the display size. In any case, do not send an enormous image and expect the browser to scale it to the display size. It is downright mean to send a "gigantic" 1024 x 768 image over a slow mobile connection, swamping the mobile device's memory and forcing the device to shrink the image to fit its display. To further assist the browser, always use the height and width attributes in the <img> tag to let the browser know what to expect as the image trickles in.

14.4.6. General Advice

In closing, we offer one final bit of advice: less is more. The mobile web is not the place to show off your cutting-edge page-layout skills or fancy image library. Instead, it is about quick delivery of great content that meets a specific need at a specific point in time.

To stay focused on this minimalist approach, consider adopting the W3C's recommended mobile page design guidelines:

• Design all your pages to work within a display that is 120 pixels wide. While many newer devices are wider than this, targeting this smaller number will ensure reasonable presentation on a broad range of devices, old and new.

• Use GIF89a or JPEG images. As we noted before, this ensures that your images will render on almost any mobile device.

• Do not deviate from the XHTML Basic document type. Using tags not supported by XHTML Basic almost guarantees rendering errors on a large percentage of mobile devices.

• Use stylesheets to separate content from presentation. XHTML Basic defines the best way to integrate stylesheets with your mobile content.

• Keep your total page size under 20 kilobytes. This includes the base page content, any associated stylesheets, and all included images.

By adopting these guidelines, judiciously editing your content, and structuring your pages to be easily navigated, you'll be creating remarkable mobile content that will have your users cheering.