How to Make Your Website Mobile-Friendly
In case you webmasters out there haven't noticed, more and more of your web audience is using a small-screen, hand-held device to visit your websites. Now, if we know anything about web designers (and we know several), we know that they tend to curl up, moan, and rock in their Aeron chairs whenever you tell them "There's a new system you have to design for!" Indeed, when it's a hair-pulling challenge just to get the same menu to work in Internet Explorer and Firefox on two identical desktop systems, it seems almost hopeless that we'll be able to get the same page to display correctly on a screen the size of a wallet.
But it's not as bad as it seems. In many cases, designing for the mobile device is just like designing for the really small screen resolutions of desktop computers of 10 years ago. Screen resolutions run from 128x160 to 320x480. That top end of the range might give you a shiver of nostalgia - it's exactly a vertical half of the 640x480 screens typically seen in the first generation of graphically-capable desktop home computers. So if you remember designing for Windows 3.0, you'll be right at home!
The technology is in its infancy, too, so it's an ideal time to start learning it, when it's still basic enough to get your head around in one sitting.
The Tech
Most of the newer generation of mobile browsers support the same HTML, CSS, and EcmaScript (both Javascript and ActionScript varieties) that desktop and laptop browsers do.
New technology to know if you're never designed for mobile devices before includes WML (Wireless Markup Language), C-HTML ('Compact' HTML), and WAP (Wireless Access Protocol).
All of the above is based on the web markup languages and protocols you already know if you've worked a lick of web design, so there should be no sweat lost.
Design Tips
The biggest asset to a good mobile web design is space. We can't stress it enough; clutter will kill your web display. Design clean and clear. White-space is preferred. Non-Serif fonts are a given. Keep CSS to one-column or two columns at the very most, and keep floating elements to a minimum. It just isn't practical to try to cram several columns and side-by-side elements in a screen 200 pixels wide.
Graphics - keep them to the minimum. A banner or a logo is all you should need, if even that. Every image must have an alt-text tag, because users typically browse with images turned off.
Design light. Two factors are important to keep in mind here: One, users will be paying for each KB of data downloaded, and two, mobile devices don't have the Gigabytes of storage and Megahertz of power that large computing devices have. Both of these amount to a strong reason to keep the total bytes of data to download low, and also to be forgiving of the user's patience.
Use the basic set of HTML tags and attributes. Be aware that some of them won't work the way they do on the desktop. For instance, different mobile devices make no distinction between H2 and H4 header tags. Font sizes and families will be sketchy at best, since most mobile browsers know how to render one font and that's it.
Specify sizes in percentages or em units, never pixels. This is because hard-coding pixel values will wreck your layout. Your mantra should be "liquid layout". Test your web page in a browser window and drag the window to bigger and smaller sizes. Your web page should react like it's made out of rubber - it should expand and contract with the browser and flow into (hence the term 'liquid') any shape you pour it into.
Don't: Use tables. Use animated Gifs or Flash unless that's the point of the whole page. Use images for navigation, since some mobile browsers resize images and this will make them impossible to read. Use popups or non-web document formats.
Filed Under: The Internetz
