Understanding Responsive Design and Adaptive Design

Before understanding the difference between responsive and adaptive design, let us understand exactly the meaning of a responsive design.

Responsive design is a web design approach in which websites are viewed on different resolution and devices.

Taking an example:

Say a user switches from desktop view to mobile view or vice versa. The page should adjust accordingly and present the user with the best possible experience.

>>>Below are a few test cases for testing a responsive website:

1- Verify that images are displayed properly on different devices and resolution.

2- Verify that Heading, Sub-heading, and text properly aligned.

3- Verify that all the links are working and taking the user to the correct page.

4- Verify that scrolling of the web page works as expected.

5- Verify the image size, font size, and font type are consistent across all the web pages.

6- Verify if the contents of the page are displayed consistently on all resolutions.

7- Verify the change in the colour hovering over the elements.

8- Verify the padding of the elements.

>>>Responsive Vs. Adaptive Design:

The most common question asked while testing the responsiveness of a website is what is the difference between responsive and adaptive design.

Responsive and adaptive sites change the appearance based on browser width.

If a browser is set to 1024 px width and if changes are made around 1024 px, then the layout changes accordingly.

Responsive sites do not consider the device on which it is being viewed to adjust the layout.

On the other hand, the appearance of adaptive site changes after there is a change in the browser’s width beyond defined points.

If box control has a 500 px display on-site when the browser width is more than 800 px, if the width is below 800 px, then the box should reduce the size to 300 px.

When a page needs to serve different on a different browser or devices, the Adaptive design is used.