In the past decade, technologies and tools to help in web design have evolved drastically. Along with this the mobile revolution started; and it has changed the way organizations, businesses and customers interact with websites. Currently, there are so many versions of browsers and operating systems to support and users expect the website to work on all of them. To add more complexity, the vastly fragmented device market has resulted in the need to support numerous devices and screen resolutions as well.

“Responsive websites” were created for the above reasons. It is built using the following concepts to provide this flexibility.

  • Media Queries – CSS Style rules decide what layout to load based on the the browser width and resolution
  • Fluid Images and grids – Giving the size of images and page elements in relative units like percentages instead of absolute units like pixels

What is the difference between Responsive vs Adaptive? These terms are often used interchangeably but there are some considerable differences.

  • Responsive web design – In this, you make the page responsive to the width of a browser window. When you keep resizing the browser you will see the page changing dynamically; thereby giving the user the optimum page views in different “Browser” widths.
  • Adaptive web design – In this, you give the user different versions of the page based on the device being used. There is a device detection script that runs on a web server and each time a user accesses the website using a device, the script detects the type of device the user is using and loads up the page accordingly. It DOES NOT have anything to do with the browser width and it is related to the device screen size.

Factors to consider when testing responsive websites
There are 3 factors to consider when testing responsive websites. They are as follows:

  1. Breakpoints

Breakpoints are the point where the site content adjusts according to the browser width and screen resolution to provide the optimum viewing experience to the user. This is one of the most overlooked aspects of testing responsive websites, leading to a lot of rendering issues in the page. It is important to test the boundaries of the breakpoints to see when the page adjusts itself.

  1. Image Size Optimization

This is the concept where we try to make the image scale according to the viewing size. There are various techniques to do this from the code. We need to do focused testing to see whether the images render correctly on different pages.

  1. Page load times

Responsive websites tend to have a lot of Javascript, CSS, HTML on the client side due to multiple factors. This often has a considerable effect on page load times. A recent study conducted by Google found that 53% of users would leave your website if a page takes more than 3 seconds to load. This being the case, it becomes really critical to do performance testing on pages before we release it to the customer

Different approaches and tools to test responsive websites
Browser Tools – This is one of the most widely used strategies to get different types of information about your web page.

For Example – Let’s take Chrome browser. If you press “Command+Option+C” on your Mac or “Control+Shift+C” on your Windows PC, it will open up a browser console which has various tabs. The 3 tabs more widely used by testers are:

Elements – This tab displays all the client-side JavaScript, CSS and HTML elements of the page. The tester can even vary the CSS of the page and see how different changes affect the page.

Console – This tab displays all the warnings and errors present in the page. On double-clicking them a window opens up showing information about which file and what line number the error occurs

Performance – This tab provides the options to record different flows through different pages and show page load times, screenshots and other relevant performance information related to each page accessed during the user interaction

Chrome Extensions
There are various free plugins available as part of the Chrome web store to test different aspects of your responsive websites. Some of the popular plugins are:

Tools to check screen breakpoints
Apart from some of the tools mentioned above there are specific tools that can be used to check the boundaries of different breakpoints of your web pages:

Tools to do cross-browser testing
With so many combinations of browsers, OS versions, devices and screen sizes, sometimes it is just easier to test a web page on multiple form factors simultaneously to save time. There are some tools that give you this functionality: