Two ways to determine whether a website is responsive or adaptive

Sometimes, it can become tricky for determining which mobile configuration a site is making use of. However, there are several methods to discern adaptive and responsive sites. Most search engine optimization professionals are aware that there are three main techniques for serving mobile website content – separate mobile URLs, responsive design and adaptive design (also known as dynamic serving)

While it is easy to determine separate mobile URLs just by having a look at the address bar of your browser. It is pretty obvious to understand that determining the difference can be tricky for many. Reading further might help you make a distinction between adaptive and responsive websites.

Do you notice any kind of changes when you resize your browser from a desktop computer?

When it comes to responsive websites, they change their layout on the basis of browser window size (irrespective of device) whereas adaptive websites identify when you are using a mobile device which is a completely different HTML technology.  Therefore, if a website does not make use of separate URLs for mobile configuration, you can figure out adaptive and responsive apart by just visiting the website on desktop and carefully see what changes happen when you resize the browser window.

Do you wish to test it? If yes then follow the steps listed below:

• Open m-w.com or WebMD.com in the browser that you prefer. Make sure that browser window of your computer screen is not full, in other words, you should be easily able to see the desktop behind it.
• Place your cursor along the right edge of the window browser, and again resize the window to the size of a mobile phone display.
• As you will notice, the layout of the site changes on the basis of your browser window size, even when you are using a desktop. This means that the websites are responsive.
• For contrast, if you repeat the same steps with Amazon.com on a desktop computer, which is adaptive, the content screen’s right side is hidden instead of resizing or moving somewhere else.

Are you able to find the word “@media” or responsive in the home page source code?

It is important to note that responsive websites have particular elements within their HTML source code that adaptive websites lack. You can check these elements by following the steps mentioned below:

• Open WebMD.com in Chrome, on desktop or mobile.
• If you are using desktop then you can press Option+⌘+U (Mac) or CTRL+U (Windows) for viewing the source code. Mobile phone users can go to the address bar and add view-source prior the root domain (for instance, view-source: www.webmd.com) and press enter for opening source code.
• Next, search the page for the word ‘responsive’ which is available on the page to call out responsive stylesheets and templates.  Now click on the responsive stylesheet that is a clickable link.
• On the CSS page, you can search for “@media” – if it is present, it indicates the CSS Media Queries that power responsive websites.

These are two of the many ways to determine the different between responsive and adaptive websites.