| NamePros Member Name: Andreas Location: Asunción - Paraguay Join Date: Mar 2007 | Part 2: The body
Always Use Well-formed Code.
For those not familiar with XHTML, the first thing to know is that all code should validate (according to the doctype) and be well-formed (a valid XML document).
Here is a basic run down of the rules of well-formed XML as well as the key differences between XHTML and HTML.
Code:
1. All elements should be closed, e.g. <br/>. These are also acceptable: <br></br>, and <br />.
2. All non-empty elements should be closed: <p>Example Text</p>
3. All elements must be properly nested: <em><strong>Example Text</strong></em>
4. The alt attribute must be used for all images: <img src="image.png" alt="Image Description" />
5. Text should appear within a block level element and not directly in the body: <body><p>Example Text</p></body>
6. Inline elements should always nest with block level elements: <h2><em>Example Text</em></h2>
7. All attributes should appear within quotes: <p class="names"/>
8. All elements and attributes should use lowercase: <p class="Sm">Example Text <hr noshade="true"/></p>
There are many online Web tools that you can use to validate your markup including the MobiReady Report and the W3C Validation service. There are also browser-based tools such as the HTML Validator Firefox Extension that can be used throughout the development cycle to keep an eye on your pages.
Always Avoid Using Tables for Layout.
We can now add our content in the body of our document, but first we need to add structural elements to contain each logical section, a header, footer and the main body, for example.
With HTML 4, it was common practice to use tables to control the layout of content. This technique, however, constricts the use of our markup by integrating presentational layout into our code. While this doesn’t seem like a critical issue, it becomes a big problem when the page is viewed in multiple mobile browsers.
Instead, use XHTML-friendly <div> elements to logically contain our content for later styling to control the presentation. Since we usually display text in a single section, the structure is straightforward with a content container in the middle of a header and footer:
Code:
<body>
<div id="header">
<!-- Header placeholder -->
</div>
<div id="content">
<!-- Content placeholder -->
</div>
<div id="footer">
<!-- Footer placeholder -->
</div>
</body>
Place Navigation in the Content Body.
Unlike on the desktop, it usually isn’t a good idea to have a navigation list on every page. Given the vertical orientation of the mobile page, you should show only navigation that’s relevant to the page, thereby reducing page weight and scrolling. Thus, the navigation goes into the content body:
Code:
<div id="content">
<ol>
<li><a href="news.html">News</a><li>
<li><a href="products.html">Our Products</a></li>
<li><a href="customers.html">Our Customers</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ol>
</div>
Use accesskeys in the Primary Navigation.
The primary navigation should include an assigned accesskey that corresponds to a keypad number key whenever possible:
Code:
<li><a href="news.html" accesskey="1">News</a></li>
This code links the News item to the “1” key on the mobile keypad and displays the number 1 by it (if the <li> it is part of is the first in the list, of course). Obviously, navigation that exceeds the number of keys on the keypad makes it difficult to provide accesskeys for lists with more than ten items. While not a requirement for all links, accesskeys are useful for primary navigation.
Use Ordered Lists for Navigation.
Unlike on the desktop Web it isn’t the best idea to have a navigation list on every page. Given the vertical orientation of the mobile page you should only show navigation relevant to the page, reducing page weight and scrolling. Instead we will add our navigation into the content body.
Code:
<div id="content">
<ol>
<li><a href="news.html" accesskey="1">News</a><li>
<li><a href="products.html" accesskey="2">Our Products</a></li>
<li><a href="customers.html" accesskey="3">Our Customers</a></li>
<li><a href="about.html" accesskey="4">About Us</a></li>
<li><a href="contact.html" accesskey="5">Contact Us</a></li>
</ol>
</div>
For our home page, we can take certain liberties in providing a description for each link to let users know what to expect in each section. By wrapping the description into a <span>, we can use CSS to style it differently from the navigation:
Code:
<div id="content">
<ol>
<li>
<a href="news.html">News</a>
<span class="description">Read the latest about our products.</span>
</li>
<li>
<a href="products.html">Our Products</a>
<span class="description">Browse our product descriptions.</span>
</li>
<li>
<a href="customers.html">Our Customers</a>
<span class="description">View our customers.</span>
</li>
<li>
<a href="about.html">About Us</a>
<span class="description">What we do? How can we help
you?</span></li>
<li>
<a href="contact.html">Contact Us</a>
<span class="description">Telephone, email and location details.</span>
</li>
</ol>
Linking Phone Numbers.
One of the benefits of the Mobile Web is that its users primarily view it on a phone, allowing the user to quickly and easily make phone calls. It’s an opportunity to help the user and save steps:
Code:
<a href="tel:+12065450210">+1 206 545-0210</a>
Like any hyperlink, any text could appear between the <a> element to initiate a call. However, the recommendation is to display the phone number.
Dealing with Forms can be Tricky.
Entering data into a Mobile Web site can be a difficult and time-consuming process. To avoid wasting the user’s time and causing frustration, use forms sparingly.
However, when using forms, reduce the required information as much as possible. The following creates a contact form with few fields:
Code:
<form method="post" action="process_comment.cgi">
<dl>
<dt>Your comment is about:</dt>
<dd><input type="radio" id="cat1" value="website" accesskey="w" />
<label for="cat1">Our <span class="accesskey">W</span>eb Site</label></dd>
<dd><input type="radio" id="cat2" value="product" accesskey="p" />
<label for="cat2">Our <span class="accesskey">P</span>roducts</label></dd>
<dd><input type="radio" id="cat3" value="news" accesskey="n" />
<label for="cat3">A <span class="accesskey">N</span>ews Article</label></dd>
<dd><input type="radio" id="cat4" value="other" accesskey="o" />
<label for="cat3"><span class="accesskey">O</span>ther</label></dd>
<dt><label for="comment">Your comment:</label></dt>
<dd><textarea id="comment" name="comment" rows="5" cols="20"></textarea></dd>
<dt><label for="email">Your e-mail (optional):</label></dt>
<dd><input type="text" name="email" id="email" /></dd>
<dt><input type="submit" value="Send" /></dt>
</dl>
</form>
References.
W3C Mobile Web Best Practices Basic Guidelines - http://www.w3.org/TR/mobile-bp/
Global Authoring Practices - http://www.passani.it/gap/
Firefox HTML Validator - http://users.skynet.be/mgueury/mozilla/
Cheers,
|
