How to Test Mobile Web Pages and Applications

When you are building web pages and applications for mobile devices, one of the most important steps you can take is testing. Testing gives you a good idea of what your readers are going to experience when they come to your site, and by fixing the major problems ahead of time, you can avoid issues with your customers later.
Testing a page or application for mobile uses the same checklist as testing for a full-sized browser. You need to check that the page looks good before you post it, and then check it after it’s live. But one step that many designers ignore is testing on mobile devices. Even if you don’t have a separate page for mobile users, you should test your pages on mobile devices—especially tablets. Tablet devices are growing in popularity every year and it’s becoming more and more likely that some of your visitors will be on tablets. Touch screen tablets have some different design requirements, even if you expect them to use your standard full-sized site.
The more devices you can test your website on, the better, but your priorities should be:

• iPad
• iPhone and iPod touch
• Android tablets
• Android phones
• other smartphones
• standard cellphones

Most people browsing the web on older cellphones and less-capable smartphones will be fairly tolerant of design problems. But as the devices get more sophisticated, so will the expectations of your readers.

How to Test

There are a few steps you should follow for all your web pages to test effectively for both mobile and desktop browsers.

1. First you should validate your HTML to make sure that there are no egregious errors. The HTML doesn’t have to be 100% valid, but knowing what errors there are can help you eliminate them as the cause of any problems you discover later.
2. Then you should test your site on all the browsers you have on your computer. I recommend downloading and installing Firefox, Chrome, Safari, and Opera if you don’t already have them installed. These are available for Windows and Macintosh.
3. If you have another computer with a different operating system (such as Mac OS or Linux) you should test your site on that computer’s browsers as well. A site might look fine on Windows Internet Explorer and then completely break on Macintosh Safari.
4. Once you’re confident that the site looks okay on desktop computers, you should change the window size of one of the browsers to a smaller size. If you’re using CSS3 media queries, this may even make the design look different. You can use a plugin like Web Developer Tools to resize your browser window to different pre-set sizes to see how it might look on smaller mobile screens.
5. If you don’t have access to a different machine, you should test in an online tool like BrowserCam.
6. Then test on as many mobile devices as you can. The more different devices you test on, the better your website or application will work for your customers.

Options for Testing on Mobile Devices

Test on the Real Devices
The best way to test a website on a mobile device is to load it on a mobile device. In general, this means posting the page or site to a live web server and then browsing to the page on the devices to test them.
Most people, of course, don’t have access to multiple mobile devices, but there are some options:

• Buy the devices
• Rent the devices
• Borrow one from a friend or relative or ask them to test it and send you a screen shot and their thoughts
• Go to a store that sells them and visit your site on the test machines
• Use a testing company (such as uTest) to help test your site on mobile
• Hire people with devices to test your site

Use an Emulator
If there is no way for you to get a real device to test on, you can use an emulator. Emulators don’t give you as good information because they can be slower than the real device, and they don’t show all the features of the devices. For instance, you access emulators with your mouse, not with a finger like on a touch screen.