Tip #5: Add a Little White Space
When designing for the mobile screen, it’s tempting to try to cram as many elements as possible into the smaller space. Resist the temptation. White space is an important element of any page design, and even more so for small screens. Too much stuff in a small space is both visually unappealing and difficult to navigate. The admonition to keep it simple applies to design as well as content.
Tip #6: Don’t Do Tables
If you use tables on your main website, ditch them for your mobile site. Tables simply don’t display well on mobile devices; if a table is too wide (which it probably is), it throws off the entire page.
Tip #7: Consider Color Contrast
Getting into the design side of things, know that not all mobile devices have great screens. (The iPhone shines here, but not every phone is an iPhone.) Some devices simply don’t reproduce color well; some devices don’t even have color screens.
To that end, pay attention to the contrast on your page, and make sure the text color is in sharp contrast to the background color. And when in doubt, remember that good old black text on a white background works best.
Tip #8: Keep It Small
With cellular data network speeds in mind (and knowing that even 3G networks aren’t always speedy), you need to work hard on keeping the file size for the entire page as small as possible. You want to aim for a maximum page file size of 20KB. Smaller is better.
Tip #9: Minimize Text Entry
If you require a lot of visitor interaction on your site (user names, passwords, contact information, and the like), rethink how you get that input. Put simply, it’s difficult to enter text on a mobile phone; you have to click here and press there and then tap an onscreen keyboard multiple times just to record a single letter.
Instead, consider accepting input via simple radio buttons or lists that visitors can select from. Require as few input keystrokes as possible; otherwise, customers might just leave if they have to do too much onscreen typing.