-
Notifications
You must be signed in to change notification settings - Fork 25
General: Markup Recommendations
The following recommendations stem from a variety of standards, including the W3C Mobile Web Best Practices guide, the Global Authoring Practices for the Mobile Web and MIT's Mobile Web Consortium, as well as addition work done by the framework developers group. These recommendations are intended to allow an application to work on any phone that qualifies under the UCLA Mobile Web Framework's least common denominator standard.
It is good practice for documents to indicate structure with headings and subheadings. Code in order of relevance and in a semantically correct fashion so that the appearance of elements makes sense even when stylesheets and Javascript are absent.
<h1>First Level Heading</h1><h1> and <h4> are the most effective title and subtitle tags, <h2>, <h3>, <h5>, and <h6> do not always render distinct from each other.
Headings should not be substituted for bolded text.
<p>...</p>The paragraph is the tag you will probably use the most. Each paragraph of text should be wrapped in the paragraph tag. <p> is more effective than br because of the non-standard treatment of br in some browsers.
strong is preferable to b as W3C denotes the latter as a strictly presentational element. <em> and <i> are not recommended because not all mobile devices support italics. However, as with <strong>/<b>, <em> is preferable to <i> if italics will be used.
The <span> tag is also available and is used to grant CSS-based attributes to an inline component. It should not be used with semantically emphasized text, though, because such styling will not work on non-CSS devices.
<ol>
<li>...</li>
<li>...</li>
</ol>Ordered lists are fairly well supported, and are the recommended entity to create menus with because of their access-key capabilities.
<ul>
<li>...</li>
<li>...</li>
</ul>Unordered lists are fairly well supported, however, ordered lists are recommended because of the added access-key capabilities.
<dl>
<dt>...</dt>
<dd>...</dd>
<dd>...</dd>
</dl>The <dl> tag is NOT recommended. It does not have the same level of support, nor the same styling capabilities, as the ul and ol entities.
Use <ol> rather than <ul> for menus. This allows access key references on simple devices. On more advanced devices, where a more complex layout is desired, menu items can be styled to appear in many ways through CSS (For example, numbering can be removed in CSS).
<ol>
<li><a href="#item1" accesskey="1">Item 1</a></li>
<li><a href="#item2" accesskey="1">Item 2</a></li>
<li><a href="#item3" accesskey="1">Item 3</a></li>
</ol>Menus should exist above the main content in the markup (CSS layouts can adjust this through styling) to handle linear-based browsers, and they should contain as few items as possible without being detrimental to navigation. Use tiered sub menus when possible to achieve this.
<div>...</div>
<span>...</span>The <div> and <span> elements are just as critical to mobile web development as they are to desktop web development. <div> identifies any block-level division of text or content, while the <span> tag is used to identify a grouping of inline elements for styling. However, these elements should be used sparingly, as non-CSS devices will not render any of the styling specific to the attribute. Semantic markup as mentioned above should thus still be used whenever possible.
<br />
<hr />Line breaks and horizontal rules work as expected on virtually all mobile devices. However, breaks should be used sparingly and not as a replacement for the paragraph tag.
The web design industry considers using tables for layout as bad practice, particularly for mobile devices. Table-based layout combines presentation and markup, which makes development more difficult and essentially eliminates the ability to adapt based on device.
Though tables provide a seemingly consistent mobile web experience for non-linear devices, they're cumbersome and difficult to support. Table-based layouts restrict your ability to adapt for various devices and to increase page size. It is more efficient to do page layouts with a style-based layout. The resulting layout adapts well to the narrow screens and adds flexibility while cutting page size.