Testing Responsive Web Design

What is responsive web design?  

Responsive web design is creating a single website that works on any device or screen size. The goal of responsive web design is to create an intuitive and enjoyable experience for users, regardless if they use a desktop or mobile device. A responsive design example is where pages adjust to a desktop, mobile device, and tablet. 

It is desired for users to have a good user experience and responsive testing is critical to ensuring this. It cannot be assumed that pages will work flawlessly across various browsers, operating systems, devices, and screen resolutions. There is also a variety of different ways users interact with websites on various devices that need to be tested, for example scrolling on a desktop and swiping on a mobile device. New devices and technologies are continuously introduced to the market which requires testers to be dynamic in testing strategies to ensure positive user experiences. Since testing on every device and browser version is not possible creating a responsive test strategy is important to assist in setting testing priorities. 

How does responsive web design impact QA’s?  

Responsive web design does not stop with design and development. There needs to be responsive testing too. When QA’s test responsive design they add value to ensure the content and elements of the page function across various devices, browser versions, and screen sizes.

What are some key elements in responsive testing?

Responsive web design involves creating a flexible web page that is accessible from any device. Responsive testing calls for some additional evaluation than testing on a desktop. Below are some key elements to pay attention to when testing responsive web design. 

Test the typography

• Content is readable on every device across every browser
• Check for consistency of font colors, styles, and sizes

Test the display

• Text, buttons, images, and controls are aligned and do not run off the edge of the screen
• Text, buttons, images, and content do not overlap
• Content displays on all screen sizes and viewpoints (portrait and landscape)
• Users can scroll vertically or horizontally when applicable
• Padding exists, padding is the space that's inside the element between the element and the border.

Test for smooth navigation

• Users can successfully navigate via links and menus on all devices
• Users can access the previous screen
• Navigation offers a similar user experience between devices 
• Hamburger (three lines) icons are often used on mobile devices since it makes it easier to view options. When testing responsive design verify all the file menu options display, options navigate to the correct page, and a consistent user experience is offered.

Test for pop-ups

• Check pop-ups can be accessed, all functionality works, and are responsive on all devices.

Test for user experience

• Check for consistent user experience across devices, the responsive page should look and feel the same from one device to another. For example, on a mobile device the navigation may be displayed vertically and on a desktop it may be displayed horizontally. The content is not displayed the same, but a similar user experience is offered across devices.

What tools are available to test responsive web design?  

Below is a summary of four testing tools that can be used for testing responsive web designs. These tools can be used to replicate a variety of responsive scenarios.

CrossBrowser

·        CrossBrowser allows a website to be tested for responsiveness. Various screen sizes, devices, and browsers can be tested for. With this tool, the browser, browser version, and device can be selected. Tests can be recorded once and easily reran for multiple responsive scenarios or in other environments. 

Use the Browser

·        View the web page in various browsers (Chrome, Edge, Safari, and Firefox), mix it up. Exercise variety in the browser used to execute test cases.

Emulators

·        An emulator is a tool provided within the browser that helps see how websites will be displayed and behave on different phone models, operating systems, and tablets.

·        Chrome Emulator

·        Open your web page using Chrome, press F12 to open the Chrome DevTools. Turn on device mode by clicking the Toggle Device icon. Use this mode to view various devices, screen sizes, and view as portrait/landscape. 

·        Firefox Emulator

·        Open your web page using Firefox, in the menu select Web Developer and select Responsive Design Mode (or use Ctrl+Shift+M). Use this mode to view various devices, screen sizes, and view as portrait/landscape. 

Adjust the screen size 

·        Resize the browser to see how the page displays at different screen sizes. When the screen is resized review content, navigation, and verify buttons are all displayed in a way that supports a consistent user experience. Try out a few of the tools to get comfortable with them as they all work slightly differently. 

How to test for the right browsers and devices?  

The main challenge when testing a responsive website is to ensure that the website works the same on many different browsers and devices. Testing on every device and browser is not practical or necessary. Use Google Analytics (or a similar web analytics tool) to help identify the top desktop browsers and devices you should be testing against. Identity the top desktop browsers and devices that make up most of the traffic of your site, prioritize your testing efforts on these. Since browsers are updated and new devices are released often evaluate top desktop browsers and devices quarterly. 

Is your organization practicing responsive web design testing? Anything you would add? I would love to hear! 

Kari Boscaljon is a UX/Web Analyst at Farmers Mutual Hail, a U.S.- based crop insurance company located in Des Moines, Iowa. Kari is also a graduate student at Georgetown University, in Washington, D.C., studying Technology Management.