Tips for designing mobile versions
Tuesday June 30, 2009
I use my iPod to browse Web pages almost daily these days, and I can tell you that while mobile Safari works well, there are some sites that are still nearly impossible to read. I hate having to zoom in so much to read the text that you then have to scroll side-to-side in order to read the whole line. And I've got 20/20 vision. I imagine that people with poorer eyesight just hit the back button when they get to those pages. This article on Templated Business How to create a mobile phone friendly website design shows you some specifics to make a more friendly mobile version of your site. I have a few suggestions of my own in my article Tips to Design Web Pages that Work on Small Screen Mobile Devices. But one thing I would always recommend - don't force people to use the mobile version, especially if it's a stripped down version of your site. If I can't get to what I want on your site from my phone or PDA, it's very unlikely I'll check it out when I'm back on my computer.
Note: iPhones will not honor a CSS include with media=handheld so if you want to optimize for iPhone you have to look for “iphone” in the user agent and conditionally serve up a media=screen stylesheet. Also, there is a nice iPhone browsing emulator called “iPhoney”.
(in reply to the earlier comment:)
Unfortunately, I don’t know of a way to run iPhoney on my WinXP PC…
Otherwise, I think that if the page uses (extremely) fluid layout, or at least has narrow enough columns, and minimum 1em for text-size, it should be OK for mobile users. (I don’t know if this is really true, though)