|
|
Consider using the CSS property "white-space: nowrap" instead of . </b>If you use CSS to control the content layout, it's easier to change it later. For example, you only need to change the value from 'nowrap' to 'overflow' to allow the content to wrap.
</p>
</td>
<td valign="top" class="classification">
<p>
XHTML-MP<br />Openwave<br />
</p>
</td>
</tr>
<tr>
<td valign="top" width="50">
</td>
<td valign="top" width="15"> <div class="content-view-embeddedmedia">
<div class="class-image">
<div class="attribute-image">
<p>
<img src="/wp-images/arrow1_large.gif" width="11" height="11" border="0" alt="arrow" title="arrow" />
</p>
</div>
<div class="attribute-caption" style="width: px">
</div>
</div>
</div>
</td>
<td valign="top">
<p>
<b>Use the CSS "visibility" property cautiously. </b>Consider how changing an element's visibility may affect the overall screen layout.
</p>
</td>
<td valign="top" class="classification">
<p>
XHTML-MP<br />Nokia<br />
</p>
</td>
</tr>
<tr>
<td valign="top" width="50">
</td>
<td valign="top" width="15"> <div class="content-view-embeddedmedia">
<div class="class-image">
<div class="attribute-image">
<p>
<img src="/wp-images/arrow1_large.gif" width="11" height="11" border="0" alt="arrow" title="arrow" />
</p>
</div>
<div class="attribute-caption" style="width: px">
</div>
</div>
</div>
</td>
<td valign="top">
<p>
<b>Be consistent with content alignment. </b>Consistent alignment can make content more readable. Using many varied alignments on the same page makes it harder for the user to scan.
</p>
</td>
<td valign="top" class="classification">
<p>
XHTML-MP<br />WML2<br />
</p>
</td>
</tr>
<tr>
<td valign="top" width="50">
</td>
<td valign="top" width="15"> <div class="content-view-embeddedmedia">
<div class="class-image">
<div class="attribute-image">
<p>
<img src="/wp-images/arrow1_large.gif" width="11" height="11" border="0" alt="arrow" title="arrow" />
</p>
</div>
<div class="attribute-caption" style="width: px">
</div>
</div>
</div>
</td>
<td valign="top">
<p>
<b>Avoid multiple-choice select lists (selects lists with 'multiple="multiple"'). </b>We have little information about how these might be rendered on different devices. They may be pull-down menus, they may be separate screens. They may take over the softkey, they may not. Use checkboxes instead.
</p>
</td>
<td valign="top" class="classification">
<p>
XHTML-MP
</p>
</td>
</tr>
<tr>
<td valign="top" width="50">
</td>
<td valign="top" width="15"> <div class="content-view-embeddedmedia">
<div class="class-image">
<div class="attribute-image">
<p>
<img src="/wp-images/check1_large.gif" width="11" height="11" border="0" alt="check" title="check" />
</p>
</div>
<div class="attribute-caption" style="width: px">
</div>
</div>
</div>
</td>
<td valign="top">
<p>
<b>Do not add brackets or underlining to designate a link. </b>The browser adds the formatting automatically. Note that links may appear differently on different phones.
</p>
</td>
<td valign="top" class="classification">
</td>
</tr>
<tr>
<td valign="top" width="50">
</td>
<td valign="top" width="15"> <div class="content-view-embeddedmedia">
<div class="class-image">
<div class="attribute-image">
<p>
<img src="/wp-images/check1_large.gif" width="11" height="11" border="0" alt="check" title="check" />
</p>
</div>
<div class="attribute-caption" style="width: px">
</div>
</div>
</div>
</td>
<td valign="top">
<p>
<b>Use font formatting (e.g., boldface) only as a redundant highlighting method. </b>In other words, do not use font formatting as a primary or single means of encoding information. Because some phones cannot display formatted characters, you must not rely on font formatting. This does not mean that you shouldn't use font formatting (it looks great on some phones), but rather that the application still be usable even if the formatting is invisible. Use a more basic form of emphasis (e.g., ALL CAPS) if all users must see it.
</p>
</td>
<td valign="top" class="classification">
<p>
HDML<br />WML<br />
</p>
</td>
</tr>
<tr>
<td valign="top" width="50">
</td>
<td valign="top" width="15">
</td>
<td valign="top">
<p>
<b>Do not include a blank line in a header. </b>
</p>
</td>
<td valign="top" class="classification">
<p>
HDML<br />WML<br />
</p>
</td>
</tr>
<tr>
<td valign="top" width="50">
</td>
<td valign="top" width="15"> <div class="content-view-embeddedmedia">
<div class="class-image">
<div class="attribute-image">
<p>
<img src="/wp-images/arrow1_large.gif" width="11" height="11" border="0" alt="arrow" title="arrow" />
</p>
</div>
<div class="attribute-caption" style="width: px">
</div>
</div>
</div>
</td>
<td valign="top">
<p>
<b>Avoid unnecessary punctuation. </b>Colons, dashes, parentheses, and quotation marks are common culprits. For example, "Low 52" is just as clear as "Low: 52." Remember that in a select list, one character consumes ~8% of the available space on a small display. Remember that in a choice list, one character consumes ~10% of the available space on 12-14 character phones.
</p>
</td>
<td valign="top" class="classification">
</td>
</tr>
<tr>
<td valign="top" width="50">
</td>
<td valign="top" width="15"> <div class="content-view-embeddedmedia">
<div class="class-image">
<div class="attribute-image">
<p>
<img src="/wp-images/arrow1_large.gif" width="11" height="11" border="0" alt="arrow" title="arrow" />
</p>
</div>
<div class="attribute-caption" style="width: px">
</div>
</div>
</div>
</td>
<td valign="top">
<p>
<b>Do not break long character strings with dashes, commas, or other traditional separators. </b>For example, the word "autobiographical" is too long for many screens (16 characters) and must be broken. It is tempting to re-write the word as "auto-biographical." But the browser sees this new text as a continuous string of 17 characters, making it worse than the original word! The browser will insert line breaks only at a space, which means that text must appear as "auto- biographical." A better choice would be to substitute a different, shorter word.
</p>
</td>
<td valign="top" class="classification">
</td>
</tr>
<tr>
<td valign="top" width="50">
</td>
<td valign="top" width="15"> <div class="content-view-embeddedmedia">
<div class="class-image">
<div class="attribute-image">
<p>
<img src="/wp-images/arrow1_large.gif" width="11" height="11" border="0" alt="arrow" title="arrow" />
</p>
</div>
<div class="attribute-caption" style="width: px">
</div>
</div>
</div>
</td>
<td valign="top">
<p>
<b>Words (strings of characters) not separated by (standard) spaces should not exceed the minimum display width. </b>Character strings exceeding the minimum width will be broken in different places by different devices, creating unpredictable fractions of text. Avoid this problem by searching for and replacing strings exceeding your target width. Do not apply this rule to email addresses or other items for which precise spelling is critical. Note that non-breaking spaces do not behave the same as "standard" spaces and should be counted as standard characters. For older, HDML phones, assume a standard minimum width of 12 characters. For older, WML 1.x phones, assume a standard minimum width of 14 characters. If only targeting Nokia devices, use 18 characters.
</p>
</td>
<td valign="top" class="classification">
</td>
</tr>
<tr>
<td valign="top" width="50">
</td>
<td valign="top" width="15">
</td>
<td valign="top">
<p>
<b>Display screen titles and softkeys in ALL CAPITAL LETTERS. </b>This convention visually separates content from headers and softkeys. Brand names, proper nouns, and user-generated text (like subject lines of email messages) are exceptions to this rule.
</p>
</td>
<td valign="top" class="classification">
<p>
HDML<br />WML<br />Openwave<br />
</p>
</td>
</tr>
<tr>
<td valign="top" width="50">
</td>
<td valign="top" width="15"> <div class="content-view-embeddedmedia">
<div class="class-image">
<div class="attribute-image">
<p>
<img src="/wp-images/arrow1_large.gif" width="11" height="11" border="0" alt="arrow" title="arrow" />
</p>
</div>
<div class="attribute-caption" style="width: px">
</div>
</div>
</div>
</td>
<td valign="top">
<p>
<b>Be careful with words that are ambiguous with regard to their part of speech. </b>Ambiguity is a problem in small displays because of the absence of natural language and the use of words outside their normal context. Words intended as verbs are often misinterpreted as nouns or adjectives, and vice versa. For example, an email menu containing the item READ MAIL could be interpreted in at least two ways. It could be understood as a verb, indicating link to an inbox for the reading of email. Or it could be understood as an adjective, implying a link to a list of email that has already been read. Even when the part of speech is clear, some words still cause trouble. Does NEW EMAIL refer to the act of composing a new email or to a list of email that has not yet been read?
</p>
</td>
<td valign="top" class="classification">
</td>
</tr>
<tr>
<td valign="top" width="50">
</td>
<td valign="top" width="15">
</td>
<td valign="top">
<p>
<b>Use the format xxx-xxx-xxxx for
|
