Image Blog Responsive Web Design Testing Tips
August 11, 2016

Tips for Responsive Web Design Testing

Digital Experience

Is your website ready? Can it conform to any screen size? These questions are driving developers and QA managers to a mobile responsive web design (RWD) approach — including responsive web testing.

What Is Responsive Web Design?

Responsive web design (RWD) is an approach to design and development. RWD responds to user's behavior and environment based on screen size, operating system, or browser.

But responsive web design doesn't stop with design and development. You need responsive testing, too.

What Is Responsive Testing?

Responsive testing ensures that users get an optimal experience, regardless of their device.

Responsive Web Design Testing Strategy

You’ll need to test responsive design to ensure that the content and elements function as they should across devices, browser versions, and screen size variations. A responsive web design testing strategy can ensure your test coverage includes the top permutations. You can increase efficiency with parallel testing too. Learn more about making a strategy below.

Why You Need a Responsive Web Testing

Without testing, users will have bad experiences.

Teams building responsive websites are up against complex user environments. Network connections are always changing. Devices and screen sizes vary. And websites are exposed to pop-ups and other interruptions. A sound strategy for testing responsive web design will help prevent these real world conditions from tarnishing the user experience.

Breakpoint Animation

 

With improving the UX in mind, we've collected some of our best responsive web testing tips covering topics such as visual testing, user condition testing, common mistakes to avoid, and advice for selecting the right devices and browsers to test on.

3 Responsive Testing Mistakes to Avoid

Building responsive websites — and putting them through rigorous testing — will ultimately equal satisfied users. Yet RWD testing is rife with potential pitfalls. Here are 3 mistakes DevTest teams should avoid when working on responsive websites.

1. Forgetting Mobile Devices Aren't All the Same Size

Developers base their RWD layouts on breakpoints (the points at which a site is not displaying information correctly on the screen). There's a layout for phone, one for tablet and one for desktop.

Developers will sometimes use one layout for all smartphones, but that can be costly. Using the same RWD layout for, say, iPhone 4 and iPhone 6+ will cause website content to display incorrectly.

When you're designing your responsive website for a smartphone, always consider the smallest screen size in a size range. If your breakpoints choose Layout A between width of 250 pixels and 450 pixels, be sure to test on the smaller end of the range because images tend to get misaligned on smaller screens.

2. Not Testing on Real Mobile Devices

Mobile devices come with various screen sizes and resolutions. They are up against switching networks, phone call interruptions, and heavy user load. All these factors will affect how your website appears on the screen.

First and foremost, define the most important devices for your company to test on. And then, for the reasons listed above, test on the actual devices, either manually or through test automation.

 

While emulators are good for basic manual testing, they do not mimic the true web user experience on a real smartphone. They lack the hardware modifications that affect the viewport size and therefore the visual correctness of the site.

3. Relying Solely on Functional Testing

Functional tests confirm that website features work according to the code. But these tests do not validate that buttons and links are aligned correctly on all browsers and devices.

If you ran a Selenium test to click on different links and buttons on a page, the test would say everything works. But in reality the buttons and links are misaligned. This is difficult to validate with Selenium alone.

You need to confirm the website appears correctly on all browsers and devices with visual tests that validate everything that's visible to the user.

 

[Related Content: Mobile Testing Basics]

 

How to Build Your Mobile Responsive Web Design Testing Strategy 

You need the right responsive web design testing strategy in order to be successful. Here's what you need to do to build it.

1. Define the Right Devices and Browser

Define the right mobile devices and desktop browsers for your manual and automated testing.

For mobile device testing, you can use your own customer data together with mobile device market data to fine-tune your device coverage, or use tools such as Perfecto's Digital Test Coverage Optimizer. For desktop web testing, look into your web traffic analytics to understand the top desktop browsers and OS versions that you should be testing against.

Below is a list of browser releases for 2016. Notice the amount of beta versions in the recommended testing mix due to the fact that browser updates often happen automatically without users knowing.

Web Calendar

 

Once you've defined the mobile web test coverage, you can move on to the next steps.

2. Do Parallel Testing

It's important to do parallel side-by-side testing for mobile and desktop websites. This increases your test efficiency and is a critical part of your responsive web design testing strategy.

3. Evaluate Your Devices and Browsers Regularly

It's important to revise your mix of devices, OSes and browsers once per quarter. This helps you make sure your testing matches customer needs and market share data. To stay informed, subscribe to receive our quarterly Digital Test Coverage Index.

 

4. Add Visual Testing to Your Code

RWD Issue

With responsive design websites, app development and testing teams must validate that when screens resize or change position, the viewports also change to ensure that site content is not truncated (see the image of Wikipedia's responsive website on left).

The way to achieve this is to build in a responsive website design testing strategy that can identify all DOM (document object model) objects on desktop and mobile web browsers. You must also add into your automation script all relevant user interface check point validations that compare the visual display on the screens when there are changes in screen size or screen orientation.

Important visual check points to consider when testing responsive websites:

  • Alignment of text, controls, and images.
  • Text, images, controls, and frames do not run into the edges of the screen.
  • Font size, style, and color are consistent for each type of text.
  • Typed text (data entry) scrolls and displays properly.
  • Pages should be readable on all resolutions and screen orientations.
  • Content defined "important" needs to be visible in all breakpoints.

5. Test Site Navigation Across Devices

When users access a responsive site, they often start on a smartphone, move to a tablet and then to a desktop browser. These user paths need to be covered as part of navigation testing so that nothing on the site breaks along the journey.

It's also important to keep in mind that some RWD site testing will work perfectly well for larger screens, but may break down on other devices. Users are likely to access an RWD site on different screen sizes with different site breakpoints and content arrangement, so it's critical that users can comfortably complete a full end-to-end run through your website across devices.

You should validate the following when testing for cross-device user navigation:

  1. Can the user still continue with the previous screen's functionalities?
  2. Does all the relevant content display correctly and allow the user to complete his actions?
  3. Is there a consistent UX across devices (including object names, labels, colors, etc.)?

See for example (below) how Perfecto's responsive website looks across different screen size widths. It's critical to validate that the site menus allow for full site navigation and that website features operate across all sizes, platforms, and user conditions.

Different Screens

 

 

6. Test for Real User Conditions

One of the great benefits of responsive websites is they give the user a consistent web experience on any device, in any location. But the user is constantly moving between environments that have various conditions that can disrupt the user experience, including:

  1. Network conditions (poor, good, no network)
  2. Locations
  3. App context based on platform and location
  4. Background activities (apps running and consuming resources)
  5. Ads and other pop-ups that block your site content (see image below)
Pop Up

With all the different operating environments to consider for both mobile and desktop, testing teams should include real user condition testing as part of their responsive web design test plan. It will reduce the chance of a poor performing app being released to the public and will give your DevTest team peace of mind.

Feel free to download this handy Responsive Web Testing Checklist so you can reference these tips as you work on your next project!

How to Make a Responsive Website Testing Plan

Getting RWD right requires a comprehensive, organized plan. Here's what to include in your responsive website testing plan.

1. Make Sure the RWD Site Looks Right

Assure that visually the RWD site looks “right” on all platforms

  • In any screen size/resolution and viewport.
  • When changing orientation from landscape to portrait.

2. Test Client-Side Performance

Perform client-side performance testing that assure load time and responsiveness is well-optimized across all platforms. Sites are extremely heavy on objects and resources. Loading them on various devices and browsers needs to account for these resources size and load time.

Graph web plan 2
Average number of objects per website (source: Perfecto RWD guide ebook)

 

3. Test Navigation

Navigation testing is a key component for site adoption, engagement, and UX. Make sure that all transactions can be easily performed and navigated to across all screen sizes, platforms and in the different viewports.

4. Test For User Conditions

Testing for real user conditions is another key for success. The end-users are consistently transitioning between platforms and screens. Their working conditions that include network, alerts, and pop-ups on mobile and other “noises” may impact the RWD quality.

Make sure to test for these real-life environment conditions. Google Chrome developer tools can provide network HAR file, performance metrics, and other insights. These will help you address these kinds of tests in addition to other load testing solutions.

5. Test Accessibility

Accessibility testing is not just a “nice to have” requirement. It is a compliance requirement that needs to be well tested and addressed for both mobile and desktop web.

There are tools like Wave, as well as built-in browsers tools in Google Chrome browsers that can audit your site and offer recommendations for fixing non-compliance issues related to accessibility.

6. Ace Test Coverage

Acing the test coverage in the Lab for mobile and web.

Summary web plan
Recommended coverage for all app types (source: Perfecto Factors Magazine)

 

Use the above guidelines to ensure test coverage. And use advanced reports and analytics that  indicate how the RWD site looks like across platforms and through the functional testing progress.

Lastly, considering use of headless browser tools like Google puppeteer and phantomJS, can offer additional test automation productivity capabilities.

Heatmap in a website test plan
Cross platform mobile and desktop web heatmap report (Source: Perfecto DigitalZoom™ Analytics)

 

Get Web and Mobile Responsive Design Testing With Perfecto

Perfecto makes it easy for your teams to test mobile responsive design and responsive web design. 

That's because Perfecto offers cross-browser testing. Perfecto integrates with test automation frameworks, like Selenium. 

By using Perfecto, you'll be able to continuously test everything — accessibility, load time, and more. You'll improve test coverage. And you'll be able to make sure your RWD site works for everyone.

See for yourself. Try Perfecto for free today.

TRY PERFECTO