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.
Link: Make your site mobile friendly (Think Vitamin)
There has been a lot of talk about CSS buttons lately. Very understandable, since there are a lot of web applications being developed today that could benefit from slick looking buttons without loss in accessibility. Before jumping on the train myself, I just want to emphasize that you should not use this technique to replace real form buttons unless you know what you are doing. That said, the script I am providing to this article can create the same stylish buttons out of boring input buttons as well as plain anchors.