3.4. Mobile DevicesThe increased popularity and usefulness of the Web combined with the growing reliance on handheld communications devices (such as palm-top computers, PDAs, and cellular telephones) has resulted in web browsers squeezing into the coziest of spaces. Advancing technology and lower production costs have made high-resolution color displays and embedded web browsers standard issue on nearly all new phones and PDAs. This comes as a big improvement over the black-and-white, text-only displays of only a few years ago, and it is creating a call for mobile -appropriate web content. 3.4.1. Mobile Display ResolutionBecause each manufacturer creates its own displays, there are no clear standard screen resolutions for mobile devices the way there are for computer monitors. But to get you in the ballpark, take a look at some current specifications. On the low end are standard mobile phones with screen dimensions of 128 x 128 pixels. Fuller-featured phones typically have resolutions of 176 x 208, 176 x 220, 208 x 208, or as large as 240 x 320. Handheld devices, such as the ubiquitous BlackBerry, sport screen sizes of 240 x 160 or 240 x 240. 3.4.2. Mobile BrowsersThe browsers embedded in mobile phones and PDAs (also known as microbrowsers ) are designed to accommodate the lower memory capacity, low bandwidth abilities, and limited display area of handheld devices. Some are WAP browsers with limited HTML support (see the sidebar, "WAP and WML"), and some are full-featured browsers that support the current web standards and allow access to all the same web content that is available from a PC browser. (Some of the best-known mobile browsers and their web addresses are listed at the end of this section.) 3.4.2.1. Support for standardsThe significant development in mobile browsing technology is the abandonment of WAP (Wireless Application Protocol) and its authoring language WML (Wireless Markup Language) in favor of the same web authoring standards set forth by the W3C for web content. The Open Mobile Alliance (www.openmobilealliance.org), the organization that guides standards for the mobile industry, has been working in cooperation with the W3C to ensure that web technologies take into account the needs of the mobile environment. In fact, the W3C has formed the Device Independence Working Group (www.w3c.org/2001/di) to promote access to a "unified Web from any device in any context by anyone." Modern mobile phones and other handheld devices will support XHTML Mobile Profile (XHTML minus the tags that don't make sense for the mobile environment), ECMAScript Mobile Profile, Wireless CSS, SVG Tiny (a version of Scalable Vector Graphics especially for mobile devices), among other standards. This is big news, because web content developers no longer need to learn a special language to make content accessible to the growing mobile audience. The devices may also continue to support less strictly authored HTML pages as well as legacy WML. 3.4.2.2. Adapting web content for small screensWhat happens when a cell phone accesses a traditional web page? Basically, it does the best it can. One of the biggest challenges for mobile browsers is rendering big web pages on small screens. Browser and device developers have created a few solutions to this problem.
3.4.3. Designing for Mobile DevicesIt should come as no surprise that the prescription for optimizing your visitors' experience in the mobile environment is creating standards-compliant content. Here are just a couple of tips. 3.4.3.1. Write clean HTMLThe best ways to accommodate the limitations of handheld browsers are to mark up documents semantically and logically and to avoid sinking text in graphics (which you should be avoiding anyway). The goal is to create a page that works and makes sense even with all the graphics and tables stripped away. One example of how logical semantic markup can serve all audiences is the practice of marking up navigation options as an unordered list in the document source. Cascading Style Sheets can be used to present the list as a horizontal navigation bar (with graphics, too, if you choose) for graphical browsers, but microbrowsers and other alternative browsing devices will see a bulleted list of links. This technique is demonstrated in Chapter 24. 3.4.3.2. Use media typesWhat looks good on a PC monitor may not work at all on the small screen of a PDA. Fortunately, you can give the PDA its own set of presentation instructions by creating a style sheet crafted specifically for handheld devices. The HTML media attribute allows you to target a number of media including (but not limited to) screen, print, projection, and handheld. CSS media types are discussed in further detail in Chapter 16. To create a link to a style sheet that is used only by handheld devices, use the code: <link rel-"stylesheet" href="smaller.css" media="handheld" /> 3.4.4. Online ResourcesFor more information on what is happening in the mobile browsing world, see these useful sites. 3.4.4.1. Mobile standardsThese organizations oversee the technology that is continuing to improve the mobile web experience.
3.4.4.2. Mobile browsersThe following are some of the most popular embedded mobile browsers.
3.4.4.3. Mobile device manufacturersThe major information appliance manufacturers publish information about their products and technologies for developers. To get you started, a few of the most popular are:
3.4.5. The Web on TVSome people access the Web via their television sets using a set-top box that connects to the television and either a cable or modem Internet connection. Although it is not as full-featured or versatile as browsing on PCs, it may offer a convenient and more affordable alternative for some users. Gaming consoles are another option for using the TV as the display for Internet content. The only significant player in the web TV arena is MSN TV (formerly WebTV , which hit the market in 1996). As of this writing, it remains barely a blip on the radar screen of overall browser usage, but it still has millions of users. Some sites are designed specifically for MSN TV. MSN TV uses a television rather than a monitor as a display device. The canvas area in the MSN TV browser is a scant 544 x 372 pixels. Principles for designing legible television graphics apply, such as the use of light text on dark backgrounds rather than vice versa and the avoidance of any elements less than two pixels in width. These and other guidelines are provided on MSN TV's special developer site at developer.msntv.com/. Of particular interest is MSN-TV Viewer , which shows you how your web page will look on MSN TV, right from the comfort of your computer. It is available for free for both Windows and Mac (although the Mac version is antiquated and will not be updated). For information on MSN-TV Viewer, go to developer.msntv.com/TOOLS/msntvvwr.asp. |