Mobile Friendly Web Design Tips

The very day after comScore published a press release on mobile web usage, Virginia DeBolt at Think Vitamin publishes an interesting article: Make your site mobile friendly.

The mobile web is getting closer and soon enough web designers and developers will have to catch up with the limitations and possibilities of designing web sites for handheld devices. Here is a small collection of highlights from Virginia DeBolt’s article, mainly geared towards web designers and developers:

• Clean, semantic markup is crucial when you consider the variety found in mobile devices.
• Using the standard Opera browser, select View > Small Screen to see your page rendered in an approximation of what a mobile screen might display.
• Some of the phone and PDA manufacturers have emulators on their sites that you can download and use for testing
• Adobe’s Device Central, included in CS3, uses skins for dozens of mobile devices to display your content in various ways.
• For those mobiles that do understand CSS, using link is more reliable than using @import for bringing in styles.
• Eliminate floats, frames, columns, scripted effects and decorative images.
• If you have a long navigation list at the start of the page, add a skip to main content link, or move the links to the end of document flow.
• Reduce margins, paddings and borders to suit the small screen.