- Share:
You've strategized. You've planned. You've got the budget. You think your association's ready to invest in a new website design. But then you see that you have two design options -- responsive and adaptive -- and now you aren't sure what to do.
What's the difference? Does it even matter?
Since mobile devices changed the way we consume media, designers and developers have tackled the challenge with the two methods mentioned: responsive web design (RWD) & adaptive web design (AWD). Both of the approaches have the same goal: make your website render correctly on desktop, tablet and mobile.
Responsive
Responsive web design (RWD) is a term coined by Ethan Marcotte, a freelance designer. Some of the key points of this approach include use of flexible images, EMs, fluid type, and flexible videos, all of which enable responsive websites to adapt a layout to the requirements of the viewing device, environment, or user agent.
By definition, it can fluidly change and respond to fit the needs of any device screen or size.
Adaptive
Adaptive web design (AWD) is a phrase created by Aaron Gustafson, a Microsoft web standards advocate. This method uses many of the same components of progressive enhancement to define the design methods that actually focus on the user, not the browser.
AWD uses a predefined set of specific layout sizes that are based on the screen size of the device. Using JavaScript and CSS, it adapts to the device that is detected.
The Technical Difference
RWD can take more code as well as implementation strategies with CSS, fluid grids, and flexible foundations. On the other hand, AWD has a more streamlined & layered approach that uses scripting to help it adapt to numerous devices and varying screen sizes.
The RWD approach makes sure that its one layout always responds to whatever the size of the device’s screen.
AWD is different in the sense that it doesn't have just one layout. Each screen size pulls a distinct layout specifically designed for that device's size.
Both methods enable users to have an enhanced mobile experience on almost any type of device.
So, Um, Which Is Better?
Responsive is more popular than adaptive because it's easier to use out of the box, and there are quite a few websites that offer easy responsive design.
Adaptive design is less popular because it can take longer to load and requires more time to develop and maintain. That said, it allows for more control over your design since you're creating different layouts for different devices.
Your choice really depends on what you need. There isn't a better option. If you have a smaller budget and are short on time, responsive may be better. If you can afford a more involved design project in which the deliverable will truly look exactly the way you want it to, adaptive may be the way to go.
To learn about email design, which has different terms and issues than web design, check out this great article from Litmus.
