HTML and CSS Reference
In-Depth Information
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 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
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
gov displayed with
the dotMobi
emulator ( http://
Image © Copyright 2009.
dotMobi (mTLD Top Level
Domain Ltd.) All rights
Small screen size. According to Opera Software,
some currently common phone screen sizes include
160 pixels, 176
220 pixels, 240
320 pixels,
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; }
Search WWH ::

Custom Search