Best Practices - Web Standards: Mastering HTML5, CSS3, and XML - page 433

• Smaller interface : The automatic sign-in feature and unchanged focus on dynamically updated
pages can make the use of mobile applications more convenient. Preselected default values
should be provided where possible. Default text entry mode, language, and/or input format
should be specified [13]. The small screen size should be taken into account for sizing and
positioning. Absolute units and pixel measures should be eliminated.
• Harder navigation : The simpler the top navigation, the easier to use on mobile devices.
Link targets should be clearly identified. Access keys used for accessibility might also ease
navigation.
• Flexibility : If devices are classified, the user experience can be boosted significantly. Providing
alternate content for JavaScript is important.
• Mobile-specific features : Certain web page components can be exploited more on mobile
devices than on computers. Telephone numbers, for example, should be provided with a
direct calling feature. Physical addresses should be easy to forward to the GPS application.
Rendering web sites on mobile devices require optimization. Pop-up windows should be completely eliminated.
Graphical components should not be used for spacing. The use of image maps should be reduced. Bad practices such
as frames or table-based layouts should be avoided because they can make web pages unusable on mobile devices.
Providing Robustness
Web developers should ensure that the content can be used even if some technologies cannot be used or fail. Some
common examples are discussed in the following sections.
Declaring Fallback Generic Fonts
Because of the endless variety of fonts available for computers, it cannot be guaranteed that a special font exists in
each browser. One of the generic font families defined by the CSS specification, that is, serif , sans-serif , cursive ,
fantasy , and monospace [14], should always be specified. Let's look at an example of text provided in Gill Sans, which
is not available for all users. The rule shown in Listing 13-11 can be applied; it ensures that the document text will
be rendered with Gill Sans when available and any other sans-serif font when not. Depending on the browser and
configuration applied, it might be Arial, Helvetica, or a similar font.
Listing 13-11. A Fallback Mechanism for Fonts
body {
font-family: "Gill Sans", sans-serif ;
}
Certainly, you can specify further (preferably similar) fonts of the same type as well (Listing 13-12), from which
the first available will be applied, but the generic font family declaration will always work.
Listing 13-12. A List of Similar Fonts Preceding the Generic Font Family
body {
font-family: "Gill Sans", "London", "Corinthian" , sans-serif;
}