Rick Whittington Consulting

When we take on a web development project or web site build, one service we provide to customers “out-of-the-box” is to code their web site so that it can be easily viewed on mobile devices. Here’s how we do it.

For starters, this is just a basic checklist — one that we generally follow on all projects. I‚’m not saying this list is exhaustive, but if you code web sites using the techniques below, customers viewing the site on mobile devices will thank you.

1. Use CSS to separate HTML code from presentational code and choose HTML tags carefully. First, this means that we keep the HTML markup as simple as possible. The CSS that styles the code is kept in separate files and we don’t use inline styles unless there’s a good reason to do so. Because viewing a web site on a BlackBerry is like looking at a web site with all styles turned off, we pay special attention to which HTML tags we use — specifically unordered lists, ordered lists, paragraphs, etc.
2. Add the company name in plain text near the top of the page. This can be done a lot of ways, from using image replacement techniques that replace the logo with the company name to including the company name in a hidden <div> at the top of the page. Note: the proper way to hide a <div> is to use a negative text indent, not set the display to “none” if you still want people using screen readers or search engines to see the content.
3. Put a “skip to content” link at the top of every page. In the header, or just above it, we usually insert a <div> that we hide with CSS (therefore only shown to those with mobile devices that don’t read CSS). Inside this div we put a link that says “skip to content” so visitors on mobile devices can skip the header and navigation without having to scroll.
4. Put the company address, phone number and e-mail address near the top of every page. In the same hidden <div> we put the “skip to content” link in, we usually include the company address and phone number. You can link the address to Google Maps so a visitor on-the-go can find you via map, and we format the phone number like ###-###-#### so it appears as a link to BlackBerry users. They can simply click it to call the company.
5. Place a “back to top” link at the bottom of every page. In a hidden <div> at the bottom of every page, we insert a “back to top link” that takes the visitor to the top of the page. Again, this is so visitors don’t have to manually scroll all the way to the top of the screen.

While these 5 tips are just a starting point, they will go a long way to making your site more usable on mobile devices. Of course, iPhone users and BlackBerry Storm users see pages with full graphics and text, but many people are still on older platforms, and making your site more usable for them is possible while not affecting the screen display of a person on a desktop or laptop computer.

What other tips can you share?