Skip to content

<blog>
Adaptive Web Delivery

Chris Mauck

May 9, 2016 • 2+ minute read

Adaptive is NOT Responsive

I say that in jest, but to be fair, an adaptive "concept" can be achieved through responsive methodologies.

Taking a Step Back...

In a previous article, I spoke about "adaptive layout" [layout types]. Sadly perpetuating the confusion and the misgivings that abound in the web development community. In the context mentioned in the previous article, certain things like device detection from the server-side can determine which template to deliver to the end user. This is the approach that we will dive deeper into today. The other concept of client-side detection combined with progressive load, can end up adding load time and unnecessary bloat to your website. Not to mention maintain the confusion found throughout the industry currently.

To clarify what this means and to further separate "adaptive design" from responsive design, let's think of this approach as Adaptive Delivery.

Adaptive Delivery

Adaptive Delivery is the concept of a web server detecting the types of devices making requests to it and serving up HTML and CSS that may cater to the capabilities that the detected device can best support. This includes optimized images, videos and fonts and perhaps even custom templates required for the experience.

In Practice

To garner all of the benefits of Adaptive Delivery, you should also consider Responsive Design methodologies when developing your content. By doing so, you can ensure that not only will the user receive a template that is catered to their device, but by using media queries it's also possible to deliver images and videos in differing resolutions and levels of quality depending on the device.

Benefits

By implementing Adaptive Delivery, the most obvious benefit is a customizable experience for your users. This approach does not require building the content from scratch for each scenario. The best approach is almost always to begin with a mobile experience and layer content and interactions on top of that as you craft the larger scale experiences.

Decreased load time and performance gains. By choosing an adaptive delivery approach, your templates are delivered based on the detected device. Therefore, only the relevant CSS, JS, images and other assets that pertain to that particular template and targeted device are downloaded from the server. This leads to faster loading mobile experiences and happier users.

You can implement Adaptive Delivery on a pre-existing site without interrupting the current code base or delivery to the users. Because we are talking about templates and leveraging assets based on device detection, we can add or remove templates as needed, as well as update detection methodologies, without rebuilding the main site or even disrupting service.

Disadvantages

I think we can agree that the Adaptive Delivery method definitely has it's benefits. However, it can't be denied that there are also some negatives. For instance:

Versioning incompatibilities may arise as multiple templates are being utilized. If functionality is added or removed on the desktop site, is it being modified on the tablet and mobile sites as well? Who is responsible for verifying the conformance? Should they conform?

Internal linking can become complicated. If you choose to include a link on the mobile template version of the site that allows for the user to visit the "desktop version" or "view full site". If your site templates are dictated by server detection, a check must be put into place for those times when a user is given the ability to override the choice made by the system. A choice that must not only be honored, but that must also be remembered. What about a link for the user to "get back" to the mobile or tablet version?