Some Guidelines for Mobile Device Design
You don’t need me to tell you that mobile internet devices are becoming increasingly popular. Hell, even my phone can be used to check email and read my Google reader, and it’s a few years old in design.
However, I find myself more or less restricted to Google’s websites, since they’ve done a very good job of creating mobile versions of their apps, which are usable even on my 1.25×1.5″ screen. Other sites are too much of a pain to bother with.
I’m not talking about things like the iPhone here; they’ve been specifically designed to make the web usable in its existing state. I’m more talking about phones that we regular (i.e. thrifty (i.e. poor)) folk have.
Here are a few guidelines to follow for mobile sites.
Content on Top
Aside from an <h1> and/or small logo at the top, you should put body content first. Mobile phone browsers are much more likely to want what’s on that exact page, especially if this QR Code business ever catches on here. (Incidentally, if anyone is interested you can get a QR Code sticker for your business from Evocode.)
After your content, you can put your navigation links. More on that later.
Keep Content Focused
Eschew surplusage. Writing for the web demands you be succinct, and for mobile devices this need for information density is amplified.
Use Keypad Navigation
The little-known accesskey attribute may be placed on links, simplifying navigation. Make this a number, and most phones will accept a keypad press as a click on that link, e.g. <a href=”#” accesskey=”1″>. Just be sure to mention the number before the link so the user knows to press the button.
CSS: Keep the Colors, Ditch the Rest
Don’t try to get fancy with positioning, or fonts, or layout. The best thing that can happen is that the phone will ignore you; the worst is that the phone actually tries to create a column and ruins everything. Fonts will almost certainly not be recognized.
However, as long as you ensure sufficient contrast, colors are perfectly acceptable. Even a small gradient background image, if you like.
To Serve a Different Page, or to Use CSS?
If you already have links at the bottom of your page, you can simply use a different stylesheet to hide elements that you don’t need, using <link … media=”handheld”>.
However, if you don’t have links at the bottom, or if you need a more thorough way, you can use a detection script to determine whether the browser is a mobile one, and serve different pages or versions accordingly. On design.adambard.com, I’ve simply overloaded the header and footer for the mobile versions to display less information, leaving the content untouched(although I could definitely stand to tighten up the writing).
Another method is to use a different domain/subdomain/url, which serves your mobile content instead of the traditional content. This is the most thorough method, since it can avoid issues with mistaken detection.
More Resources
Here is a device-detection script in PHP. You can use this to serve different pages to mobile or pc clients.
Here’s a mobile phone emulator.
Here’s a sitepoint article with more on this subject.