In its simplest definition, responsive design uses just one layout for a web page and “responsively” adjusts to better fit the user's screen, whether it’s a desktop, a laptop, a tablet, or a mobile phone.
Technically speaking, responsive websites use media queries to target breakpoints that scale images, wrap text, and adjust the layout so the site can fit any screen size. It can be done with HTML and CSS or HTML5 and CSS3.
With a responsive website, you’ll only need one site. Everything should seamlessly respond and adapt to any user’s device or browser – the design, content, and user interface.
With responsive design, the layout is decided by the site visitor’s browser window.
In comparison, an adaptive layout is determined on the back-end, not by the client or browser. The design produces templates unique to every device class. The server detects factors like device type and operating system to send the correct layout.
No one likes a slow website. People get impatient and bounce if a site doesn’t load in 2 seconds or less. Adaptive designs generally load faster than responsive ones. This is because adaptive design only transfers necessary assets specific to each device. For example, if you view an adaptive website on a high quality display, the images will adjust to load faster based on the display the end user is using.
This can be a touchy topic for some. People argue that adaptive designs are more difficult to build because you’ll need different layouts for different devices. Whereas responsive designs only require a single layout that some argue is easier to implement.
Adaptive design is considered less flexible because a new device with a screen size you didn’t plan for could break your layout. Which means you’ll need to edit an old layout or add a new one. Screen sizes are constantly changing and highly variable.
Google recommends and rewards sites that use responsive design. A mobile-friendly website ranks higher on search engine results pages. Adaptive design can be challenging to SEO.