Adaptive: Content, Context, and Controversy

What’s the difference between responsive and adaptive? While responsive design embraces an ethos of “One Web,” adaptive solutions aim to serve different information based on what we know about the person or the device. When people say they want to go “beyond responsive,” they often mean they want to implement adaptive solutions. In this talk Karen unpacks what people really mean when they talk about adaptive designs or adaptive content. She outlines scenarios in which it makes sense to target information to the device or context—and when it doesn’t.

Video

Slides

Transcript

  1. Adaptive Content Context and Controversy

    I’m kind of a high-minded idealist about the web. I think that the web is its own medium. It’s not print, it’s not television. And I believe that the values that define this medium, the values that make this medium great are its fluidity, its flexibility, its availability. The web can be accessed by people using screen readers, or alternate input mechanisms. The web can be accessed by people on slow or fast connections. The web can be accessed using every type of device with a browser. And the web naturally works this way; we don’t need to splinter and fragment the web to get it to do this, it naturally wants to do this—well, as long as we don’t break it.

  2. One Web

    The W3C sort of sums up this high-minded philosophy by calling it One Web. The W3C says that, “One Web means making, as far as is reasonable, the same information and services available to users irrespective of the device that they’re using.” Now, when you read this, it sounds a little bit like responsive web design, doesn’t it? So, I believe that today responsive web design is really just the latest skirmish in the battle for One Web. It’s sort of the latest take on: How do we make the web available to everyone?

  3. Responsive Web Design

    With responsive design, you have a single set of content that you serve up against a single URL. To do so means that instead of fragmenting your efforts across a variety of different platforms and screen sizes, you maintain a single codebase. That means that your entire team can be working together, pulling in the same direction against the same release cycle. And frankly, from my perspective, as a result, you get more value from your initiatives. This sounds amazing, doesn’t it? I mean, why would you ever want to do anything else?

    Well, sadly, if there’s one thing that I’ve learned from my twenty years of web consulting, it’s that nothing’s ever this simple.

  4. More than responsive

    So, Lívia Labate, who was the former head of user experience for Marriott, she led a large-scale responsive replatforming of Marriott.com, said that she would often go into meetings with stakeholders and people would tell her, “I need more than a responsive site. I need it to be adaptive.” And the problem is that nobody knows what that means.

  5. Beyond responsive

    And yet today, when you go around the web, there’s all kinds of people telling us that we need to “move beyond responsive design.” “We need to go beyond the responsive web and optimize our website for mobile users.” “We should go beyond responsive design and discover context first.” “We should go beyond responsive to the adaptive web.” This guy says that we should move beyond responsive and adaptive, to something he calls “adjustive web design.” I don’t know what this guy’s talking about.

  6. milhouse-the-magician

    And when you read these articles, what you’ll basically glean is that adaptive is something akin to magic. You will wave your magic wand over your auto-magically created website and it will magically do exactly whatever it is that your users want at that moment in time on that device.

  7. Responsive, adaptive, m-dot

    In this talk today, I’d like to outline three different perspectives on how we approach publishing on the mobile web: responsive design (perhaps you’ve heard of it); adaptive solutions (let’s try to figure out what those are); and in contrast, let’s look at our old favorite, the m-dot, or separate mobile website.

    So in the course of this talk today, I’m going to outline a little bit of a model of different perspectives of what all this means, but just to get started, let me outline a few definitions so that everybody’s on the same page.

  8. Definition of responsive design

    Now, I know y’all are here because you know what responsive web design is. Responsive web design is fluid grids, flexible images, and media queries. It enables you to maintain a single fluid website that will adapt to different devices.

  9. Definition of an m-dot

    An m-dot site, in contrast, as you realize, is a completely separate website usually served up against its own subdomain, often, “m.URL.com,” hence the moniker “m-dot.” And the trouble with an m-dot is that—well, one problem—is that in most cases you’re serving up only a paltry subset of the features or content that you imagine a “mobile user” is going to want. And by guessing what it is a “mobile user” is going to want, we have to make choices about which website we are serving to which devices. And so another challenge that you run into with m-dots is that it is far too likely that in the great guessing of which website goes to which device, that we will send the wrong information, the wrong services, the wrong layouts, to the wrong type of device.

  10. Study by Radware

    A study last year by Radware looked at which types of sites were being served to large Android devices, and they found that about thirty percent of the time a larger format Android device was served the m-dot version of the website, even though those devices, like the Nexus 6 and the Galaxy Note, had a very similar form factor to the iPad Mini, which only six percent of the devices were served. So, trying to guess which device we should send which website to is always going to be problematic.

  11. What is adaptive?

    Okay, so we’re all here, we know what responsive is. You can wrap your head around what an m-dot is. What the heck is adaptive?

  12. 2016 0408 Context and Controversy – Long.025

    I would like to offer a loose definition of adaptive, which means that it means that you are serving something different, serving up something different to the user or to the device based on a set of characteristics.

  13. Responsive versus adaptive

    Now, I couldn’t stand up here today talking about adaptive without expressing what I think is probably one of the most common definitions of adaptive, and it is that in a responsive framework, the site is completely fluid across all breakpoints, whereas adaptive is often used to mean a site that snaps into place at particular device-specific sizes.

  14. Responsive example

    In a responsive framework, as you look at these boxes here, you’ll notice that they are completely fluid. The boxes fluidly expand across every screen size in between the breakpoints. In a responsive framework, as you look at these boxes here, you’ll notice that they are completely fluid. The boxes fluidly expand across every screen size in between the breakpoints.

  15. Adaptive example

    If you look at this example of adaptive, it looks really choppy, and the reason that it looks so choppy is that those boxes stay at a fixed size and they snap into place.

  16. adaptive tool

    Often when designers are thinking about adaptive design, it’s because they are imagining they are designing around device-specific sizes. Here is a hypothetical layout tool, an adaptive layout tool, that contains pre-loaded canvases for iPhone 5, iPhone 6, iPhone 6+ in portrait and landscape. Now, this might be a fantastic solution if you are designing native apps only for the iOS infrastructure.

  17. Web resolutions

    But it is a terrible solution if you are trying to deal with the sheer diversity of screen sizes, form factors, orientation, in-app browser windows that you will encounter on the real web.

  18. Adaptive means serving something different

    Now, I have to confess, this definition of adaptive, the idea of creating fixed-width sizes that snap into place at particular breakpoints is my least favorite definition of adaptive. If I could fiat one thing into place on the web today, it would be to stamp out that use of the term adaptive. We have burdened the word adaptive with far too many definitions, and this one I might just replace by calling it “Badly Implemented Responsive Design,” or, “Not Completely Fluid Responsive Design.”

    And the reason that I have trouble with this is I’d like to call your attention back to what I think my definition of adaptive is, which is that it means you are serving something different to the user.

  19. Serving into a URL

    Let’s look at the first characteristic that we want to keep in mind if you’re serving something different, and that is are you serving information into the same URL?

    So, with a responsive obviously you’ve got one website, one domain, easy to maintain. With an adaptive site, you do as well, which means that an adaptive solution, you are sidestepping some of the more problematic issues with an m-dot site. Rather than maintaining a completely separate subdomain to solve for some of the thornier problems with design or layout or content. In an adaptive solution, you can dynamically serve information into the same URL. Google even sometimes refers to this as “dynamic serving.” Luke Wroblewski coined the term RESS, which stands for Responsive and Server Something. I think that also is probably another term for adaptive.

  20. Responsive design is client side

    Responsive design is client-side, which means that the whole page is delivered to the device browser, to the client, and the browser then changes how the page appears in relation to the dimensions of the browser window.

  21. Adaptive design is server side

    Adaptive design is server-side, which means that before the page is even delivered, the server detects the attributes of the device and loads a version of the page that is optimized for its dimensions and native features.” I got this definition from The Huffington Post, which is my most trusted source of news and information about the web. Ethan loves it when I use this definition, because honestly, who’s got a better source to cite than The Huffington Post, right?

  22. Responsive design is Google’s recommendation

    I think it’s important to know when we’re talking about, whether we’re serving information into the same URL, that responsive design is Google’s recommended approach for building mobile websites. Now, I want to be clear, Google is not going to penalize you if you have a properly managed m-dot site or if you use adaptive solutions or dynamic serving. Heck, Google uses dynamic serving themselves for many of their products. And I would say if you have the time and the money and the developer resources of a Google, then I say go to town on adaptive solutions. But for the rest of us mere mortals that are concerned with SEO, I think it’s really important to note that there is probably no organization on the planet that is more invested in the idea that you will serve up a single website with a single set of content against a single domain than Google is. It makes their job of searching and indexing the web that much easier if you use responsive design.

  23. Serving different design

    It’s pretty clear: we’re serving up information into the same URL with an adaptive solution. What might be different, then, when I say we’re serving something different? Well, the first thing might be that you want to serve different design. With a responsive solution, obviously you’ve got a single set of code, a single design. With an adaptive solution, you don’t have to. And obviously with an m-dot solution, you aren’t serving the same design as well.

  24. Serve a different page

    So, under what circumstances might it make sense to use an adaptive solution to serve different information, serve a different design than you would with a responsive solution? Well, one example might be in scenarios in which you wish to serve a different page.

  25. Time machine

    Last year I worked with a client, a large university client, and they had just done a full-scale, bottom-up, soup-to-nuts, “burn it to the ground and start from scratch,” desktop-only redesign of their website, and they hired me to come in and consult with them about what they should do now on mobile. And I did a little audit of their website and I came back and I said, “You should build a time machine and go back in time and not have done that.” This proved infeasible.

  26. 2016 0408 Context and Controversy – Long.084

    So, I did a little review of the site and I came back and I recommended that they should do a responsive retrofit of the front-end. I said, “Why don’t you go in, recode the front-end, you can drop in some media queries, drop in some breakpoints. It’s not going to be 100% perfect, but given that you just did all of this work, it’s probably going to be the most efficient solution for you in the immediate term.” And when I made this recommendation in the meeting, it was like this chill came over the room. I mean, you could just see people’s body language get all hostile, and they’re like, “Mm, no, no. Mm, that’s never going to work.” And I’m sitting there, I’m dragging the browser window closed, going, “No, you could totally do this.”

  27. 2016 0408 Context and Controversy – Long.054

    And so finally, after some time, one of their executives speaks up and he’s like, “Karen, you obviously don’t understand how political a university home page is.” I started laughing. I’m like, “Try me.” He says, “Well, if we go responsive, can we serve a different home page?” and I’m like, “Of course you can.” What, do you think Ethan Marcotte comes over to your house in the middle of the night and yells at you for being a traitor to the cause? I mean, if literally the only thing stopping you from making the other eleventy bajillion pages on your website responsive is that you don’t want to deal with the stakeholder battles that you would have to have in squishing down and rearranging your home page, then by all means, cut a different version of your home page and we will all go out for an early lunch. This is like the easiest consulting job I’ve had all year!

Current page