With the increasing trends in the digital market, new devices and software are flooding the technology landscape. The internet is not just constrained to personal computers or laptop screens; contributing to the growth trend are mobile smartphone devices and tablets that range from a variety of screen sizes and run on various operating systems (Android, iOS, etc.).
Studies show that global mobile data traffic has grown over 18 fold in the last five years. This is a staggering level of growth that has been greatly boosted by advancements in fourth generation mobile networks and the spread of Wi-Fi. With improved access, consumers today are starting to spend more time on their easily portable smartphones than computers or laptops.
When it comes to accessing content - especially multi-media - consumers want to be able to switch to their smartphones and expect the website to function flawlessly without much hassle. Consumers want this experience to be smooth and enriching. This intersection of device interchangeability and access consistency is where Responsive User Interface design comes into play.
Responsive web pages are more user friendly than a single page which can be run only on a 1024 x 768 screen. A Responsive User Interface (UI) needs to self-adjust, or 'respond', according to various screen dimensions. This issue has raised the competition among various companies that need to represent their content in every way possible to deliver an optimal user experience no matter which devise is used.
Responsive web pages adjust themselves according to the device size, orientation, browsers and OS. Responsive design concepts reduce the struggle of how the user interacts with the content being delivered on the screen irrespective of the make of the device. Different frameworks use different dimensional methodologies to create responsive web pages. Hence, there is a need to create a generic set of automated layout tests which verify the layout of the page irrespective of the framework employed.
Indeed, the use of Responsive UI design has brought in the need to validate the UI layout on various viewports so that end user experience is properly tested before releasing the application.
A perfect example of this need for Responsive UI Layout Testing comes from a recent project with one of our large enterprise customers in the Media sector. The customer was facing problems where its end users were unable to easily navigate to get access to content in the e-newspaper application due to its responsive nature. Users were experiencing issues with the content displaying properly on various viewports.
There were multiple challenges that needed to be addressed in order to provide a flawless user experience, including :
Ultimately, the customer needed a solution that could help make its product more optimized to enrich the end user experience, as well as make its content easily visible with varying screen sizes over different devices with optimum accessibility. This also meant that advertisements placed on the content needed to be properly validated so that there is no loss of revenue leading to stakeholder dissatisfaction.
The Bitwise QA Center of Excellence took up the challenge by first chalking out the Layout Testing Automation solution. The team's approach included the following steps, and the solution delivered was aligned with best practices :
The approach ensured that CB (Cross-Browser) and CD (Cross-Device) Testing was aided using a cloud solution coupled with an open source API to ensure optimum test coverage. These tests were then executed periodically during regression.
This resulted in ensuring that the content and elements on the pages are displayed flawlessly over various viewports. As a result, the test suite created added value to regression testing by optimally validating the UI on various layouts after changes were done to the applications.
Bitwise provided a complete automated responsive UI test solution that received enormously positive feedback from its users, leading to a 40% increase in ad revenues. In addition, the subscription rate increased due to the efficacious automated testing provided by our test suite design.
With our expertise in delivering solutions around Responsive UI Layout Test Automation, we set up a framework using open source tools and APIs. As a result of using our test suite to identify issues on various viewports and OS, the customer achieved ROI in terms of better quality and content leading to increased customer satisfaction. The test suites created were generic and easily maintainable, which also reduced maintenance costs and served as a cost saver during the long run.
What challenges are you facing in designing and testing your Responsive UI Layout? Leave a comment below or contact Bitwise...we'd love to help.
Sukhvinder through his unique experiencing of being on both sides of a development lifecycle – a developer and a tester, brings both the perspectives to the table. This experience has helped Sukhvinder bring in efficiency and quality to any solution he delivers. Sukhvinder leads QA DART at Bitwise and ensures that best practices are learnt and implemented in all projects across the organization.