It’s a no-brainer for most website designers that your finished product needs to look and work on every type and size of device. Gone are the days of creating multiple designs to accomplish the same goal.
It all comes down to choosing a responsive or adaptive design model to achieve a consistent website design at any size.
But what’s the difference between responsive and adaptive? Are they really just the same thing? Let’s take a look and explain everything you need to know.
At their core, responsive and adaptive technologies probably look the same to end-users. Both design and development methods are created to make websites look and function well on all device types.
The primary difference is in how you go about the creation of websites using responsive or adaptive technologies.
Responsive design is a “household” term for anyone who works with websites. Maybe almost surprisingly, it isn’t that old.
It was coined by Ethan Marcotte in 2010:
Now more than ever, we’re designing work meant to be viewed along a gradient of different experiences. Responsive web design offers us a way forward, finally allowing us to ‘design for the ebb and flow of things.’
And that’s really where our current school of thinking about responsive websites springboarded from.
Responsive design is a technology in which websites “respond” to the size of the browser at any given size so that the design is optimized for the screen. Ideally, users should get the same experience from a single website whether they are holding it in their hands on a mobile device that just a few hundred pixels wide or looking at it on a super-wide screen monitor.
Responsive websites use a lot of elements you are likely familiar with: media queries, flexible grids, and responsive images. It is probably the most popular method of designing for multiple screen sizes. (Purists will note that responsive design has nothing to do with devices themselves, only size, as opposed to adaptive which detects device type among other things on the path to a perfect rendering.)
According to the Interaction Design Foundation, responsive design is easier and takes less work to implement. This might be why it is more widely used.
Responsive designers create a single design to be used on all screens and will generally start in the middle of the resolution and use media queries to determine what adjustments will be made for the lower and higher end of the resolution scale. This tends to make users happy, because that familiar web design seems guaranteed to translate across to any device’s screen. Uniformity and seamlessness are crucial considerations in providing a good user experience.
Further, responsive design is often the choice for large websites because of the development time involved. Responsive design is rooted in a grid system, responsive measurements (think percents or minimum and maximum values) to help the design expand, contract, and stack at different sizes.
This design technique is the norm for new development.
Adaptive design is almost as old as responsive design. First used in 2011, the technique involves designing for specific device sizes and types for a more customized experience.
This is a great explanation from the MDN Web Docs archive: “Adaptive design is more like the modern definition of progressive enhancement. Instead of one flexible design, adaptive design detects the device and other features, and then provides the appropriate feature and layout based on a predefined set of viewport sizes and other characteristics.”
Designs are rooted in six fixed variations (widths):
The most common usage of adaptive design is to convert an older design into something that’s more mobile-friendly. That’s not to say it doesn’t happen with new development though.
There’s no right or wrong to using responsive or adaptive design. It’s rooted in your goals and what you want to accomplish with the design.
Pick the technology that works with what the website should accomplish in terms of content, search, user experience, time, and budget.