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


Responsive designing for applications can help applications deliver the same experience across adifferent 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:


A: Desktop/Laptop UI

A: Desktop/Laptop UI

Tablet UI

B: Tablet UI

Mobile UI

C: Mobile UI

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 It will look like this:mobileapp_4

B. By default, the “Width only” mode is selected Mobile App Responsiveness. 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.

Screenshot-2015-11-19-18.25.52 Screen 2

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 Mobile App Responsiveness 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)mobileapp_7 mobileapp_8

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.


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:mobileapp_9B. 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 Mobile App Responsiveness


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.

Rajesh Pal

Rajesh Pal

Senior Software Engineer-QA

Rajesh Pal is a Senior Software Engineer-QA for 3Pillar Global. He specializes in mobile and web application testing in both automation and manual. Prior to working at 3Pillar, Rajesh worked in mobile native app testing for Nokia India PVT Ltd, automation using Selenium and Java for Cognizant Technology Solutions, and mobile ads testing for Airpush Inc. India.

6 Responses to “Tools for Testing Website Responsive Design”
  1. Rohit Saluja on

    Data and example used in the above blog is nice, truly one of the best blog on Responsive Design i have read. Congratulations to Mr. Rajesh Pal and best of luck for some more interesting Blogs in future.

  2. Rhys Johnson on

    I have been using for testing my website and it gives me great results and my website runs on smartphones, tablets and iPads with equal smoothness.

  3. Prabir Kumar Das on

    Very good site for responsive web testing.

  4. Methew Bond on

    Above describe all four tools are are very useful for testing the responsive website.Beside this there are some more important testing tool available for website checking like Semalt , Responsinator , Viewport Resizer , Screenfly , responsivepx …Among that i use Samalt fot my website testing , it is fast and simple testing tool..

  5. mohan chand on

    very good article for web testing.all the tools which are mention in above article are very useful for testing the responsive website.this article also tells us how to use testing tools with the procedure. With so many mobile devices in the market, the responsiveness of any UI is mandatory so this article is useful.
    quickbooks Support

  6. Ravikumar M G on

    Very useful, thank you

Leave a Reply

Related Posts

Building a Microservice Architecture with Spring Boot and Do... This is the first post in what will be a 4-part series on building a microservice architecture with Spring Boot & Docker. This post will provide a...
Building a Microservice Architecture with Spring Boot and Do... Part II: Getting Set-Up and Started Introduction and Tools In this part, we'll get to work on building out the solution discussed in Part I. I'm goi...
Building a Microservice Architecture with Spring Boot and Do... Part III: Building Your First Microservice, its Container, and Linking Containers We're about ready to actually get started with building a microserv...
Building a Microservice Architecture with Spring Boot and Do... This is the fourth blog post in a 4-part series on building a microservice architecture with Spring Boot and Docker. If you would like to read the pre...
Innovation Wars, with Scott Bales Scott Bales joins us on this episode of The Innovation Engine to dive into the concept of "innovation wars." Among the topics we'll discuss are what c...


Sign up today to receive our monthly product development tips newsletter.