Responsive vs. Adaptive Design

Both responsive and adaptive sites adjust differently to the browser environment they are being viewed on. Responsive design strives to be device agnostic in the sense that it seeks to create an optimized experience for any screen. It pushes us to develop sites that shift context depending on how the site will be consumed. Meaning, our containers have to be fluid, using percentages as unit measures, the assets we serve have to be flexible, the right devices have to be served the right assets at the right time, and our media queries have to be defined at places where the content breaks, and not the width of a particular screen size. Contrast that to an adaptive style, which is neither flexible nor fluid, but watches for specified points at which to adapt. Here, adaptive design relies on predefined screen sizes. Both these design choices significantly impact the UX in their own way.

• Think of responsive design as a ball you designed to respond to several different hoops by shrinking and growing to fit through them. Your layout will automatically respond to the size, no matter how much you resize the screen. In an adaptive layout, instead of designing a single ball to respond to different-sized hoops, you design various balls meant to fit different hoops. This way the site detects the type of device used and delivers the pre-set layout for that device.
• Responsive design is more ‘client side.' The entire page is handed to the device browser and the browser then makes it compatible with the screen. Adaptive veers more to the ‘server side.' Even before the page is delivered, the server detects the device attributes. In responsive, the device does ‘all the work’ while for adaptive, the ‘work’ is done at the server level.
• It comes down to the difference between media queries when it comes to responsive layout and device detection in the case of adaptive layout. Of course, both responsive and adaptive designs can and often do use media queries. The absence of relative unit measures in adaptive design is what leads to the difference, resulting in the snappy, fixed, adaptive behavior.

• The significant difference to note between the two is that you’ll have to design for each screen size individually when it comes to an adaptive layout since it's a lot less flexible than responsive. But keep in mind that responsive design will demand more attention to the site’s CSS and organization to ensure it functions well in all possible sizes. So it might seem easier to push out a couple of specific layouts for your website rather than take the effort to implement one single responsive layout. However, in the long run, a responsive layout will demand less maintaining as it will respond to any new screen sizes automatically as they release, giving your site a longer lease on life. Modifying adaptive sites is also more complicated since it’s likely you’ll have to ensure that everything like SEO, content, links, etc are still working sitewide when it’s time for implementation.
• Consider load time. An adaptive website will have to load every possible layout while responsive sites just have to load a single one. This way adaptive sites take up a lot of loading time. All those extra layouts take extra time and resources, so they do tend to take longer to load. But this isn’t always the case. Using a script to redirect when the browser is first detected, you can optimize the images, animations and video content to the screen size. This way you can deliver a mobile experience that is faster, uses less bandwidth and comes with unique content, buttons, and interactions made larger and easier to use as Amazon has done with their adaptive layout.
• Some even argue responsive is the weaker choice when it comes to loading time. With adaptive design it's possible to refine and optimize every detail for a particular scenario and only load the elements necessary, if you're willing to put in the effort this demands. However, you'll have to maintain each of these versions. With responsive web design you only have to maintain a single codebase, rather than distinct versions of the site. But this comes  with the trade-off of having to load elements that might not be necessary.
• Before we head to the tally keep in mind that you must consider the user experience too. Since responsive websites can essentially shuffle the content around in order to fit the device window fluidly, you will need to pay particular attention to the visual hierarchy of the design as it shifts around.

The choice becomes easier if you're certain about your users and the specific devices you want your site to support. You might decide that iPhone X and Pixel 2 are the only devices that matter and adapting to it would be a lot easier and more efficient than accounting for other devices. On the flip side, tallying up the score, it's clear that responsive web design is almost always the safer bet.