The Many Faces of ‘Adaptive Design’
Lots of terms evolve beyond their initial definitions and become a catch-all for a general notion or idea. I’ve talked about this regarding responsive web design and mobile first, and there are certainly other terms that escape their original definition.
“Adaptive Design” is another one of those terms you see thrown around in various ways. I thought this discussion had been put to bed a long time ago, but several recent discussions and articles revealed to me that there are still many different uses of “adaptive design” out there.
Let’s go through each one.
Synonym for Progressive Enhancement
The most widely-accepted use of adaptive design is as a synonym for progressive enhancement.
“Adaptive web design,” as I use it, is about creating interfaces that adapt to the user’s capabilities (in terms of both form and function).
Aaron Gustafson
Adaptive design is essentially progressive enhancement at its core, but it’s being applied to a much larger, more diverse landscape than when the term progressive enhancement was first coined. We now have Web-enabled smartphones, tablets, e-readers, netbooks, watches, TVs, phablets, notebooks, game consoles, and a whole bunch more. Making experiences that look and function beautifully across all these different environments requires creating smarter interfaces that can adapt to the capabilities of the device/browser. This means using feature detection and other sound progressive enhancement techniques.
I use this definition of adaptive design, and use this definition when discussing the Principles of Adaptive Design: ubiquity, flexibility, performance, enhancement, and being future-friendly. And while there are plenty of cases where progressive enhancement doesn’t take you all the way (more on this later), it’s a smart default for building for this multi-faceted Web landscape.
Synonym for Responsive Web Design
Many times “adaptive design” is used as a synonym for “responsive design.” While I can understand how they can be confused, it’s important to note that they are indeed different.
In reality, responsive design as Ethan described it affects layout only. It consists of three core ingredients: fluid grids, flexible media, and media queries.
Responsive design is one technique in an adaptive web design strategy.
Creating flexible layouts is extremely important, but it’s just one piece of the puzzle. It’s also important to consider a whole host of other factors as well: ergonomics, touch capability, geolocation, SVG support, and the myriad other features that can be detected.
Synonym for RESS or other
I’ve also heard “adaptive design” being used to describe RESS, which is responsive web design with server-side components. The majority of a RESS experience is created using progressive enhancement and responsive design strategies (so everything lives under one roof under one URL), but might use server-side detection to include certain components or modify the interface in some way. Dave Olsen describes RESS as sort of a scalpel that allows us to surgically include or exclude certain thorny (legacy, Flash, ridiculously complex) components into an experience.
RESS is a powerful technique and while it’s technically adapting the interface, I wouldn’t go so far as to use it as a synonym for adaptive design.
Device Detection
Interestingly enough, a good number of articles, white papers, and organizations use “adaptive design” as a synonym for device detection.
Adaptive web design (AWD) sends a tailored web experience to a device by determining
which device type has requested the content. AWD often uses a set of predefined
layouts based on screen size, along with CSS and JavaScript, to deliver a user experience
tailored to the device. AWD can also allow a developer to tailor content to a specific
device, like an iPhone, if there are particular visual design components they want to
use for the device.
Responsive versus Adaptive Web Design
Once again, creating a dedicated mobile or tablet site is technically adapting the experience, but I believe this is an incorrect usage of the term “adaptive design”. “Device detection” or “Device experiences” or “M-dot” or something else is a better way to describe this approach.
Adaptive Layouts
In his post On Being Responsive, Ethan Marcotte described sites like ia.net as “adaptive”, meaning that they switch between several fixed width views at certain breakpoints. In other words, they “ain’t got no squish” to them.
While Ethan used the term “adaptive layouts”, I’ve heard people reference this approach as “adaptive design”.
Will the real Adaptive Design please stand up?
I’d personally like to see “adaptive design” become synonymous with creating a single Web experience that modifies based on the capabilities of the device and browser. I personally consider RESS to be part of this equation, but I think the ultimate idea is that it’s a singular flexible experience built using sound progressive enhancement techniques.
12 Comments
Kyle Amboyer
I think you could possibly define adaptive design from the users perspective. Maybe the term becomes adaptive experience. Design sounds too limiting. If the user receives the best possible experience regardless of device, be it desktop, phone, tv, whatever; that was an adaptive experience. A number of technical design methods (progressive, rwd, ress) can go into that.
Just a thought.
Enjoyed the article. Thanks
Ben Read
Ohh kaaay … got it now. Thanks Brad, very useful.
Kurren
I’d personally like to see “adaptive design” become synonymous with creating a single Web experience that modifies based on the capabilities of the device/browser, but also the context of use.
Context as, what time of the day it is? Should I display the breakfast menu as top option at 9pm? Context as per (proper) device recognition: should I optimise the contact form or the Google map in contact us for a mobile device?
Context as, do I know this particular user? Should I display a product I know he already bought? Or a product I know she doesn’t like?
Adaptive is much more about than adapting to the screen size, or loading time capacity, it’s about adapting content for the user, and the particular (inferred) context of a (known/unknown) user give her particular location and device of consumption.
Adaptive Design is about contextually localised content, because Design is not design.
Jon Walmsley
Great points here. I find that the term Responsive Design is often used accurately, but incorrectly – people wanting to take a site that already exists and with little or no changes to content and markup ‘make it responsive’. When that is the requirement then responsive (in the technical sense) is all you can do – but that is the wrong thing to do. – If your car needs a service then you wouldn’t just give it a wash and be done with it.
Perhaps there is a general unawareness of all the other elements of adaptive design, or perhaps people are willfully ignoring it as it’s perceived as a far bigger (and therefore more expensive) piece of work to overhaul everything. But to only consider one element of adaptive design is no more than just a hack that’s going to cause more problems down the line.
Rik Schennink
I’d like this whole semantics game to come to an end.
Don’t get me wrong, I welcome your effort to clarify the current state of things, but if we as developers are confused about what term encompasses which ideas than think about how confusing this word game is to our clients.
We should stop differentiating and as a group start moving to a single term, this could be “website” for all I care.
Marcelo Paiva
I accept your points on the synonymous terms, but I’m not so sure “a single Web experience that modifies based on the capability of the device and browser” – IMHO, Adaptive Design is not only applied in “Web” interfaces, also, as a financial services designer, I constantly face the need of “adapting” the interface, views, interactions, even colors, based end-users’ workflow (i.e: Before market opens, earnings season, etc)
I’d also like to add the perspective of user experience “continuity” where a user may leave one medium to another and how the interface adapts to allow the task to be continued without restarting the entire task (i.e: user is reading a news article on mobile, s/he arrives at the desktop and continues reading the same article, now with a much richer content)
Thanks Brad for bringing this up.
Jean Carlo Emer
Really good post.
In addition I want to know if a technique thats detects the user agent (or device) and redirects the user to a subdomain like old wap is Adaptive Design as well. This approach have a proper name?
Thanks.
Ricardo Zea
For me Adaptive Web Design has simply been: Changing layout using pixels instead of percentages. Simple.
Synonym for Progressive Enhancement, RWD, RESS (WTFTM) and Device Detection? o_O
Amazing how this whole Web Design (if that title even exists anymore)/Web Dev job is now so difficult to do. It wasn’t like this you know?
Great article.
Michael Nelson
I found it enlightening to understand the differences with the various terms. It made me realize how many different aspects of adaptive design were under the umbrella and gave me a couple of things to think about some more. In the end, I don’t want to worry so much about specific terms and their meanings, I just want my sites to look and operate well everywhere, so I’ll go with Responsive Design – I like the sound of it.
Thanks for the post Brad.
Nick L.
This is just hipster rambling with a bunch of big words that don’t actually mean anything. You’re just talking about responsive websites and giving them a different name.
JesseCon
I’m with David L. The explanation was muddy at best with the final definition of responsive design used to explain adaptive.
UMSL
Marketing Gimmick FTW.
I personally think that the definition is ‘muddy’ because we’ve made it ‘muddy’. To the designers and developers out there the term Adaptive Design doesn’t really mean anything. To the marketing world it’s another gimmick word.
Designers and Developers already know what they can do and those methods already have names. Making more terms is just to wow the people who have no idea what’s going on and confuse those who should know what’s going on.
To me it would seem the writer doesn’t really fully understand what “Adaptive Design” is and is putting forth other keywords that other people think the term implies.
It’s like complicated algebra:
X= Y+Z+4; Y=A/B; B=D*7/C; Z=42-D
the whole equation is: X= (A/(D*7/C))+(42-D)+4
Comments are closed for this post. If you've got something to add, feel free to reach out on Twitter.