The Many Faces of ‘Adaptive Design’ [via Brad Frost Web]

December 19, 2013

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.

via The Many Faces of ‘Adaptive Design’ | Brad Frost Web.