scroll
To the untrained eye, it might seem like responsive and adaptive design are the same. Afterall, they have the same goal: to opimize web content for consumption on a mobile device. As a whole, mobile web design has become increasingly important since Google's Mobilegeddon, and some sources believe that mobile traffic will actually overtake web traffic by 2018.
Mobile web developers have taken two different approaches to designing for mobile web, responsive design and adaptive design. Here's the difference:
A responsive site is designed as a whole, with a single HTML codebase that is delivered to each device. The browser then uses tweaks to the CSS, which determines the layout of a web page, to adjust the layout depending on the size of the screen. So, when you drag the corners of your browser window to resize it, you can see the site grow or shrink until it reaches a breakpoint. Then, the layout of the site will reload to suit the new dimensions of the screen. Mostly, it's about being scalable.
The advantage of responsive design is that developers only have to design and maintain a single code version that works for all device types. However, some sites have too much going on to work as effectively on mobile as they do on desktop. That's where adaptive design comes into play.
An adaptive site is designed to create a totally different user experience, depending on what device they are using. Developers create different versions of HTML code and CSS for each type of device, and the server hosting the website then delivers the correct version, depending on the characteristics of the device that has been detected. This allows developers to create different versions of a site that are optimized for the different dimensions and native features of different devices.
The bottom line is, with responsive design, the content of the page doesn't change depending on the device being used. It's about scalability and stacking. With adaptive design, the content and how it is presented changes.
To see an example of responsive design, check out the site we recently built for Tangent West. Because the site is clean and simple throughout, it made the most sense to use a responsive design. There is no one page that provides too much information that it becomes overwhelming. To see an example of adaptive design, check out a travel booking site kayak.com. The desktop version of the Kayak's homepage is busy and full of images offering different deals on hotels. The mobile homepage, however, is clean and simple. It dials into exactly what the user is looking to accomplish.
Need help deciding which approach is best for your business? We're happy to chat! Reach out to Avid for a consultation.