This content is part of the Essential Guide: A guide to modern mobile application development strategies
Get started Bring yourself up to speed with our introductory content.

How to test mobile responsive design applications

Testing mobile responsive design applications requires different strategies for different needs. Learn how enterprises can improve the bottom line with proper responsive design.

Leading enterprises are starting to pursue responsive web applications as part of a strategy for making it easier to streamline app development across platforms and attract new users. Enterprise architects need to understand that responsive apps are part of a continuum of applications ranging from simple webpages to customized native applications for different smart devices. Testing these applications requires a comprehensive strategy that explores the physical characteristics of devices and different types of users.

One early adopter of a responsive development strategy has been Security First Insurance Co., which has pursued a mobile-first strategy to attract new users. Werner Kruck, chief operating officer of Security First Insurance, said that when they began launching an aggressive ad campaign, half of the customers were hitting the site with a mobile device. "We had to look at our whole strategy for customer experience and onboarding. Everything that was customer-facing had to be responsive design."

The company leveraged the IBM Mobile First Platform to simplify the development of a continuum of basic, responsive, hybrid web applications. This strategy improved the conversion and retention of new customers. It also introduced new testing challenges to ensure that customers on older phones and tablets received a fluid experience.

A continuum of 'appiness'

Mobile responsive design is part of a larger continuum of app experiences spanning from basic websites to native applications. It includes the ease of access of traditional websites with the more customized user experience delivered on native devices. Traditional websites don't scale well and can make user interaction clumsy, particularly on older devices. Responsive design dynamically adjusts content and navigation features for different types of devices.

Even though mobile responsive design leads to a more consistent experience by scaling content, performance can still be impacted by the use of features like larger image sizes and icons which need to be retrieved over slower networks and scaled to fit a screen. Kruck recommended organizations consider using adaptive design, which uses server-side logic to adjust the content for different classes of devices.

Kruck said, "Responsive is simply taking stuff and reformatting it to the size of the screen. Adaptive goes a step further and is rules-based to deliver the appropriate experience for a given device and network."

Leveraging a mobile back end can help to streamline the development process for this logic.

Use building blocks to accelerate responsive development

Enterprises need to incorporate a strategy for rapidly iterating responsive apps to address usability flaws, improve experience and better align the app with business goals. Some of this can be gleaned from in-house testing, beta testers and mining data from end users. Manually coding these into the application can slow this process down.

This process can be accelerated using building blocks to deliver incremental releases much more rapidly. "There are more and more 'building block' engines that let people build basic desktop and mobile apps without the necessity of becoming an expert in design and code," said Nina Stawski, UI/UX lead at Altiscale Inc., a big data cloud service. "Thanks to that, prototyping also goes live, and more companies prefer to design in code."

As a result, the development cycle is shortened and can do the early adopter testing of the new features. "I think, in the nearest future, a lot of interface companies will go 'micro-agile,' releasing every single feature ASAP and revising extremely quickly based on user feedback," said Stawski.

Frameworks like React are growing in importance and make it easier to implement a mobile responsive design and develop hybrid applications. "Reacts' role in inspiring new patterns in UX design is undeniable, though React itself does not have big chances to stay in fashion for longer than a few years, given the churn in web frameworks," said Marcin Warpechowski, lead developer at Starcounter. It's also important to adopt web components and CSS layout for responsive applications to enable UI modularity and adaptability.

Incorporate UI functionality into development

A faster pace of iteration can benefit by testing responsive application earlier in the development lifecycle, said Mush Honda, vice president of testing at KMS Technology Inc., an IT service provider. "A successful DevOps strategy introduces tools that minimize manual overhead and the potential errors introduced because of the manual involvement."

Some of the best practices Honda recommends for responsive application testing include:

  • Test on real devices as much as possible. Finding common resolutions or implementations of UI tests across devices minimizes redundant UI testing.
  • Tools such as Kobiton allow this kind of access without being exorbitantly expensive.
  • Test from the perspective (or context) of the workflow experienced by the end user. Check for "fit" on the size of resolution to ensure user workflows are supported across devices and user experience. Test for areas where there are multiple columns, buttons and so on in workflows compared to desktop interfaces. Look for changes that convert text icons when smaller resolution screens are in play.
  • Determine the usage of the app and focus on image and displayed information "quality" versus download speed, accordingly. Quality may be a higher priority than speed, or vice versa, based on usage of the app.
  • Focus on font sizes, scroll-ability and input methods (touch, voice, third party keyboards, etc.).

Calculate the frustration factor

Developers and designers of responsive mobile apps have to calculate the impact of code and design choices on user experience. "Typically, people get very frustrated if they have to wait more than one to two seconds for any UI feedback," said John V. Busch, CEO of dataVerve Inc., an IT development firm. A good target is to keep these times to between .25 to .5 seconds.

Busch recommends enterprises measure these timing differentials in already-deployed apps so as to insure that future releases don't change user expectations. "If you've built a community of users who are loyal, they will likely be upset by changes that seem to introduce a sluggish UI," he said. These timings can be captured from typical debug logging practices for manual testing or combined with automated UI testing tools.

Consider designing for business performance

The business executives driving mobile app initiatives are primarily concerned with how the mobile strategy drives the bottom line. This can include increased revenues, higher retention and customer satisfaction. All of these factors should be considered in testing the effectiveness of a mobile responsive design.

"As you release new versions of your applications, it is important to monitor the effects on both the application performance and the effects on business metrics," said Jon Thomas, principal product manager at BMC Software Inc. Changes to the applications should be driven by hypotheses with expected results. For example, if the enterprise deploys resources to additional availability zones, this change will show a lower latency rate for users in a particular region. Another hypothesis might be that reducing the steps in a checkout workflow will increase the percentage of users who complete transactions. "Enterprises need to have the data to either accept or reject our original hypotheses so that they can decide whether to keep or rollback changes," Thomas said.

Next Steps

Testing mobile responsive design applications

Should I focus on responsive design?

Meeting enterprise demands with mobile development

Dig Deeper on Mobile app development