Originally published: Jul 18, 2012
Editors note: This article was originally published on LukeW Ideation + Design, 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.
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.
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.
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.
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.
How do you adapt and/or optimize multi-device designs? Share your thoughts at our UIE Brain Sparks Blog.
Read related articles: