Section 14.2. Device Considerations

14.2. Device Considerations

When designing content for mobile devices, the developer needs to keep many design constraints in mind. If the developer neglects any one of them, the resulting web pages will be difficult if not impossible to use on the mobile web. We suggest that the successful mobile web designer always keep browser, input, network, and display constraints in mind to keep from getting in a bind. ^[*]

^[*] The astute reader will note that "browser, input, network, and display" from the clever and helpful acronym BIND.

14.2.1. Browser Constraints

Browser variations present the biggest challenge to the mobile web content designer. Limited by the host device, mobile browsers cannot support the full range of tags available in a conventional desktop browser. For those tags that are supported, implementation is not consistent across a range of mobile devices. As a result, designers need to carefully consider which tags they will use in their content and often have to sacrifice more complicated page designs in favor of simpler pages that display correctly on a larger number of devices.

Beyond tag availability, mobile browsers may or may not support scripting, stylesheets, frames , embedded objects, layers , cookies, and other support structures within the page content. Even widely supported <meta> tags, such as refresh tags, may not be supported. In general, cautious designers will avoid any of these elements in their content. While the resulting content will certainly be simpler, it is guaranteed to be viewable on many devices. Unlike desktop browsers that try to muddle through when presented with unsupported tags, many mobile browsers just give up when confronted with complex content. More than anything else, mobile web designers do not want attempts to access their content to result in a "page not viewable" error within the browser.

Even when the content sticks to the "safe" tags, as described later in this chapter, the results are unpredictable among different browsers. There are no standard fonts, and some mobile browsers offer only one font, in one size , without bold or italic embellishment . Most devices allow the user to select different font sizes for the device to accommodate aging eyes and small displays; these size differences can dramatically affect the rendering of content on the device's small screen.

Some mobile browsers cannot handle any sort of images in their pages, although this is becoming less of a problem in more recent mobile devices. Almost all mobile browsers have a difficult time with large images and may ignore or alter such images as they see fit. There is no clear definition of what constitutes a "large" image; it is in the eye of the browser and may be determined by both image dimensions and overall size. Formatting and wrapping of text with images is inconsistent, and mobile browsers often ignore image alignment attributes altogether. Needless to say, the current generation of devices cannot handle any sort of embedded video, flash, or animated content in any form.

14.2.2. Input Constraints

Cellular phones lack the single most convenient input device that makes the desktop browser successful: a mouse. PDAs and convergence devices do not suffer this limitation, typically allowing the user to tap on the screen with a stylus, but the majority of your target audience for mobile content is using a cellular phone. Consequently, general page navigation is a chore on mobile devices. Moving the focus within a page to select a link can be tedious at best, especially when there are several links to navigate among.

Entering text on a cellular phone is tiresome, too. Most phones offer two text entry modes: a multitap mode where pressing a key cycles through the letters on that key, and a predictive mode where the user adds letters until the phone finds the desired word based on the letter pattern. The former is tedious but ultimately more accurate; the latter may be quicker, but usually fails because typing URLs is the most common mobile web activity and does not follow typical spelling patterns.

For both modes, typing punctuation is difficult because fewer common punctuation symbols are often available through a single key, which cycles through a dozen or more symbols.

14.2.3. Network Constraints

Most mobile content designers are keenly aware of the constraints imposed by the slow networking speeds of most mobile devices. What many fail to appreciate, however, is how much users have to pay for each byte of mobile web content. Ironically, today's mobile web designers need to return to a 1995-era design mindset, when advanced dial-up speeds were reaching just 56 kilobits per second and connection times were metered by the Internet service provider (ISP). Is your content so valuable that users are willing to pay every time they want to view your pages?

Beyond bandwidth concerns, mobile device users often operate within odd, carrier-imposed limitations that network PC users would never tolerate . Some URLs may be blocked by certain carriers , and others may be passed through proxy servers that alter or translate content for the mobile device. It is difficult to predict how a particular carrier will treat a particular page. The best defensive strategy is to keep your content as simple as possible to avoid odd translation and conversion of your pages.

Finally, network connectivity is not constant while viewing content on a mobile device. Users may reach your site, view a page or two, and suddenly lose their connection as they pass into a dead zone in their coverage. Content that requires lots of navigation among pages can be frustrating in marginal coverage areas.

14.2.4. Display Constraints

There is no denying one attribute of all mobile devices: the display is small, even tiny. Even convergence device displays, which manufacturers boast to be the largest within the mobile phone market, are miniscule when compared to a conventional desktop browser. Most devices provide vertical scrolling, allowing content to flow beyond the bottom of the display, but very few support horizontal scrolling. As a result, content must be consciously designed to work in a small display with tightly bounded horizontal space and a limited amount of vertical space.

To make matters worse , the actual display dimensions are different for almost every device that reaches the market. Unlike desktops, where designers typically assume 800 x 600 or 1024 x 768 displays, the dimensions of a mobile device can range from 128 x 128 on some cellular phones to 320 x 480 and higher on some PDAs. Cell phones often sport odd display sizes, such as 176 x 220 or 122 x 96. In general, you cannot make any assumptions about display size nor should you target a specific size with your content. This is good design advice for any web page in any environment!