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 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 http://www.studiopress.com/responsive/. 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.

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

mobileapp_10

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

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:
mobileapp_12

E. If you want to test creative in landscape mode, click on this icon Mobile App Responsiveness

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.

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.

    Reply
  2. Rhys Johnson on

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

    Reply
  3. Prabir Kumar Das on

    Very good site for responsive web testing.

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

    Reply
  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

    Reply
  6. Ravikumar M G on

    Very useful, thank you

    Reply
Leave a Reply

Related Posts

3 Cloud Optimization Projects That Will Pay for Themselves AWS introduced 1,430 new features and tools in 2017, including 497 in the 4th quarter alone. This means that it can be a challenge for even the mos...
How to Manage the “Need for Speed” Without Sacri... The pace of innovation today is faster than it has ever been. Customers are much more active and vocal thanks to social and mobile channels, and the c...
Determining the First Release The first thing you release needs to put the solution to your customer's most important problem in their hands. Deciding what the most important probl...
The Art of Building Rapid (and Valuable) Proofs of Concept Clients and stakeholders want results. They want assurances that their investment is well spent and they're building the right product. The software d...
Are You Doing Stuff or Creating Value? You can put a bunch of stickies on the wall, create tons of JIRA tickets, and commit lots of code, but are you creating value? Is the work your produc...