Tips for Responsive Web Design Testing
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 — 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 web testing, too.
Why You Need a Responsive Web Design Testing
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.
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 Web 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 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.
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
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:
- Can the user still continue with the previous screen's functionalities?
- Does all the relevant content display correctly and allow the user to complete his actions?
- 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.
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:
- Network conditions (poor, good, no network)
- App context based on platform and location
- Background activities (apps running and consuming resources)
- Ads and other pop-ups that block your site content (see image below)
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.
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.
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.
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.