There are a few basic things to consider when building a site that’s mobile friendly. It’s all pretty common sense when you think about it, and infact I’ve found most of these rules simply apply as good ‘general’ rules anyway. I.e. Use of good quality well-formed code, css based design and semantic markup. But there are also a few extra tips you can use to make the user experience that little bit better for the mobile user.

Use the Correct Character Encoding

It’s important to tell your browser what character encoding your content will be in. This appears on the first line of each XHTML Basic page for example
<?xml version=”1.0″ encoding=”UTF-8″ ?>

UTF-8 is a good choice as it includes quite a wide range of characters.
ISO-8859 is another commonly used character set

<?xml version=”1.0″ encoding=”iso-8859-1″?>

You can also include this as a meta tag
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />

Doctype

The document type (doctype) tells the browser how the page needs to be rendered, including the rules and how strictly to follow these rules.
Here is an example of a doctype declaration for XHTML Strict
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Use Well-formed Code

All the code your write should be well-formed and valid code. Depending on the rules you choose to follow and how strictly these rules are applied, as defined in your doc type declaration above. XHTML has the following requirements.

  • All elements should be closed. I.e. <br /> <p>Blah text</p>
  • All elements must be properly nested. I.e. <p><strong>Title</strong></p>
  • The alt attribute must be used for all images. I.e. <img src=”blah.jpg” alt=”My Image” />
  • Text should appear within a block level element and not directly in the body. I.e. <body><p>My paragraph</p></body>
  • Inline elements should always nest with block level elements. Inline elements include the span tag for example, which should therefore be nested within a block level element such as <p> or <div> tags.
  • All attributes should appear within double quotes. I.e. <img src=”blah.jpg” alt=”My Image” />
  • All elements and attributes should use lowercase. Just keeps things looking neat if nothing else!

Avoid using tables for layout – CSS based design

CSS evangelists have been harking on about this for years now. But when developing for a mobile device, where the page size is all important, makes this even more relevant. Most professional web designers have been coding 100% CSS layouts for a while now, so this shouldn’t come as much of a shock.

Use accesskeys in the Primary Navigation

This is about the first rule which I think most traditional web designers making sites for a computer would perhaps not consider. But using accesskeys could make navigation on a mobile device considerably easier.

<li><a href=”home.html” accesskey=”1″>Home</a></li>

This links the “1” key on the mobile device to the Home link.

Use Ordered Lists for Navigation

Again something most professional web designers using CSS layouts will be quite confident with.

Link Phone Numbers

One of the benefits of the Mobile Web is that its users primarily view it on their phone, so allowing the user to quickly and easily make phone calls is a pretty cool idea.
<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.

Caching

“Limited bandwidth and high latency can reduce the usability of Web sites on mobile devices. Using caching information effectively can reduce the need to reload data such as style sheets, images and pages, thus improving performance and reducing cost of use. It can also prevent the reuse of content where this is not appropriate, for example content that is adapted for one device should not be re-used by different devices. Devices and network caches are both affected by caching information.

How to do it:
Set expiry times in a way that is appropriate to your application. Consider using Cache-Control: public to allow sharing of pages between devices, Cache-Control: private to allow re-use but only by the requesting device and Cache-Control: nocache to prevent caching.”
– W3C Mobile Web Initiative

Tab Order

Consider the order of elements on your page by either completely avoiding the tabindex attribute and allowing the browser to determine the logical order of elements, or by specifying the order explicitly. Either way it’s worth checking the page works as expected when tabing through links and other elements.

Labels on Forms

It’s good to use the <label> tag to link labels to form elements. I typically build forms using a definition list, as this represents in my opinion a semantically correct markup for a form which also looks perfectly ok even without any styling at all.

References

Mobile Web Developer’s Guide from dev.mobi

W3C’s Mobile Web Initative

Mobile Web Best Practices 1.0