Section 3.4. Mobile Devices


3.4. Mobile Devices

The 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 Resolution

Because 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 Browsers

The 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 standards

The 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 screens

What 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.

WAP and WML

WAP, the Wireless Application Protocol, is a collection of protocols and specifications that work together to give mobile phones access to Internet-like information. WAP uses Wireless Markup Language (WML) to create wireless applications just as HTML is used to create web pages. WML is an application of XML, meaning that it is defined in a document type definition.

WAP is generally used for creating applications tailored to handheld devices rather than web pages as we think of them. That is why you often see the phrase "Internet-like information" used in regards to WAP. WAP is good for delivering short, pithy bits of data, such as stock prices, sports scores, movie times, and so on. It is not useful for complex documents with visual layouts.

WAP and WML are becoming obsolete now that the mobile industry has embraced standard web technologies on mobile devices .



Shrink-to-fit

The most sophisticated method is to reduce the web page to fit the available width of the device display. They accomplish this by intelligently displaying the contents of the source HTML document sequentially and shrinking graphics to fit. The best known browsers that use this technique are Opera's Small-Screen Rendering technology and Access System's NetFront browser with its SmartFit Rendering.


Allow horizontal scrolling

Another option is to simply display the web page at its actual size and enable horizontal and vertical scrolling to view it all. Some devices offer an option for users to decide whether they want to scroll the page horizontally (which may be necessary for wide tabular content such as time tables) or make pages flow into the narrow screen width.

3.4.3. Designing for Mobile Devices

It 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 HTML

The 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 types

What 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 Resources

For more information on what is happening in the mobile browsing world, see these useful sites.

3.4.4.1. Mobile standards

These organizations oversee the technology that is continuing to improve the mobile web experience.

  • Open Mobile Alliance (www.openmobilealliance.org)

  • W3C's Device Independence group (www.w3.org/di)

3.4.4.2. Mobile browsers

The following are some of the most popular embedded mobile browsers.

  • Opera (Opera Software, www.opera.com)

  • NetFront (Access Systems, www.access-sys-eu.com)

  • Nokia (Nokia, www.forum.nokia.com)

  • Openwave Mobile Browser (Openwave, www.openwave.com)

  • Pocket Internet Explorer (Microsoft, www.microsoft.com)

  • Picsel (Picsel Technologies, www.picsel.com)

3.4.4.3. Mobile device manufacturers

The major information appliance manufacturers publish information about their products and technologies for developers. To get you started, a few of the most popular are:

  • Forum Nokia (www.forum.nokia.com)

  • Ericsson Mobility World (www.ericsson.com/mobilityworld)

  • BlackBerry Developers pages (www.blackberry.com/developers)

3.4.5. The Web on TV

Some 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.




Web Design in a Nutshell
Web Design in a Nutshell: A Desktop Quick Reference (In a Nutshell (OReilly))
ISBN: 0596009879
EAN: 2147483647
Year: 2006
Pages: 325

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net