Responsive 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.