How to test responsive websites? Synchronous testing: tools & methods.

Stats of mobile devices use among Polish internet users is presented in the following table:

31.03-06.04.201424.03-30.03.201417.03-23.03.2014Apple iPad 19.72 % 20.22 % 20.20 %Apple iPhone 8.70 % 8.70 % 8.50 %Samsung GT-I9300(Galaxy S III) 3.51 % 3.52 % 3.45 %HTC Google Nexus One 2.61 % 1.96 % 2.41 %Samsung GT-P5100 (Galaxy Tab 2 10.1) 1.90 % 1.87 % 1.93 %Samsung GT-I9505 (Galaxy S4) 1.77 % 1.68 % 1.65 %Sony ST26i (Xperia J) 1.71 % 1.74 % 1.72 %Samsung GT-i9100 (Galaxy S II) 1.60 % 1.58 % 1.63 %Nokia Lumia 520 1.43 % 1.39 %1.39 %HTC Desire 1.33 % 1.28 % 1.26 %

Smartphones and tablets market is relatively diversified: currently users are free to pick from hundreds of products. Most of the web development companies follow the principle according to which in order to satisfy 80% of market demand it is enough to prepare RWD compatible with 20% of devices (Pareto Principle). In practice this means paying attention to first 20% of devices that occupy leading positions in ranking.

How Quality Assurance has changed when RWD arrived?

RWD (Responsive Web Design) is related with many changes on various levels of websites’ Quality Assurance (QA). Main goals of the Quality Assurance itself remained unchanged (from the front-end perspective it is still about achieving consistent look in all available views shaped originally by the graphic design templates; from back-end perspective – reassuring all the actions and features work properly, as spaced out). Changes relate to the context. There are new resolutions in use, new devices constantly appear, what comes with that – browsers range have been extended. Quality Assurance is still cross-browsers based, however it is also important to pay greater attention to site’s optimization in terms of particular device requirements. At the same time performance issues shall not be ignored. Site should run smoothly, what turns out to be significant challenge, especially when it is based mostly on complex JavaScript.

Not long time ago cross-browsing was limited only to known desktop browsers (Internet Explorer, Chrome, Safari, Firefox, Opera) used on laptops, PCs or Apple computers, where lower end of acceptable resolution was 800x600.

Must-have tools for RWD testing

With arrival of Responsive Web Design paradigm the testing time efforts extended. Testing process has itself become more complex. Fortunately, together with demand, new tools appeared on the market allowing synchronous testing and in the same time – making the work easier. Currently the most popular are:

Adobe Edge: Commercial software which synchronizes image on various devices. Application is quite complex during first installation’s steps, but its usage is rather intuitive and friendly. Test version allows synchronizing PC with one device only, commercial version – with many. Adobe Edge provides possibility to perform print screen simultaneously from all devices. Software consists of a module installed on main computer and free applications installed on particular devices. Page reload happens from the main computer level; unfortunately it is not possible to do this from the mobile device level. Main restriction of Adobe’s product is lack of support for certain platforms: currently tool can be used only on mobile devices running iOS or Android.

Ghostlab: Application that allows linking any devices (computer, tablet, smartphone) as long as they remain visible in same network. Opposite to Adobe’s product, real-time change of viewed page happens bilaterally: no matter on which device we load the page, changes will be made on all. Ghostlab is also equipped with “Weinre” console which allows checking DOM and debugging JavaScript. Another difference comparing to Edge is place from which site is displayed. With Edge there is an application responsible for that, here browser is used by entering IP of the main computer on which software is installed.

Less effective method, but significantly cheaper is using online services, such as browserstack or crossbrowsertesting. They emulate views from various browsers, operating systems and mobile devices on remote servers. Sadly, results are not trustworthy – from our experience we know that in mobile environment a lot of errors appear which can’t be noticed using emulation. Service can be used in order to preview results on the devices which we don’t have physically in-house.

SDK is a tool useful for the Android powered devices. Software and virtual machines “Android Virtual Device (AVD)” are free of charge and can be downloaded from Android SDK website.

Most of modern browsers provide possibility to adjust window size to popular RWD resolutions. In Firefox this can be achieved using Ctrl+Shift+M command. Google Chrome is equipped with more advanced system available in Developer Tools which also allows to emulate particular mobile device (Developer Tools > Settings > Show 'Emulation' view in console drawer).

A tangle of wires

Simultaneous testing on many mobile devices creates ergonomic problems. Having many devices on a desk forces to adjust tester’s working environment. It also results in tangle of chargers’ wires: it applies especially to the smartphones’ current generation, where battery life (especially remaining under constant load) can’t be compared to results achieved by Nokia 3210.

Interesting solution of this problem seems to be DeviceLab of the aforementioned Ghostlab’s creators. It is a work station connected with wires organizer, thanks to which we get rid of all unnecessary confusion on a desk. What is more, creators give us also possibility to pay with Bitcoin.

source: http://devicelab.vanamco.com/

RWD testing today. A summary

RWD is undoubtedly exciting area of web applications, increasing their usability and accessibility. Testing on various devices is new territory, which changes endlessly, constantly new devices with improved specification are released. Fortunately also new tools are being developed, both free and commercial, which facilitate testing of responsive websites on multiple devices. Developers and testers should constantly observe mobile market and new trends, simply - keep themselves up-to-date, looking for new solutions that can streamline and shorten testing process.