Adaptive design

Have you ever wondered if adaptive design is a good solution for you? We’ll explore the background of adaptive design, how it’s different from responsive design, and some good ways to figure out when (and if) it’s right for you.

What is adaptive design?

Adaptive design is a user interface that’s adapted to different screen sizes. It consists of multiple fixed layouts where the size most closely associated with the user’s device is rendered—whether that’s a phone, tablet, computer, or something in between.

Adaptive design vs. responsive design

Adaptive design is similar to responsive design in that both systems look for a device’s size before rendering the content. However, adaptive design is based on a fixed layout: It’s not moving the content around based on the size of the device, but rather loading a specific design for that specific device.

An adaptive design usually caters to the six most common screen widths: 320px, 480px, 760px, 960px, 1200px, or 1600px. On the other hand, responsive design is based on a dynamic layout, and fitting the content to the screen regardless of its size.

Let’s break this down even more. Say there are three separate devices rendering the same web page: a desktop, tablet, and a mobile phone.

• For an adaptive design, we could create three different layouts for each of the devices. Or we could have two layouts: one for mobile, and one for the desktop/tablet. The resolution for the desktop would probably be wider than the tablet, but we could reuse it in a pinch.
• For a responsive design, each one of these devices would have a design that’s dynamically loaded and displayed, and would fit all screen resolutions. That means one design would cater to all devices, but they wouldn’t look the same. And they might not be optimized for each specific resolution.

There are definitely trade-offs for either implementation, and the execution is very dependent on the situation.

Advantages and disadvantages of adaptive design

Adaptive design lends itself well to being completely optimized for the current device. Irrelevant data—whether that’s images, frameworks, or API endpoints—is moot. The advantages of adaptive design can be huge, especially if you’re in a position where you can optimize everything.

Advantages

One of the biggest strengths of adaptive design is that the content is customized. Since it’s created for your exact device, it feels more relevant. This is especially true in comparison to a responsive site, which is not designed specifically for that device. Let’s look at a few examples.

The new iPhone X, XR, and XS were introduced without physical home buttons on the bottom of their screens. Because of this, there’s a larger area of padding needed to accommodate the new design convention that’s introduced by the OS. An adaptive design would be customized to the new specifications, and, since you know exactly what device you’re targeting, optimized for a better performance—making it faster.

At a deli, the self check-out system runs on a specific touchscreen tablet; the same check-out process applies to mobile users. With an adaptive approach, you’d have two different designs: one for mobile, one for the in-store tablet. This would allow you to create a unique experience for each. The in-store tablet might not need a menu, logo, log-in, or accounts that the mobile site would warrant. Both solutions can be customized directly to the audience and the device.

Disadvantages

The biggest disadvantage of adaptive design is supporting multiple designs. Depending on how big your footprint is, and how many iterations of the experience you’d have to create, it might take a small army to support it. You would need to design, build, and support each experience. If you’re a small team or lone wolf, this would be a large task that might not be worth tackling.

You could also leave users with non-compatible designs that are stuck in the middle. For example, the design for a medium-sized tablet might default to the nearest size, which could be a mobile or desktop display. This could create an odd experience and might not work well for the user. (Tip: Giving a user a toggle between the two modes might be a good way to empower your user to self-correct the display.)

Finally, there could be concern for duplicate content when it comes to SEO and Google reading your domain. If the content for your multiple sites lives at something like a m.domain.com or a t.domain.com URL, there’s a possibility that Google could penalize your rankings because it’s reading the same content in multiple places on your site.

Identifying if adaptive design is right for you

So how do you decide if an adaptive site is right for you? When you’re considering which to use, it’s easy to select a responsive design solution and call it a day. But an adaptive design could offer a better user experience and—depending on how many devices you need to support—be less maintenance for you to design and build.

New build or existing site

If you’re retrofitting an existing site, adaptive design might be an easy way to bring the site into other breakpoints or devices. This would allow you to cater the content to a few different devices without having to invest in a fully-responsive framework.

If you’re building a new site, adaptive design could still be worth investing in; you just need to consider a few more things.

Look at your current traffic

Is your data dominated by a few specific devices or resolutions? Or are there a ton of different ones? If your current traffic is dominated by a few devices, this could be a prime adaptive design candidate. You can hone in on a few specific dimensions and create a really refined experience for those users.

On the flip side, if you have a ton of different devices on your site, your solution might be better suited for responsive design.

Consider your target devices

If you’re designing for a fixed set of hardware (POS systems, flight kiosks, mobile e-commerce, etc.), adaptive design could be a good solution. Since you’ve eliminated the variables that come with multiple-device support, you’ve freed yourself up to concentrate on the best design for your hardware.

Save time and money right from the start

You want your user to have a smooth product experience—but what’s the most efficient way to go about this important step?

With InVision, it’s easy to share prototypes in order to quickly gather meaningful feedback. This empowers your team to test and learn on multiple devices, and iterate rapidly as the project evolves. Once you’ve got buy-in, take your design to high fidelity with the screen design power of InVision Studio. No matter where you are in the design process, InVision is there to help.