Filter
Top Products
Design Guidelines
Issue 2.2 April 2005 137
Fonts
Font size is a major concern in the browser. Without designer intervention, the browser displays
text as if it were running on a PC in a normal width and height display. This means that the fonts
shown appear huge relative to the screen size. As a result, only seven lines of text can be
viewed in the browser when no font sizing is applied. Additionally, only about 25 characters are
viewable per line. From a practical point of view, this situation is not usable.
To make the browser usable, perform some form of font sizing to allow a reasonable amount of
text to be viewed per screen. Ideally, put font sizing in a single external style sheet, and make all
pages reference this style sheet. Do not set font sizes in document-level style sheets, or even
worse, for in-line style sheets or <font> tags. Doing so makes it very difficult for the designer to
update font changes, and runs the risk of failing to make a universal change. Use a single
external style sheet to manage consistency in the pages.
Define fonts using a static external style sheet. You can also generate a style sheet dynamically
using some form of server-side application, such as a CGI script or a Java servlet. Dynamic
style sheet generation allows the server to decide, per user, what font size to use. This in turn
allows the user to notify the server to change the font size. All HTML pages would have an
external style sheet reference, another server-side executable. This executable dynamically
generates font information based on the cookie, form component, or configuration value,
relative to the phone’s IP Address. Using a static external style sheet makes page development
and testing much easier, since it appears the same way to both the designer and the reader.
Allowing the user to choose a font size forces more work on the designer to verify that all fixed
size items appear acceptably
Maintaining Context
Given the small screen area, a user can become easily lost. Headings are often not in view, and
the user, if distracted by other work, can lose a sense of context. Style sheets can help maintain
this sense of context through color. The <div> and <span> tags are intended to provide page
designer-defined content-based style. By defining classes of <div> tags with various colors and
border styles, the designer provides additional information. However, a significant number of
people suffer from some form of color blindness. Thus, it may be necessary to design pages
both with and without using color styles.