• info@helpingtesters.com
  • helpingtesters

Testing Responsive Websites

August 16, 2017
Testing Responsive website, Responsive website Testing

Testing responsive websites has become very important in today’s era because the challenge in today era is to get the website run successfully on all the browsers being used nowadays whether the browser is running on Desktop, Laptop, Mobile devices such as iPhone, iPad, Android devices, Tablets etc. Testing responsive websites has now become a core concern of the client, as the increase in usage of mobile devices for surfing website is increasing day by day. 

Testing responsive websites may include testing of images, texts and other content on different resolutions and check whether they are able to adjust as per the screen size of mobile devices. Testing responsive websites ensures that accessing the website on the mobile browsers with the small screen does not become cumbersome for the user and does not face a situation like scrolling the browser horizontally and vertically to find out particular link or text or get the broken website. In short, we can say that testing responsive websites ensures that user gets the best look and feel while surfing the website on different device browsers with different screen size.

Let us understand why Testing responsive websites is of so much importance. But before that, we should know what is the responsive design. People use tablets and smart phones for different purposes

  • 90% of people use multiple screens sequentially
  • 81% Browse the internet
  • 67% shop online
  • 46% Manage Finances
  • 43% Plan Vacations

Now the question is how Do Marketers engage users on so many screens….The answer is Responsive Design. So before knowing how Testing responsive websites, it is important to know what Responsive Design is.

What is Responsive Design

Responsive Design is a

Write Once…..Run everywhere…..Type of web design.

The content of a website is like water. It States the principle of responsive web design.For example, put water in a cup it becomes a cup. Put water in beaker it becomes beaker. The similar thing happens with the content of responsive website when the user switches from one device to another.

Using Responsive design one can add following features to website content

  • Instantly Cross-Platform
  • Easy to Manage
  • Cost-Effective
  • Future-Proof

Responsive web design is an approach where we don’t need to create a web design for each device. Instead we create a web design which is flexible and adjustable in all devices, so basically, we are building one website and it is supposed to be flexible enough to change its layout as per device or as according to the width of the browser that the device is using.

Today we are living in the world where everybody is using smart devices; better say a smart mobile device which means everybody can assess all the mobile websites available on their smart phones, from anywhere and everywhere. Therefore, as a tester, it is our responsibility to test whether the design is working fine in all the available devices or not.

How Testing Responsive Websites

Some of the ways to test the website responsiveness are as below:

⇒ Changing the size of the browser

One of the easy ways to check the browser responsiveness is to resize the browser screen by making it small by dragging it so that its size is reduced or better say minimized. The problem with most of the website face is that whenever we try to adjust the size of the screen website in mobile device or Tablet or other device does not adjust accordingly. Suppose we are browsing the website on mobile and we need to scroll the website fortunately or vertically and find the website not adjusting itself to the screen, unlike the responsive website in which content adjust itself as per the size of device Browser.

There are some extensions available in the browser like Google Chrome which helps in resizing the viewport to enable testing of websites responsiveness.

⇒ Using Emulators

As we all know that Testing responsive websites on all types of mobiles devices like tablet, iPad,  iPhone, android devices etc. are not possible or possible with very high cost after procuring the devices which are practically very difficult. There are virtual mobile devices or emulators available online which allows the tester to check the website on these devices. It is easy to procure them and set them and get them working with zero or minimal cost. There is device emulator which emulates some of the mobile devices is available in Developer Tools of Browser like Google Chrome.

⇒ Using browser plug-in and tools available online

Now there are some browser plug-in and tools available with us which provide us with viewing experience of the website without using actual device.

  • Responsive Web Design Tester

It is a web browser plug-in which is added to the browser. It allows us to check the layout on different devices such as android phones, android tablet, iPad, iPhone devices with different layouts, for example, checking iPhone 5(S),   iPhone 6(S) and iPhone 6(S) Plus, in portrait and landscape mode.

  • Viewport Resizer

It is also web browser plug-in which is added to the browser. Also, One can use URL for viewport Resizer. After going to URL you will get Resizer that has different Windows in it. All we have to do is to launch our website, select the sizes from viewport Resizer. You will see how your website response to the sizes selected.  In short, viewport Resizer provides with the facility to see the layout of the responsive website on different devices with different view ports width.

  • The Reponsinator

It is available to the browser through the internet and one is not required to download it. It helps in quickly checking that website is responsive or not, by the testers and by web designers as well. It quickly gives an insight of how the website will look on most popular device Browsers. It is recommended to use chrome browser to open Reponsinator site. It is just required to enter the URL of the website which needs to be checked for its responsiveness. And it gives an insight of how the website will look on different devices like iOS phones, Android phones, Tablet, Ipad etc and also provide the horizontal and vertical view of layout on these devices.

  • BrowserStack

It is one of the popular tools used for checking website responsiveness. It is paid service not free. There is limited free trial. It can only be used for a certain number of times, Not unlimited. URL is browserstack.com. One can select any Browser and also an operating system in case one is required to check in a particular Browser of a particular operating system. One can also select various devices such as iPhone devices, iPad, tablets, Android devices etc. One can select 25 browsers at a time to take a screenshot. One can choose Window resolution, quality, Mobile layout that is portrait or landscape. One can see screenshot for all the selected devices and Browsers in the different environment selected.

After going through the ways and tools to check website responsiveness, it is important to know how to test multiple device platforms.

How to Test Multiple Devices Platforms

Now we create the responsive website to work on all devices which mean we should test all the devices, but that’s not possible because there are so many devices. So to solve this we have to make the best recommendation so that it covers most of the ground and eliminates maximum risk but again there are so many devices and so many screen sizes. So it is important to know how to choose and what to test.

Here again, we use view port sizes to select right devices. View Port of the website is affected by

  • Resolution screen size
  • Pixel density which is number of pixels per screen
  • DPPX which represents the number of dots per pixel unit.
  • On screen UI element
  • Rendering software of a device

Reducing Redundancy

Two devices may have a completely different resolution but may render the same viewport size. Suppose we select Samsung Galaxy Note 3 and Samsung Galaxy S4, both of them having same viewport size and Android version 4.4 or if we have to choose tablet and we choose Tab 3 and Nexus 10 thinking that one is Samsung and another is Google we are again selecting same viewport size and Android version 4.2.2. So this creates redundancy and we are running the same test case again and again which results to find some defect again and again.

The probability of finding defects are more on the devices with different view port sizes, for example, Nexus 6P and iPhone 5s. Website London launched on iPhone 5c and iPhone 5s is likely to have the same defect as they have same viewport size. We should mix OS with viewport sizes to ensure maximum coverage and also, right device selection.

Few Takeaways

There are few takeaways, as given below:

  • Layout format is determined by viewport width and not the devices
  • To avoid redundancy and to have maximum coverage, it is recommended to mix operating system with viewport sizes
  • Optimal testing web app helps to avoid duplicate viewport width selection.

Overall, we can say that rather than building separate sites or expensive apps and spending too much money and resources for making website compatible with many devices, it is better to make website responsive so that with Responsive Design each element fluidly adapts to every screen size, irrespective of screen sizes of different devices and therefore the role of tester also becomes very important to ensure the compatibility of website on different devices.

About the author

RamPrakash Singh author

Ram Prakash has worked in various domains of testing including security, performance, security testing and automation testing. Including several tools like QTP, selenium, LoadRunner,JMeter, VSTS Coded UI, soap UI, Burp Suite etc.

Leave a Reply

Your email address will not be published.