Some of the best ways to test whether a website is adaptive or responsive are listed below. They are so easy to try so you can just go online now.
- Use your mobile browser
Whether you have an android phone or an iOS phone, you will get the same results on your mobile web browser. Let’s try to have our first comparison. On your mobile device, go to your browser and open https://www.worldwildlife.org/
As you can see, it looks a lot different from its desktop or laptop PC version. It looks like it has been tailor fit to be used on your mobile device. Now, try to search for the word “panda.” It will display the same result as it would in a PC and the contents are also the same but the layout is different. It becomes more minimal and you won’t have to scroll on the sides.
Now, try to open https://www.accuweather.com/en/us/ca/california-weather on your mobile device using the same browser. You can easily notice that everything is minimized and that you might even have to zoom it for comfortable reading.
Seeing the differences between the two websites, you can now tell that World Wildlife Fund uses responsive web design while AccuWeather uses adaptive web design because the layout of World Wildlife Fund responds to the screen size by providing a different layout based on where it is used. On the other hand, the layout of AccuWeather is the same regardless of the screen size and it just adapts to it.
- Resize your laptop or desktop’s browser window
Let’s take a look at the same website using a different device. Open your most commonly used browser and use the same link to World Wildlife Fund. You will be able to see an expanded version of the homepage of the website. Now, all you have to do is to shrink the size of your browser window. Click the window’s restore button and drag the edges. As the size of the window changes, the layout of the page also changes. Try to shrink the screen to the size of an average mobile phone screen. You will see the exact same look you can see when you go online on your mobile device.
Now, let’s open AccuWeather. You can try to find the difference between its mobile version and desktop or laptop version, but there’s no difference at all. This is simply because the layout is kept in all screen sizes.
- Take a look at the website’s source code
If you are using a desktop or laptop, go to the website and press Ctrl + U if you are using Windows, or Option + ? + U if you are using Mac. Try to search the words “responsive” or “@media” because if you see one of those words, it means the website is Responsive.
Adaptive vs Responsive
So, which should you really use? To be honest, it depends on you and what you think is most important. To help you out on that, here are some of the differences between the two.
Adaptive Web Design
- The server uses HTML which is pre-selected for different devices with different screen size.
- Information is pre-selected and only specific selected device based information will be displayed.
- Loads pages quicker.
- Built on existing code and website.
- Its cons, resource and budget heavy.
Responsive Web Design
- Devices are detecting “media queries". Flexible grid and images are sized correctly to the screen of the devices.
- All contents are being downloaded whether they are used or not.
- Cheaper to implement.
- Can adapt to future unknown new devices.
- Google prefers responsive sites.
- Its cons loads slower and may not be properly displayed on outdated mobile browsers.