More on Links, Lists, and Layout - Web Development and Design Foundations with XHTML - page 296

● Low bandwidth (slow connection speed). Although the use of faster 3G networks
is becoming more widespread, many mobile users experience slow connection
speeds. Images usually take up quite a bit of bandwidth on a typical Web site.
Techniques to improve mobile Web usability related to images include providing
descriptive text for images, optimizing the file size of images, and avoiding using
images for navigation. Consider replacing images with others configured for
small-screen display. For example:

#imagelogo { background-image: url(smalllogo.gif); }

● Font issues. Mobile devices may have very limited font support. Configure font
size using ems or percentages. Include generic font family names in your style
sheet. For example:

p { font-family: Arial, sans-serif; }

● Color issues. Mobile devices may have very limited color support. Choose colors
carefully to maximize contrast.
● Awkward controls. While smartphones with touch controls are becoming more
popular, many mobile users will not have access to mouselike controls. Provide
keyboard access to assist these users. Configure your XHTML using headings,
navigation in ordered lists (some cell phones will provide numeric keypad access),
Skip to Content hyperlinks, and Skip to Top hyperlinks to help your mobile
visitors more conveniently navigate your site.
● Flash support issues. Many mobile devices do not support Adobe Flash multi-
media. (See Chapter 11 for more information on Flash and providing alternate
content.)
● Limited processor and memory. Although mobile device processing speed and
available memory are improving, they still cannot compare to the resources of a
desktop computer. While this won't be an issue for the Web sites you create now,
be mindful of this issue in the future as you continue to develop your skills and
create Web applications.
● Cost per kilobyte. Depending on the service plan, some mobile Web visitors may
be paying per kilobyte. Be aware of this and eliminate unnecessary images as
described above.

Focus on Accessibility As you reviewed the list above, you may have noticed that some of the techniques—

such as writing descriptive alt text for images, choosing text and background colors
with good contrast, and configuring Skip to Content hyperlinks—are the same as the
recommended practices to provide for accessibility. In fact, there is quite an overlap in
the design and coding techniques needed to create a Web site that is accessible for visi-
tors with disabilities and those intended for mobile Web visitors. See http://www.w3.org/
WAI/mobile/ for more information on this topic.

WWW

Once you've applied the design and coding techniques described above, it's important to
test your Web site in mobile devices and/or emulators. Figure 7.20 shows a modified
version of the Door County Wildflowers site displayed in the Opera browser's small screen
view. Notice some differences with the regular browser display of this page in Figure
7.11—the logo image does not display, the navigation links are configured in a list, and
there are additional navigation aids (Skip to Content and Back to Top hyperlinks). The