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

Now that you know how to associate a handheld style sheet with a Web page, what's
the best way to configure the page? Compare the regular browser display of the
Disabilityinfo.gov site in Figure 7.18 with the handheld display in Figure 7.19—there's
quite a difference!

Figure 7.18
The browser display of http://disabilityinfo.gov

Users of handheld devices experience a number of usability constraints. The list below
describes these constraints and provides some recommended design, XHTML, and CSS
techniques to overcome or compensate for limitations experienced by mobile Web users.
However, a good starting point, whether you are designing for a standard browser or
for a mobile device, is to code standards-based XHTML
and CSS that passes W3C validation tests.

Figure 7.19
http://disabilityinfo.
gov displayed with
the dotMobi
emulator ( http://
emulator.mtld.mobi/
emulator.php)
Image © Copyright 2009.
dotMobi (mTLD Top Level
Domain Ltd.) All rights
reserved.

● Small screen size. According to Opera Software,
some currently common phone screen sizes include
128

× 160 pixels, 176 × 220 pixels, 240 × 320 pixels,

352 480

pixels (large-screen phones). Even on one of the
large phones, that's not a lot of pixels to work
with! The workaround is to use a one-column
design and avoid the use of floats, absolute posi-
tioning, tables (see Chapter 8), and frames (see
Appendix A). Descriptive page titles and heading
tags will help to establish an effective mobile Web
presence. Centered content and borders can work
well for small screen display. Eliminate nonessen-
tial content with the CSS display:none property.
For example:

× 416 pixels, 640 × 320 pixels, and 640 ×

#sidebar { display:none; }