Responsive design is increasingly being promoted as the golden standard for creating the new range of web applications. However, owing to complications arising out of using the same code in every version of the website, an alternative to RWD technology known as adaptive delivery or design is what brands are turning to these days. How would you choose between the two? This article is about the same.
Responsive web design is no news anymore. The web designer fraternity, the tech community and even the average self-confessed web freak now knows that responsive design is the way forward. Smartphone, the game changing device really forced web designers to come up with websites that could automatically respond and adapt to any device with any screen size & thus, responsive web design was born. With the techniques of RWD the site’s layout can be optimized to suit the screen size of the device it is being viewed on. Then where does the talk of adaptive design come from?
To the uninitiated both the buzzwords might seem like interchangeable term for the same technique. However, as more and more traffic comes from mobile devices it has increasingly become important for publishers to know the distinctions between the two and choose the best for their site. Besides, a Millenial Media and comScore survey done in the United States reveals that 56% of online content is now consumed through smartphones and tablets while the remaining 44% is consumed through desktop computers. And the shift continues to accelerate. So that settles once and for all the importance of having a site well suited for mobile audiences. Now coming back to the question: How to choose between the two?
What’s the difference?
The easiest way to go about choosing one option out of the two is to understand the differences and advantages that one offers over the other.
While the responsive deign is a client side approach where the entire page is delivered to the client (device browser), adaptive design is generally server-side, where the server first detects the attributes of the device typically through server-side plugins or custom user agent detection, and then loads a version of the site optimized for its dimensions and native features. Thus adaptive delivery uses predefined layouts that have been created for a variety of screen sizes. When a particular screen size is detected the corresponding layout is activated and matched with the style sheet. In adaptive design the layouts change on the basis of breakpoints.
There is also another alternative, a client-side adaptive approach where extensive JavaScript is used to equip the websites with advanced functionalities and customization. A bit similar to responsive web design, this type of delivery works on the client side or in the user’s browser, which detects different devices and loads corresponding template for the user. The advantage here is that it only requires one set of HTML and JavaScript to be used across all devices, so that implementing changes is much easier.
Responsive versus Adaptive: Which one to go for?
One of the big advantages of responsive design that propelled it to instant stardom was that a single codebase served well for both the desktop and mobile user. This made a developer’s life easier as it almost eliminated the nightmarish experience of having to look after multiple code versions for different device types. However, the same code for both the devices means that the website being launched on smartphone will have the same size and complexity as the desktop version, which is the main culprit behind responsive websites behaving weird and bloated on mobile devices.
On the other hand, using an adaptive approach, a server has the freedom to choose how to optimally render pages, removing or adding functionalities on the fly, on the basis of the device detected and the user information.
The benefits can be summed up as below:
- Developers wouldn’t have to recreate the website from scratch as one would have to while going for responsive site. Most websites become too complex over the time, with one functionality being added on top of the other and scratching all the effort is not a viable option. The design and testing phase is particularly fussy as it is difficult to customize the user experience for every device or context.
- Adaptive websites are faster and sometimes more user-friendly. The reason is simple enough. As adaptive delivery works by transferring only the device specific assets, images and multimedia content can be optimized on the fly to suit display resolution and size.
The server-side adaptive offers distinct templates for every device, enabling greater level of customization along with faster loading of web pages. In addition, it is compatible with different server-side plugins which are available for popular content management systems and eCommerce systems such as Magento. However, this approach requires considerable changes to the back-end systems, and if you are on a budget, it could prove a little painful. You will be required to manage multiple templates which will show as a bump in the maintenance cost. Performance issues can also arise when servers are under heavy load.
Bottom Line
Content-heavy websites where there is not much of a difference in user intent between desktop and mobile users generally go for responsive design. However, if you are designing a website where the mobile user intent is significantly different than your desktop target audience, adaptive design will be a better bet. The example is e-commerce websites.
Besides, if a webmaster chooses adaptive design, he or she can further optimize the user experience by taking advantage of the extra features that these devices offer, for instance, location. That is exactly why 82 percent of the Alexa top 100 global sites use some kind of server-side detection to serve content.
For most organizations using responsive design in conjunction with adaptive delivery works well. The content heavy portion of the site uses responsive approach allowing readers to consume the content in a satisfying manner no matter which device they are on. On the other hand high intent portions of the site work well through adaptive delivery. The key is to find a balance between serving your users and meeting the business objective.
Web design is one of the hottest skills on the market to have right now. According to the employment data offered by Bureau of Labor Statistics, the job outlook for web developers is at 20% which is faster than average. The Best Jobs 2014 report of USNews puts web designing jobs within the top three technology careers. Thus, for an aspiring web designer knowing the nuances of design such as one explained above can be very fruitful.