Mobile Web Design: Keep It Clean!

At last count (and that count is probably already outdated), there were 2.4 billion mobile phone users worldwide. Traditional website design just doesn't take these people into account. A website that works fine on your laptop or desktop will not necessarily look very sharp on an iPhone or Blackberry.

If a mobile user can't use a site easily, they will go to the next one that is user friendly. As an example, I've done this myself with the website for the SyFy channel on television. Their site works fine on my laptop but their mobile site is difficult to navigate and is rife with errors. As a result, they were zapped from my iPhone's Google reader ASAP.

The easiest way to build a mobile website is to modify the one you already have. Don't start over, just change the CSS and HTML to reflect the new design using the tips below. But be prepared for major changes in design and layout.

1. Don't use tables as the main layout for a mobile website. They just don't look right on a mobile phone.

2. Mobile sites have to use CSS for the layout to ensure maximum compatibility.

3. Put all the most important information that you want people to see at the top of a mobile website. It can be time consuming and tiring on the fingers to browse through a lengthy site. Remember, it's all about making the web browsing experience convenient for your user. (Don't forget they're paying fees for the privilege to browse on their phone.)

4. Images should be in JPEG or GIF. All mobile phones can read these.

5. Don't use Flash if you can help it. iPhones are not compatibile with Flash (it's a long story, maybe I'll tell you later). That means that if your WHOLE site is flash, no one on an iPhone will be able to view it. That translates to approximately 6.4 million users in the U.S. not being able to access your site. (That number of iPhone users was from September 2009; it's probably higher now.)

6. Make sure to include back buttons and links everywhere. Many phones aren't equipped with the mighty back button so help the user out.

7. It can be tedious to type text into a mobile phone (unless you're a nimble-fingered teenager of course). Try using radio buttons and lists so they can make their choices through those instead of typing.

8. There is a maximum page size for a mobile site. The general safe number nowadays is 20 KB so keep the site under that number.

9. You can use Dreamweaver to create a mobile site from scratch which might be an easier option than revamping the current, traditional design.

10. You can't support every single device out there so the best option is to keep your mobile site as clean as possible so that it has the best  chance at being read across as many devices as possible.

For a more in-depth look at how to design a mobile site, check out Cameron Moll's excellent article and tutorial that gives you the nuts and bolts on how to execute a mobile design.