My there! My name is Steve Kwan. User experience design is my passion.

Testing webpages on mobile devices

(April 11th, 2010 - 8:35PM)

When I test webpages against mobile devices, I'm reminded of the 1990s.

Those days were really the wild wild west of the Web. We were seeing newfangled things like JavaScript and table-based design, and nobody even knew what CSS was. Best of all, every web browser had a set of browser-specific functionality, and you could never count on your site behaving the same in any browser. Remember those awesome "This site best viewed in Internet Explorer at 1024*768 resolution" disclaimers at the bottom of webpages? Ahh, the good old days.

Flash forward to 2010 and it's deja vu all over again. Ever since the iPhone decided that no, it was NOT going to use handheld CSS like every other phone, mobile development has gotten infinitely more difficult. This is not necessarily a bad thing - the mobile web has grown leaps and bounds because of this - but it means that we designers have a much bigger job to do when we design webpages for mobiles.

You see, the iPhone THINKS it has a fully functional desktop web browser, but it really doesn't. Regardless of all the amazing things that Safari on the iPhone can do, whenever you take a webpage designed for a desktop screen and cram it into a 320 * 480 mobile, you're going to get all sorts of display artifacts and other problems.

It's even more complicated now, because there are a plethora of mobile devices you have to consider and they all behave differently. In addition to the iPhone, you have to worry about Blackberries, Android phones, and simpler devices that use handheld CSS. So with all these things to worry about, how do you test your webpages for mobile devices? Hopefully the following helps.

Detecting and handling mobile devices

If you want to design for the mobile web, the first thing you have to do is detect whether your visitors are using a mobile device. And if they are, you need to know which one. It's not sufficient to assume that all mobile devices will display things the same way, because they won't.

There are a few different strategies for detecting and handling mobile devices. Here are the most common ones.

• Checking the user-agent

  Whenever a visitor comes to your website, her web browser will tell you which user-agent (browser) she's using. You can access this information, and alter your website accordingly, in JavaScript or with server-side scripting.

  Others have already written extensively on this subject, so rather than provide my own examples, here's a good write-up by David Walsh:
  iPhone & iPod Detection Using JavaScript

• Checking browser capabilities and resolution

  Instead of specifically checking the user-agent and acting accordingly, you can check the browser's capabilities instead. For example: instead of writing specific code to check for iPhones/Blackberries/Android phones/etc., you can check to see if the visitor's screen resolution is 480 pixels high or less. This usually means your visitor is using a mobile device.

  In a perfect world, this is better than detecting the user-agent. After all, if you're checking browser capabilities instead of specific browsers, you don't have to write special code for each possible mobile device. However, in reality not all browsers will properly report their capabilities and this can make using this option difficult.

  Again, people have already discussed this extensively, so here's more information from boutell.com:
  WWW FAQs: How do I design web pages for the iPhone?

  I particularly like the boutell.com article because it goes beyond explaining how to check for capabilities, and also explains the real-life pitfalls that can occur if you use this method.

• Using CSS for handheld media

  Last but not least, you should always include CSS for handheld media. Some mobile devices, especially the less functional ones, will ignore your regular stylesheet and look for a handheld one.

  There are two common ways to specify a handheld stylesheet:

  1. Specifying a media type in the <link> element itself

     <link href="myhandheldcss.css" rel="stylesheet" type="text/css" media="handheld"/>

  2. Specifying a @media selector in your CSS file

     @media screen
{
    p
    {
        font-size: 10pt;
    }
}
@media handheld
{
    p
    {
        font-size: 12pt;
    }
}

  Bear in mind that although many basic mobiles use handheld CSS, devices such as iPhones will ignore this and use the same CSS as a desktop.

Testing for the iPhone

Unfortunately, the best way to test for the iPhone is to actually use an iPhone. If you don't happen to have one, there are some emulators out there that may help.

The iPhone SDK purportedly includes an iPhone emulator, but luckily I haven't had to use it because I own an iPhone. Unfortunately, Apple only provides the iPhone SDK for Macs, so Windows users are out of luck.

There are also several online iPhone emulators such as iPhoney and TestiPhone.com, but in my experience these two do a poor job of emulating the iPhone; they appear to just render Safari in a clipped window.

Testing for Blackberry mobiles

RIM has been good enough to make not just one, but multiple Blackberry emulators available for testing. You can get them on the Blackberry Smartphone Simulators page.

But unfortunately, RIM only makes these tools available for Windows. Still, they're better than nothing.

Testing for Android mobiles

Google has been great about helping us test our sites on Android devices. Google's Android Emulator runs on both Windows and Mac, and can emulate multiple device types.

Testing for devices that use handheld CSS

Handheld CSS is pretty easy to test. All you need to do is configure your web browser to use handheld CSS instead of screen CSS. There are different ways to do this depending on the browser you're using.

• Testing handheld CSS in Mozilla Firefox

  1. Install the Web Developer extension. (Every designer should have this extension installed.)
  2. From the Web Developer toolbar, select CSS > Display CSS By Media Type > Handheld.

  This should result in your page being extremely trimmed down, because all screen CSS will be ignored. For a true mobile experience, shrink your Firefox window to a really small resolution and see if your site is still readable.

• Testing handheld CSS in Opera

  1. Select View > Small Screen from the menu.

  Again, your page will be trimmed down and will use handheld CSS instead of screen CSS.

Don't completely trust the emulators

A closing thought: don't assume that your webpages are perfect just because they work in an emulator! An emulator is no substitute for the real thing, so try to get your hands on an actual iPhone/Blackberry/Android phone/etc. Remember, an emulator is just that: fake.