Multi-Device Adaptation vs. Optimization

This article was originally published on LukeW Ideation + Design on June 14, 2012.

Direct comparisons between multi-device design solutions for the Web often miss the point: each is better suited for particular things. Specifically, responsive Web design is an excellent solution for adapting to the capabilities of any given device. Server-side device detection solutions are great at optimizing for many of the same capabilities. There’s a reason for both techniques.

To better understand this distinction it helps to look at differences between adaptation and optimization including when each one is most appropriate.

Adaptation

If you don’t exactly know what you’re getting into, it’s difficult to arrive 100% prepared. Instead, you come ready for many situations and adapt to what you find when you get there.

As a simple example, imagine you are packing for a trip but don’t know what the weather is going to be like at your destination. You’ll probably bring some options for when it’s cold and hot. Better yet, you’ll pack layers. When you arrive, you can simply add or remove layers based on the actual weather conditions waiting for you. You didn’t pack just what you needed, but you’re comfortable and up for anything because you can adapt.

Responsive Web design solutions are similar. They pack a bit of additional HTML, CSS, and Javascript when they travel so they can easily adapt to the device they show up on and provide people with an appropriate experience. Responsive solutions are not completely “optimized” because they may bring a few things they don’t end up needing with them but they are ready for pretty much anything.

Adaptation is essential on the Web because in many situations we don’t know what we’ll find when we arrive at our target device: a large or small display area, mouse or touch input, high or low bandwidth, and so on. An adaptive solution like responsive Web design makes sure we’re prepared for a large number of eventualities.

And that’s immensely useful.

Optimization

On the other hand, if you know exactly what you’re getting into, you can optimize beforehand. That is, you can bring only what you need and nothing more.

In our travel scenario from earlier, if you know it will only be sunny and warm where you’re going, you can just pack shorts and t-shirts. Your baggage will be lighter so you’ll move faster and not be burdened with clothes you don’t need. That’s optimization.

On the Web, we can optimize for different devices if we know important things about them up front: large or small display area, low or high bandwidth, input methods (touch, mouse, keypad), and so on. When we have this information before sending a payload from our server, we can just send the device what it needs -nothing more. This is the essence of separate mobile and desktop templates powered by server-side device detection. They allow us to optimize as much as we can.

And that’s immensely valuable.

Why Both Make Sense

In an ideal world, we’d always optimize. We’d know everything about the devices we’re serving before sending them anything. We’d also have unlimited resources to make sure what we send is just right.

But the Web is not an ideal world. New devices emerge and rise or fall rapidly. The capabilities of some devices coming to our sites are opaque or incorrectly reported. So sadly, we can’t always optimize. We need to be ready to adapt as well.

Back to the travel analogy one last time… even if we thought it would be sunny throughout our trip, one day it might rain. With only t-shirts and shorts we’d either be wet and miserable or stuck within our hotel unable to do much. If we had packed some layers as well, we’d still be able to get around and perhaps even enjoy ourselves.

That’s why adaptation and optimization go well together. Deciding that responsive design doesn’t work because it isn’t well suited to optimizing payloads to just what’s needed, is judging its effectiveness with the wrong measure. Similarly, separate mobile and desktop templates built using server-side device detection might miss the mark if they’re judged by their ability to adapt to a 7-inch tablet in landscape and portrait mode.

These shortcomings don’t negate either technique. Each one is great at things the other can’t do well. As a result, solutions that combine the best of both are often quite interesting.