But this comes with the trade-off of having to load elements that might not be necessary. With responsive web design you only have to maintain a single codebase, rather than distinct versions of the site. However, you'll have to maintain each of these versions. 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. Some even argue responsive is the weaker choice when it comes to loading time.

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. Using a script to redirect when the browser is first detected, you can optimize the images, animations and video content to the screen size. All those extra layouts take extra time and resources, so they do tend to take longer to load. This way adaptive sites take up a lot of loading time. An adaptive website will have to load every possible layout while responsive sites just have to load a single one. 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. 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. 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. 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. 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.The absence of relative unit measures in adaptive design is what leads to the difference, resulting in the snappy, fixed, adaptive behavior. Of course, both responsive and adaptive designs can and often do use media queries. It comes down to the difference between media queries when it comes to responsive layout and device detection in the case of adaptive layout.In responsive, the device does ‘all the work’ while for adaptive, the ‘work’ is done at the server level. Adaptive veers more to the ‘server side.' Even before the page is delivered, the server detects the device attributes.

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.This way the site detects the type of device used and delivers the pre-set layout for that device. 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. Your layout will automatically respond to the size, no matter how much you resize the screen.

Think of responsive design as a ball you designed to respond to several different hoops by shrinking and growing to fit through them.

Both these design choices significantly impact the UX in their own way. Here, adaptive design relies on predefined screen sizes. Contrast that to an adaptive style, which is neither flexible nor fluid, but watches for specified points at which to adapt. 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. It pushes us to develop sites that shift context depending on how the site will be consumed. Responsive design strives to be device agnostic in the sense that it seeks to create an optimized experience for any screen. Both responsive and adaptive sites adjust differently to the browser environment they are being viewed on.

Adaptive layout vs responsive layout