Responsive design vs. adaptive delivery: Which one’s right for you?

Ravi Pratap is CTO of MobStac.

Responsive design is being increasingly touted as the gold-standard for making hitherto desktop-only websites accessible to a wide range of mobile and tablet devices. But is it always the answer to engaging users on every mobile screen? And more importantly, is it the right solution no matter what your business goal, budget, and user-need are?

[aditude-amp id="flyingcarpet" targeting='{"env":"staging","page_type":"article","post_id":861070,"post_type":"guest","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"dev,mobile,","session":"C"}']

Probably not.

Responsive design is a technique in which the same HTML code is delivered to each device, but tweaks to CSS (which determines the layout of a web page) allow it to adjust to the screen’s form factor.

One of the great advantages of responsive design is that a single codebase for a website can serve both mobile and desktop users. Theoretically, developers’ lives become easier because this removes the maintenance nightmare of multiple code versions targeted at different device types.

In practice, however, using the same code implies that the mobile version of the website loaded on smartphones has the same size and complexity as the desktop version. This means that smartphones typically have to download and sift through all the information even if it’s irrelevant to what will be displayed, which is the primary reason that responsive websites tend to be bloated and slow to load on mobile devices, instantaneously killing user experience and causing poor conversion.

Alternative to RWD: Adaptive delivery

The alternative to going responsive is to adopt a technology known as adaptive delivery, something more brands and businesses are turning to these days.

With adaptive delivery, the most significant difference is that the server hosting the website detects the devices making requests to it, and uses this information to deliver different batches of HTML and CSS code based on the characteristics of the device that have been detected.

Using an adaptive design approach, a server can choose how to optimally render pages, as well as enhance or remove functionality on the fly, based on the capabilities detected, as well as information known about the particular user.

[aditude-amp id="medium1" targeting='{"env":"staging","page_type":"article","post_id":861070,"post_type":"guest","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"dev,mobile,","session":"C"}']

The most important thing adaptive delivery allows you to accomplish, is a highly differentiated experience that is built for the specific intent of your mobile customer. A good example is Lufthansa’s mobile website, which focuses on the actions a mobile user is most likely to take, such as looking up their itinerary, checking in, and getting flight status information.

Adaptive delivery has a number of inherent advantages over responsive design:

1. It allows you to specifically capture user intent more precisely on a mobile device. For some businesses, a mobile user’s intent is to engage with the business in a very specific way that is different from their behavior on a desktop website. For example, on a car dealership website, a user browsing on a mobile device is probably more interested in booking a service appointment than looking at the dealer’s car inventory.

2. Developers do not have to go back to the drawing board and re-code the existing website from scratch. This is important because many websites are rather complex, with a lot of legacy code built up over time, and scratching all the effort that has gone into it is generally not an option. In our earlier example, Lufthansa’s desktop website is a massively complex operation, involving many significant person-years of effort and usability testing to get it to the point it is today.

3. Adaptive websites are much better in load time performance, and overall user experience. This is because adaptive delivery works by only transferring those assets necessary for the specific device, and optimizing images and multimedia content on the fly to suit display resolution and size. For example, when a high-density retina display is detected, high-resolution images are transferred and used instead of defaulting to high-resolution images for everyone.

Which one is right for you?

Responsive websites generally work well for content-heavy websites with not a lot of difference in user intent between mobile users and desktop users, and fairly simple functionality.

Adaptive websites, on the other hand, shine in most cases where user intent on mobile differs significantly, and website performance becomes a crucial factor in determining visitor conversion and satisfaction, such as in e-commerce websites.

[aditude-amp id="medium2" targeting='{"env":"staging","page_type":"article","post_id":861070,"post_type":"guest","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"dev,mobile,","session":"C"}']

While both responsive design and adaptive delivery have their own merits, which one is right for you can be answered by putting your customer’s need front and center while satisfying your business goals.

Ravi Pratap is CTO of MobStac and is responsible for all of the company’s technology strategy, product innovation, and engineering execution. He has several web content related patents to his credit and was named the Businessworld Hottest Young Entrepreneur 2011. He is a compulsive technologist‚ with roots in the Linux/open source world, having contributed code and effort to open source projects such as GNOME, Mono, and libcurl while at college and graduate school. Before founding MobStac, he spent four years at technology startup Hillcrest Labs as manager in its Software Products group, where he was one of the earliest engineers on the team.