Mobile Website Testing Checklist

Responsive web design allows you to create “one website for every screen”. All changes made to the website are immediately applied across all devices. It’s simple, elegant, and very difficult to test.

This is because you are writing one set to abstract the differences between:

  • 9,000+ mobile devices.
  • 8 Android and 4 iOS versions.
  • 6 browser engines that can power hundreds of browsers.
  • Open Graphics Library – 4 different versions – and the Metal API for Apple devices (post-2018)

Problem gets worse when desktops/laptops are added to the mix.

To account for these differences, you’ll need to have a large army of developers. To find out a.), you’ll need a large army testers. what’s breaking, b.) What’s breaking, b.? on which browsers, c.?) why, and how to fix it, without breaking the design of another browser/device.

Allows over 2,000,000 developers to run more than 60,000,000 tests per month. To find out how responsive websites are tested, we spoke with some of these users. This is what we discovered. It’s a quick QA checklist to help your development, design, and QA teams.

The scope of responsive design testing

You might not finish testing responsive websites if your primary goal is to render on all browsers/devices. Here are some guidelines to help you set realistic constraints for testing responsive websites in a reasonable timeframe.

  1. Set design baselines: To visually compare a website to its intended design, you will need to take screenshots of each breakpoint. Take screenshots of the website in the browser or platform it was developed on. If you have the files, you can keep them on hand. This can be done on Screenshots.
  2. You need to identify the most important browsers and devices that your website uses. Your responsive design should be accessible to as many users as possible. You can do this by going through the Test page to determine the most used browsers, platforms, devices, and devices within a particular region. Next, choose the browsers and devices that are most popular among your site visitors. You want to secure 10-20 combinations of browser-OS and device combinations that are most popular with your current users and potential customers. Tip: Prioritize cross browser test on any browser OS that receives more than 5% of traffic.
  3. Identify the ‘core features’ that must be rendered uniformly across all browsers/devices. An online store selling apparel won’t launch if its checkout page isn’t legible on smaller screens. However, a page referred to by others that fails on smaller screens would not prevent the release. Test the most important pages first. Then move on to the other features.

The Ultimate Checklist for Responsive Design Testing

Once you have established some constraints, test your website manually on the appropriate browsers/devices. It is important to identify visual differences between the intended design and what you see.

Note: Browsers render engines are combined with device capabilities (display Resolution, GPU, graphics API etc.). Your website will look to the end-users. Before you deploy to production, make sure your website is tested on real mobile devices. This will allow you to spot major inconsistencies earlier than your users.

Responsive Design Testing: The Ultimate Checklist

After you have established a set of constraints, test your website manually on the appropriate browsers/devices. It is important to identify visual differences between the intended design and what you actually see.

Note: The capabilities of your browser’s rendering engine and display resolution (display resolution), GPU, graphics API, and graphics API will all affect the way your website appears to end-users. Test on real devices before releasing.

Design assets

Coca-Cola is a brand that you can picture as “white cursive letters against a red background”. This is the power of consistency in design.

Your brand’s visual identity is tied to color, typography, and icons. These assets can look very different when they are scaled or resized to suit different viewing angles. By testing, designers can make sure that users don’t find this difference too distracting.

  • Fonts Some fonts may appear jagged depending on how they are scaled. Windows, for example, doesn’t scale font weight uniformly. Mac OS does. Safari fonts look slightly thinner than Chrome, and Safari has a wider range of font sizes. Different viewports might have different visual outputs, so it is possible that line spacing and kerning can affect your visual output. Before you incorporate fonts into your design, make sure they are tested. Take screenshots and zoom in on your fonts to compare.
  • Media files To display conditionally, you will need multiple versions (based on the device resolution, browser and viewport). These images can be tested on slow networks (with Chrome Developer Tools, or similar) in order to ensure that they do not affect website performance (and thus SEO). Tip : You can also check for color inconsistencies between different browsers/devices.

Next, we’ll discuss bugs that can creep into a responsive design when it converts to a functional user interface.

Code

Bootstrap is a great framework that allows you to quickly create responsive websites. There is almost always an issue with buttons that don’t align or widgets that break upon resizing. It could be human error, or browser vendors who are still working on a consistent way to render web pages.

These tools will help you create responsive websites in a fragmented browser environment.

  • How can I use: For a list of browsers/device matrices which support a particular HTML, CSS or JS property.
  • CSSLint, ESLint: These tools help you create cleaner, more compatible CSS and JavaScript.
  • Standardize.css This base rule provides the basis for browser-specific default styling.

Once you have fixed the code, you will need to manually look for any visual issues. These are the most common issues in responsive websites.

  • Layout Start with the most basic layout. Resize the viewport to check if it ‘adapts to fit. Check the following:
    • Alignment Verify that the dynamic elements are aligned and spaced correctly.
    • Width Verify that each element’s width is compatible with the viewport.
    • Height This setting is generally unchanged in responsive design. However, for certain cases you might need to specify element height relative the viewport (like the Menu or Edit buttons on mobile devices). This can be tested on different mobile browsers.
    • Spacing & padding: Make sure elements don’t cross.
    • Conditional rendering Determine whether elements can be dynamically hidden, shown, or resized based on the viewport size.
  • Conditional Scroll: Check if input fields and the sign up button can be viewed/accessed behind the input keyboard for mobile screens.
  • Text You should test the following:
    • Text legibility: The text should be large enough that it is easy to read in any viewport. You can test to ensure that there aren’t pixelation or jagged lines on different browsers.
    • Horizontal scroll Links/long words can cause an unintended horizontal scroll for smaller screens.
    • Test the Input fields: Check the size and legibility of your input fonts on both browsers and viewports.
  • Responsive Images: Test the pages quickly and confirm that they are responsive.
    • The images are still in their original containers
    • Based on network speed and device resolution, the right image files will be displayed.
    • You can expand product images
    • If used, icon-fonts position correctly in different browsers and viewports.
  • Conditional rendering Test the elements that this behavior applies to if you are using CSS through JavaScript. SVG animations can be displayed on desktop browsers, even if the browser window has been resized.

Optimize your CSS, images, and JS files to improve performance. Minimize, compress, and inline whenever possible.

For QA engineers

This checklist is great for manually testing small numbers of responsive screens/pages. What happens if you have large web apps and need to ensure that every screen is responsive on all devices and browsers? Depending on how many manual testers are available, it can take hours or days to test each page and element. Some inconsistencies can be missed by human testers due to “change blindness”.

Responsive design automation can help you save time and catch a lot more visual discrepancies.

Visual regression testing is a good option. Test scripts can be written that compare the current appearance of your UI (at specific breakpoints) with a set design files/screenshots. If the pixel mismatch exceeds your acceptable threshold, the tests will pass or fail. Here’s a quick overview of how Hylke De Jong (Wehkamp.nl), used WebdriverIO with for a visual regression test.

Sure, responsive design is a nightmare to test, but it allows you to deliver an awesome visual experience–uniformly–across a range of devices. This is the best practical and long-term way to expand your reach across a fragmented device landscape.

This checklist will help you reduce the time spent debugging responsive websites. This strategy is good for cross-browser testing responsive websites on mobile devices.