Testing Mobile Websites

By Mariola Dybas, Project Manager@ClearPeople


When we start to plan for a mobile project here at ClearPeople, some of the key questions we ask ourselves are: ‘How do we go about testing mobile websites?’ and ‘How many new devices do we need to test them on??’ The first thing that we do is some quick market research – are there any new devices on the market since our last deployment? Have there been any operating system updates that we should be aware of? Next we select key devices for the project; then find/purchase the tools that will help us to deliver a quality mobile project. There are three primary testing platforms that we use for testing mobile websites:

  • desktop browsers
  • emulators or simulators
  • actual devices
Of course, we would recommend to test on actual hardware devices in all cases, but there are so many these days – with new models appearing every other week. A key item for business owners to remember here is that testing on an actual device will always provide the most accurate results. However it would be a very costly exercise. You can borrow devices from your colleagues (as I’m sure you know, all developers love smartphones) or you can try to convince the company to purchase the most popular new mobile devices when they become available (for the purposes of work, of course!). However, don’t fret – there are many alternatives to hording your cupboards with dozens of smartphones (which of course are outdated after six months). Believe it or not, your standard desktop web browsers can be very useful when developing mobile websites. They are free and require no special hardware, and can also be automated using tools such as Telerik Test Studio or Visual Test Studio. Desktop browsers can easily be resized to the average smartphone screen and can be used with developer tools (such as ‘Charles’ on Mac or ‘Fiddler’ on .NET) to monitor performance issues or debug network traffic. For example, I can use the ‘Chrome’ web browser to test a smartphone application: Go to: Internet Options -> Tools -> Developer’s Tools. The ‘Developers Tools’ window in Chrome has many tools to help you find detailed information about any page you open in the browser. Using the ‘Elements’ panel you can view the source HTML or CSS styles and manipulate each of them without changing the live website. Click on the ‘Settings’ icon in the right bottom corner -> Overrides IE Overrides In the drop down menu you can select the mobile device that you want to use –  there is an extensive list including all the popular makes of iPhone, iPad, Android, BlackBerry, etc. You can also change screen resolution and then begin your test… BBC Mobile Site

The next option is testing on emulators or simulators. These are often free to download and can be very helpful with your test routine. An emulator is a piece of software “that translates compiled code from an original architecture to the platform where it is running”. Emulators don’t simply simulate a device’s operating system, they provide a means to run a virtual version of it on your computer. Emulators can reflect the true web browser environment, so they are very good for testing and debugging visual design. Unfortunately most automation tools do not work with emulators and must be used manually. Simulators are designed to provide a reasonable facsimile of the experience on a device. Most of them are free of charge but, like emulators, will never reflect differences in device hardware, performance, network speed etc. Simulators cannot emulate the actual system, so they cannot be relied on to test or debug front-end design or functionality. A very useful list of the emulators can be found at: http://www.mobilexweb.com/emulators A couple of my personal favourites are: Opera Mobile Emulator: http://www.opera.com/developer/tools/mobile/ This is the desktop version of the smart phone browser. It’s very simple to install and renders pages as close as you can get to how it would lookon a real phone.Opera Mobile Emulator - Galaxy  

Windows Phone  SDK 7.1 emulator: http://wwwmicrosoft.com/en-us/download/details.aspx?id=27570.

If you have any questions, please feel free to leave a comment using our contact form here.