Testing Mobile Websites

Posted 6 December 2012 12:00 AM 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 look on 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.

Share:

Add your comment

 
 

 

Archive

Tagcloud

Digital Transformation employee engagement staff satisfaction productivity Microsoft Teams Office 365 Yammer cms content management system agile GDPR Microsoft Graph collaboration Microsoft sharepoint 2016 upgrade migration SharePoint Online 2016 Tech Trends Digital Disruption Context marketing marketing SharePoint 2010 SharePoint 2013 TFS Git security kentico Analytics intranet jquery QA Quality Assurance testing digital workspace content management websites Sitecore sitecore marketplace sitecore module cloud Microsoft Cloud Storage digital strategy technical consulting sitecore modules Experience database Sitecore 7 Sitecore 8 support account management customer experience Data Storage windows azure cms integration front end front end development prototype Cloud Storage StorSimple Front-end Development Layout SharePoint 2013 colour palette UI design website design log viewer sitecore cms website Azure big data business-critical sharepoint accessibility android apple chrome clear people clearpeople debug emulator ios mobile testing opera resize adobe desktop flash ie10 internet explorer 10 metro windows 8 bcsp SharePoint Advanced System Reporter reporting framework ControlMode form control master page placeholder publishing console SharePoint 2007 SharePoint error search search results search values software testing testing scenario audit content information architecture retention schedules PowerShell QuickLaunch scripts SharePoint server 2010 business solutions metalogix replication replicator storagepoint stena technet UK Technet picture library slideshow web part RTM released to manufacturing caml caml query MOSS 2007 query infopath