November 19, 2015
Tools for Testing Website Responsive Design
Why It Matters
With so many mobile devices in the market, responsiveness of any UI is mandatory, especially for any new applications being built. These days, people use various different devices, like smartphones, tablets, and laptops or desktops to view websites or portals. All of these devices come with a variety of different makes/models (Nokia, Samsung, Apple etc.) and screen sizes. The problem then becomes: how can a single-designed application support a wide range of screen sizes and resolutions? The answer is responsive design of your website/app to display content on different devices and different sizes/resolutions without sacrificing either the application content and user experience.
Before we move into responsiveness testing techniques, we will give an overview on Responsive Web Design (RWD).
Overview
Responsive designing for applications can help applications deliver the same experience across different mediums. When we talk about the experience being the same with all kinds of devices, the following points are worth focus:
Layout of the Page
If the application rendered over a laptop or desktop screen has three columns in a row, the same interface on a tablet may have two columns in a row and on a mobile device, only one column, based on device widening. The application user interface for tablets or smartphones displays one or two columns in a row and the other columns wrap to the next row, as shown in the following images:
QA Perspective on Responsiveness
These days, there are many manufactures with a huge variety of device sizes; because of this variation in different make and size, responsiveness is the first barrier to creating good user experiences. So, in order to make a great user experience, every application must be responsive for all of the available device sizes.
To achieve a good user experience and better quality, QA should focus on the following important points:
- Does the application look okay?
- Are there any bugs due to variation in screen size?
- Does the user interaction feel good?
- Is the site optimized for mobile/tablet/laptop?
- How is the image size and quality?
- How do the font size and type look?
- Are the navigations straightforward?
- Is there selective content display, and does it work?
Tools for Responsive Design Testing
Here is a list of a few open source online tools for performing responsiveness testing at different screen sizes:
How to Use Testing Tools
The responsiveness testing tools are hosted online, and based on their requirements, you can select any of them and perform responsive testing by just passing the creative’s URL. Below are descriptions of a few tools, their utilities, and how to use them.
Studio Press:
A. Launch the online tool StudioPress on any browser using the following link https://www.studiopress.com/responsive/. It will look like this:
B. By default, the “Width only” mode is selected 
. This will allow you to test the application’s responsiveness at the predefined device widths of 240, 360, 480, 768, and 1024
C. Enter your creative URL into the URL input field and press enter to see the application behavior on all of the defined width sizes. Your results will appear like what you see on the screens below.
D. Here, we can see the application’s response to the widths of 240, 360, 480, 768, and 1024. Therefore, QA can analyze the creative’s responsive on defined resolutions.
After entering your creative URL, select “Devices Sizes” from the radio button 
and click enter. To see the interface for your application under test, it will return the responsiveness on different mobile, tablet, and iPad sizes. By default, it will give responsiveness for these solutions, as shown below: 320×480 (iPhone); 480×640 (small tablet); 768×1024 (iPad in Portrait); 1024×768 (iPad in Landscape)
After getting a preview of these various sizes, QA can evaluate the responsiveness of the application.
By using this method, we can test the responsiveness of our application on various screen sizes without having to spend a boatload of money on different-sized devices.
CyberCrab
To perform testing on a specific device, we can also use CyberCrab. Here are step-by-step instructions on how to use Cyber Crab to test your site’s responsiveness.
A. Launch a browser with CyberCrab. You will see the following screen, which has a list of mobiles, tablets, and laptops under their respective icons:
B. Enter your creative URL in the URL input field and press enter to see the application’s behavior on all defined width sizes. These sizes can be selected in this way.
C. In CyberCrab, there is an option to rotate the screen much like in a real mobile or tablet device. It provides both a 90 degree and a 180 degree rotation of the screen for all devices, which allows us to verify responsiveness in both landscape and portrait.
D. In CyberCrab, QA can select a device of any customized size to display. If your requirement has a customized size, then QA can create a customized screen as shown here:
E. If you want to test creative in landscape mode, click on this icon 
Conclusion
Responsive design allows you to make your application flexible for all kinds of existing and upcoming devices. As the demand for media-rich mobile internet and applications expands, many important implications must be addressed, like development, maintenance costs of applications, visibility in search engines (SEO), and better conversion rates. These factors, associated with a unique approach to design, will be profitable for all stakeholders.
With the increase in smartphones, tables, and laptop devices, responsive design of applications is key to staying ahead of your competitors in both market- and establishing market-share.