Prepare your content for mobile users

1. Keep it succinct

The use of basic, succinct copy is a best practice for the WWW anyway. Web users do not want flowery marketing language, they want the "meat"—and they want it quickly. Usability pundit Jakob Nielson summarizes this preference in Reading on the Web: "Web users are busy: they want to get the straight facts."

If Web users are busy, mobile users are busier. Mobile users are often only accessing sites to look for specific information (such as an address); they are usually not browsing for leisure. So give them the information they want—without making them scroll endlessly!

2. Keep it semantic

Again, using semantic markup wherever possible is a normal Web design best practice. Its importance however increases on mobile devices. For instance, many mobile devices do not support CSS; on such devices, your font specifications will be useless. But if you are using elements like subheadings correctly, these browsers can at least render these subheadings according to their default settings.

I.e., <H2> can be rendered as a subheading because there is a default style associated with this element; on the other hand, <p class="subheading"> requires CSS to render as a subheading. Many mobile browsers will simply render this as a paragraph. It will not be differentiated visually as a subheading.

The bottom line: if you have not yet given up on the illusion that you have total control of your site's presentation, do so now! Using semantic markup will minimize the "damage".

3. Validate, validate, validate

On mobile devices, standardistas may finally have their revenge. Unlike modern desktop browsers which can usually correct even the most egregious of errors in markup, many mobile browsers will not properly render sloppy code. Therefore, the use of valid markup will ensure that your content can be displayed legibly on more mobile devices.

4. Don't catch DIVitis

Many designers heavily rely (or even over-rely) on SPAN and DIV tags for presentation. This is a bad practice even in desktop Web design, since it decreases the portability of content. If a design only uses a few DIVs, it is much easier to transfer this content to a new design (or to change its presentation via CSS, for that matter). In the same way, minimal use of DIVs will make it easier to author a handheld style sheet. Furthermore, extra tags will result in additional code. Bandwidth is relatively expensive on some mobile services, and download speeds are relatively slow.

5. Adhere to accessibility standards

Adhering to accessibility standards might be the best thing you can do for your users, period. If you are unfamiliar with these, Section 508 or WCAG 1.0 are good places to start.

I cannot even hope to describe all of the ways increased accessibility will help your users. The entire point of accessibility is to make content available to anyone, regardless of any disability they have or the device they are using. Hint: this includes mobile devices! Standards are a guiding light in this sometimes confusing aspect of design. Accessibility standards such as Section 508 are not always perfect (or completely current), but if you adhere to them, you can achieve relatively high accessibility for your site without spending a lifetime on it. And as the standards change, moving content from the old standard to the new will be much easier than building it from scratch.

The sooner, the better

The good news is that readying your Web site for mobile users will improve its accessibility and usability for desktop Web users as well. Even if you are not sure if you want to implement a mobile-only site, the above practices are sure to make your content more accessible to mobile users now, and it will also make porting your content to a mobile-only site later much, much easier.