View all web browser and mobile devices available in our cloud-based test lab.
Responsive web design is important, and responsive web testing is how you'll answer questions like:
These questions are driving developers and QA managers to a mobile responsive web design (RWD) approach — including responsive web testing.
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.
Responsive testing ensures that users get an optimal experience, regardless of their device.
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.
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.
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.
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.
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.
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.
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.
You need the right responsive web design testing strategy in order to be successful. Here's what you need to do to build it.
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.
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.
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.
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:
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:
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.
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:
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!
Getting RWD right requires a comprehensive, organized plan. Here's what to include in your responsive website testing plan.
Assure that visually the RWD site looks “right” on all platforms
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.
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.
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.
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.
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.
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.