With technology changing at a rapid rate, it’s become increasingly important to understand your users. Ultimately the End User impact has the most weight combined with client requirements to determine if a product is ready for release. The size of the screen and the method of input have tremendous impact on how users interact with products, and people are now increasingly moving between multiple devices to access content.

So let’s elaborate a bit about testing a Responsive Design and how to provide a quality product. Responsive design refers to a technique that enables websites to change their layout and content, based on the device being used to view them. The design literally responds to its environment. A user who opens it on a mobile phone will see a layout that is optimised for that screen. The reward is a fluid experience that works as well on a smartphone or tablet as would be on a desktop.

Testing responsive designs means you need to test across multiple devices, operating systems, browsers and probably most importantly, dimensions. Using device statistics, the required test devices can be selected and test cases created to test the expected results. You can narrow down your choice of device testing to target the majority as there is no practical way to test on every device combination. The list however can be amended if the product is intended for a specific audience or as requested by a client.

So how do we achieve this?

Some General Rules for Testing Responsive Web Design include:

• Text, controls and images are properly aligned.
• Hover and selection states highlight and colour changes.
• Colour, shading and gradient are consistent.
• Text, images, controls and frames do not run into the edges of the screen.
• Pages should be readable on all resolutions.
• Content that is defined as ‘important’ needs to be visible in all breakpoints.

Keep in mind that it’s important to:

• Adhere to the requirements.
• Prevent and remove defects.
• Improve continuously.

Use automated tools like Ranorex (www.ranorex.com) and Selenium (www.selenium.org) to do the basic checks and combine that with real device manual testing and emulators to ensure your product is thoroughly tested. The golden rule all testers should religiously follow is:

Doing things right the first time instead of doing things over.

Responsive web design is a way to help ensure a great user experience across multiple devices. This will ultimately translate to more visitors, more sales, as well as a stronger and more credible web presence.