Design & UX
Article
By Daniel Schwarz

What is Adaptive Design? (And is it Different from Responsive Design?)

By Daniel Schwarz

Responsive design - by Alex Walker

Responsive design is a term we all should be familiar with by now but does the term accurately describe what we think it means? We’ve come to know "responsive design" to be the act of designing websites that display correctly on all devices and screen sizes. But some argue that “adaptive design” is a better name for this.

  • Is this true, or are they the same thing?
  • Or does "adaptive design" mean something else entirely?
  • And where does "fluid design" fit into all this?

While this sounded like a fairly straight forward question, after a little investigation, I found it was more ambiguous than I might have guessed, and maybe even downright controversial.

There seem to be two competing definitions for adaptive:

Definition 1: Responsive Design is a Selfie Stick – Adaptive Design is an Umbrella

In this definition, a responsively-designed product – just like the selfie stick – can be used in many states from fully extended, fully retracted and any of the points in-between. Sure, certain widths or breakpoints are more important than others, but every different width generates a slightly different layout.

Adaptive design behaves more like an umbrella. It has preset 'states' that it is designed to work at – open to stop rain, closed for transporting. The 'in-between states' are unimportant.

Selfie Stick vs Umbrella

Selfie Stick vs Umbrella

There are a number of GIF animations that illustrate this concept nicely.

Gif Animation

In 2015, Geoff Graham outlined his view on the differences, saying that responsive layouts adapt to the browsers' width at any given moment in time, whereas 'adaptive layouts' adapt to the browsers' width only at specific breakpoints.

Geoff said that responsive design is based on percentages (i.e. the same thing as fluid design), and adaptive design is based on fixed units of measurements. Both are powered by CSS media queries.

Definition 2: Adaptive design responds itself to the entire device environment (not just the screen)

However, as you can see from the comments below Geoff's article, not everyone agrees with this definition.

Here's the top comment:

"Responsive design can be fluid or fixed, so can adaptive. The difference is that responsive design doesn’t care about what browser is used, it responds to the browser size and reflows the layout accordingly. On the other hand, adaptive design adapts to the browser environment specifically, and may or may not take into account the browser’s current size." ⏤ zzzzBov.

By zzzzBov’s definition, Adaptive Design is JavaScript-driven and is as much about the reacting to the type of device as it about screen sizes. For instance, a tablet may have a high-resolution screen, yet it needs larger touch targets. A phone might need a different navigation system.

Many big names have weighed-in with their opinions, ranging from UXPin to Mozilla but it still appears to be unresolved.

Here's My Take on the Matter

Let's use an adjustable lamp as a real-world example: responsive design is when you flick the switch, and the lamp responds by turning on the light. Adaptive design is when you’re able to adjust/adapt the lamp so that you can see better.

If a website doesn’t respond to your interaction, it’s not very responsive, and if it isn’t able to adapt to its surroundings (i.e. the device screen), it’s not very adaptive. Both of these can significantly impact the UX.

Why Responsive Design Isn’t Responsive Design

A response is an action as a result of another action, for example, if a website button changes its background color when the user hovers over it — the action is the hover, and the response is the background color being changed.

Ordinarily, when we say that a website is responsive, we mean that it adapts to any screen size on any device, but in actuality, it should mean that it responds to user interaction. Here’s why:

A user cannot resize the browser on their mobile device. And while a user can change the browser size on a desktop computer, they don't typically need to do that to interact with a website — it’s not a normal user interaction. Sure, us web designers often resize the browser to test a website, but it’s not a normal action for the user.

Why I Think “Adaptive Design” Is More Accurate

Since screen sizes are generally used in their default state (in the sense that you can’t or wouldn’t need to resize it), the term “adaptive design” might fit the bill more accurately. Websites (well-designed ones at least) will modify their layout to fit the device of the user; it’s an involuntarily action, meaning the user doesn’t have to interact with the website to make it adapt. Adaptive design could also describe how we optimize loading times and perceived performance for smaller, handheld devices.

So What’s Fluid Design Then?

Back in the early 2000’s, the big debate was ‘Fixed Layout vs. Fluid Layout’. Fluid design layouts were set with percentages, stretching to fit the frame of the browser. Fixed layouts were set at locked a single layout determined by a pixel width.

Neither was ideal. Fixed layouts looked great on the right screen but were unusable on small monitors. Fluid layouts were more flexible but looked thin and stringy on wide screen monitors.

Responsive Design was Ethan Marcotte’s direct response – no pun intended – to these design quandaries. Classic ‘stretchy’ RWD is like a mature, ‘grown-up’ version of fluid design – stretching to fill the window, but reorganizing itself when necessary.

Geoff’s definition of adaptive design – though not agreed upon by many – is like a ‘grown-up version of fixed design’ – not a single fixed layout, but 3, 4 or more layouts.

Conclusion

So there you have it, my take on responsive and adaptive design. After reading this article, will you change the way that talk about these terms, or is it easier to carry on talking about responsive design as a way to make websites adapt to multiple screen sizes?

Have you ever used the term “adaptive design” and received nothing more than a blank stare?

I’m curious, let me know in the comments below!

(No fighting please!).

  • dvdrtrgn

    So Adaptive Design draws from sets of curated view scenario parameters and it consists of any reflexively applied content styling technique?

    • I think you could put it that way :). Although, if you wanted to be pedantic, you could argue that ‘content styling techniques’ is a narrow definition. I’ve heard conference talks describing UIs that cancel out your motion as you walk (like jitter removal in video) and even presenting different simplified written content on mobile devices. That’s a kind of adaptive design beyond styling.

  • Patryk

    What a lie…”A user CANNOT resize the browser on their mobile device. ”
    And PORTRAIT/LANDSCAPE mode? Is not resize? So what is it? When I just change orientation on phone then I get other look of website…

    • rag

      Not to mention the split screen feature in many Samsung devices where you can have 2 apps running at the same time. That feature exists for years now. And the new Android 7 (Nougat) finally has it built-in.

      • I hadn’t considered that actually, do you have control over how the screen splits? For example could you change it from 50/50 to 30/70?

        • ntamas

          yes, by moving the divider between them, you can resize the apps themselves

    • Assarte

      Moreover, document layouts are always reacting to the viewport where they’re just loaded – it means a layout should be a response for the default viewport’s dimensions, even at first time. Although some of the layouts “decided” to ignore the viewport and not to respond to its context, this so-called decision means the difference between responsive and non-responsive design. For more interesting, theoretically and on very high when something ignores other something it could be called as silent (or indirect) response, so we could call any layout responsive.
      This entire discussion including the article itself could be turned into some “techie-buddhism” sooner than we want, results in everything could anything and nothing by personal decision – somewhat meaningless, won’t turn us more productive nor better than how we was.

    • I meant resize in the sense of dragging the edges of the browser window and making the browser a custom-size. When you change the orientation of the device, you’re not resizing the browser at all, it’s the same size, it’s just that the website adapts to the new orientation.

      • rag

        Indirectly you do resize the browser. When you change the orientation of the device you flip the coordinate system of the screen, e.g. from 1280×720 to 720×1280. This effectively resizes the screen and the browser with it. The website does not (need to) know that the phone orientation changed. It just gets a resize event.

        • Sure, you’re right if you wanted to be technical about it. But my point was that it’s something the user typically does. I can’t think of one time I’ve ever changed the orientation to see a website differently, or maybe it’s just me? I find that landscape drastically reduces what you see above the fold. It’s great for games maybe, but for websites it’s a hindrance.

          • rag

            I do that very often, because when you read text on a phone with a readable font the text lines become very short, sometimes 1-2 words. That is not a pleasant reading experience. When you change orientation the viewport becomes wider so that more text fits on a single line.

          • That does make sense to be fair. I guess there are some cases where responsive design and adaptive design overlap, where user interaction results in the adaptation of the design.

  • Ralph Mason

    I’ve always felt “adaptive” was a better word that “responsive”, but as long as we all understand what we’re referring to, it doesn’t really matter.

    • Yes, I don’t think it the name matters. I was surprised to see that two groups of people were using the term for completely different behaviors. I’ve seen that GIF animation on business sites like FastCo so I suspect a lot of our clients use definition 1. Developers seem to more likely use definition 2.

      • What people should take away from this is not the “correct” definition, but that while having websites designed for all screen sizes is great, there’s much more to design than “having everything fit on the screen”. There’s interactions too (how a website responds to user input) and so on. People tend to only take notice of things when it’s trendy, when it’s a buzzword.

  • I think this just got me confused. I’ll look somewhere else

  • Dev Agrawal

    I have another opinion : In responsive design, when you resize the browser window, you get a layout which you will see when you view the page on the device with the new width, but that doesn’t change how you interact with the page. For example, when you resize the browser to that of a typical mobile device, you will see the page how you will see it in the mobile, but you can’t interact with it in the way you would do it in a mobile. For example the touch events are different than the typical click and over ones. Maybe that is what Adaptive design is about, as it would detect that when using a mobile device it would change the layout, irrespective of the size (landscape/portrait), while on pc resizing would not have significant effect on the layout. Please correct me if I am wrong somewhere.

    • @dev, I don’t think your think that your opinion sounds very different from the second school of thought – ‘Adaptiveness is about changing interaction methods – not just screen layouts’.

      I haven’t seen it done, but by definition, this type of adaptive design might detect screen readers and present content optimized for that device – decisions that have nothing to do with where an element is presented on page.

  • varun

    @patrykszymonpadus:disqus in Adaptive Design we’ll have to make each & every variation for a Particular Viewport or Screen Resolution, that’s a Adaptive Web Design and its better then Responsive Design because in adaptive design your can dedicate you focus on a particular screen resolution.

  • Noelle Johnson

    I think that this is a dangerous assumption: “And while a user can change the browser size on a desktop computer, they don’t typically need to do that to interact with a website — it’s not a normal user interaction. Sure, us web designers often resize the browser to test a website, but it’s not a normal action for the user.”

    I resize my browser windows ALL THE TIME to allow me to see something in one window while working in another and sometimes there is even a third window! … and NOT for testing but for personal use! I love having Netflix playing in one window, my mail open in the corner and Facebook or Sitepoint open in half to a third of the window. I HATE when my layout switches to a tablet type response/adaptation if I resize the browser on my laptop. As designers, we should not assume that people on desktops/laptops do not resize!!!

Recommended
Sponsors
Get the latest in Design, once a week, for free.