Designing for mobile devices

Accessibility
1

I’m just now gearing up to update my site for mobile devices.

It was a toss up between getting a blackberry or an iPhone so I could get first hand feedback on how my site looked and worked on a handheld.

I ended up getting a 32G iTouch. As long as you have WiFi availability you can surf the net all you want and you’re not paying a monthly cell phone bill which works for me with my current low budget for development.

I find the Safari Mobile Browser pretty amazing. If you are familiar with a site it is pretty easy to navigate. The ability to zoom in and zoom out makes all the full sized sites I’ve looked at pretty user friendly from my point of view.

I find sites like Amazon and Wikipedia that have mobile pages “not” as user friendly as a site that doesn’t have mobile pages. Primarily because the mobile pages don’t let you zoom in or out. You’re stuck with a small font and page that can’t be re-sized.

This has me wondering if it would really be worthwhile to put the effort and time into coding for small devices at this stage. It seems to me that the Safari Mobile Browser has set the bar to a level other devices will eventually rise to thus making mobile pages obsolete. That’s just my opinion on my initial peek at the smaller side of things as they stand today.

If anyone has any other thoughts, theories, or philosophies on the subject and where it is going in the future, I’d like to hear your viewpoint before I lock myself into a strategy.

Thanks,

2

Some things to know…

The “mobile” sites are built for those so-called non-“web-ready” mobile browsers (Safari and Opera mini/mobile and other zooming browsers are full-web browsable), and since you never know which kind of mobile or PDA is going to try to visit the site, if you’re big like Amazon you’ve prolly gotta have a mobile version.

Mobiles are often either touch-screen or use a stylus. Things to keep in mind then are, don’t rely on hover or focus to do stuff (styluses and fingers don’t seem to be able to invoke hover and sometimes also not focus). Dropdown menus come to mind. Select dropdowns (combi boxes) in forms may also be a problem (I’m not sure about this).

JS, even when enabled, drains batteries fast. As far as I’m concerned, until battery technology is improved for all popular mobiles, make the server do all the work.

Some mobiles accept a handheld stylesheet as the sole stylesheet. Some incorporate the handheld stylesheet with the regular screen one. Others ignore it entirely. I consider this a Browser War thing and would either only write for one particular mobile browser (or one that understands @media-query stuff) or sit it out. Who wants to go back to the days of “works either on Nutscrape or IE”? Forcfully steering a mobile to another, mobile-only site gets more attractive then.
Heh, Facebook sends the Konqueror DESKTOP browser to a wap page. So be careful with scripts that check OS or user-agent.

You may be able to ignore a lot of these issues if you are specifically building for one particular mobile, because then you will know the browser and prolly most of the devices running that one browser (you said you’ve got an iTouch). But a site working well on one mobile may not work at all on another because they range so differently.

Don’t forget this isn’t just phones. A friend of ours, before going to Afghanistan, bought a mini PlayStation 2 or 3 (I don’t keep track of these things, whatever was available in 2008) and it used a proprietary browser which reflected a FF2 bug (but did not react to the FF2 bug fix with the -moz property) made by a company called “Oregan” I think. I could not find any information about their browser other than their propaganda (no specs). You’ll run up against this, and there’s little you can do. You simply can’t buy 100 different phones and get a site working brilliantly in all of them.

Jamesicus once presented an interesting way to do a test among mobiles: go to a mobile phone shop, and ask the salespeople to show you how well their various phones deal with the Internet (and specifically your site, as if you would only consider buying the phone who can show your site). Sounds like something you can only do once, but it’s an idea.

Interestingly, Opera’s browsers are gaining huge popularity in SouthEast Asia and India. If you know your site is targetting that part of the world, you might also be able to get away with just Mini/Mobile Opera testing.

*edit I should add this: I am not a mobile user. I had one once, used it little, and now it’s dead in a drawer. I have a mobile allergy. This may colour my above statements : )

3

dbr, I’ll backup everything Stomme has said with the following simple tips:

  1. While modern mobile browsers like Safari have “panel zooming” functionality, the point of mobile versions are for those older phones that don’t.
  2. Having a mobile version separately allows the iPhone and other modern devices to use the “full” site, others can use the “mini” site if they wish.
  3. Mobile sites are more than just resolution, it’s about reducing bandwidth usage and download times (mobile broadband can be slow and costly).
  4. Don’t try hybridizing your existing site (keep mobile on a subdomain), targeting mobile devices is like building HTML emails, next to impossible.
  5. While mobile versions may become obsolete in the future, it’s still something worthy of covering, there’s more than just the design at stake.