Over a million developers have joined DZone.

Best of Summer: Tips for Responsive Web Design Testing

Responsive web design is key to the success of any website that is meant to be viewed on any device. But accomplishing this is no small feat. Read on for some tips on how to implement an effective testing strategy for your responsive websites.

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

This summer, more consumers than ever are using different devices to shop, travel to the beach, work, and keep up with friends. Is your website ready? Can it conform to any screen size? These questions are driving developers and QA managers to a responsive web design (RWD) approach that delivers a seamless digital experience on any device, operating system, or browser.

However, 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.

Responsive Web Design breakpointsResponsive web design depends on well-defined breakpoints.

With improving the UX in mind, we've collected some of our best responsive web testing tips from the Perfecto Blog 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.

Your customers will thank you when your website works on all devices. And hey, a more efficient testing plan frees YOU up for more beach time.

Common Responsive Web Testing Mistakes

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

1. You forget that mobile devices are not 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. You don't test on real mobile devices

Mobile devices come with various screen sizes and resolutions and 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. You rely 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.

Read the full blog post: Responsive Web Testing: 3 Common Mistakes

Testing on the Right Devices and Browsers

When formulating a responsive web testing plan, 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.

Responsive Web Testing - browsersThe web coverage landscape for 2016. (Source: Perfecto)

Once you've defined the mobile web test coverage, the next steps are to:

  • Do parallel side-by-side testing for mobile and desktop websites for high efficiency.
  • Revise your mix of devices, OSes and browsers once per quarter to make sure your testing matches customer needs and market share data. To stay informed, subscribe to receive our quarterly Digital Test Coverage Index.

Read the full blog post: Responsive Web: Testing on the Right Devices and Browsers

Add Visual Testing to Your Code

Responsive Web Design misalignment

Responsive Web Design Misalignment

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 up above).

The way to achieve this is to build in a cross-platform test automation 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

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.

Responsive website on different screens

Perfecto's responsive website across multiple screen sizes. (Source: Perfecto)

Read the full blog post: Responsive Web: Navigation Testing Is Key

Testing 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)
Responsive Web Pop Up Ad

Ad blockers should be part of user condition testing.

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.

Read the full blog post: Responsive Web: Test for the Real User Experience

Answering the Responsive Web Design Challenge

With 40% of transactions today taking place on multiple devices (Criteo's Q4 2015 State of Mobile Commerce report), you can't afford to sit out the move to responsive web. Delivering a great responsive web experience for every browser, device and user scenario will drive more traffic to your site, helping you reach business goals.

But getting RWD right requires a comprehensive, organized plan. Applying the tips in this post to your day-to-day DevTest activities will help you improve the user experience for customers, achieve shorter time to market, and synchronize your web and mobile teams.

Happy summer and happy responsive web testing!

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

web,responsive,design,testing,responsive web,websites,responsive web design,experience,tips

Published at DZone with permission of Shane O'Neill. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}