Nowadays Desktop and Laptop users are becoming a minority. Web developers need to adjust their sites so that people can have access to it in their mobile devices as well as their tablets. In order to see a web site in different screen sizes developers are taking the One Web approach. The most used are Responsive Design and Client-Side Adaptive Design.
Whats the difference between these two approaches?
Responsive Web Design
Responsive design is the most common One Web approach. This approach uses CSS media queries to modify the presentation of a website based on the size of the device display.
A key advantage of this approach is that designers can use a single template for all devices, and just use CSS to determine how content is rendered on different screen sizes. Plus those designers can still work in HTML and CSS, technologies they’re already familiar with.
Additionally, there’s a growing number of responsive-friendly, open-source toolkits like Bootstrap or Foundation which help simplify the process of building responsive sites.
On the other hand, there are few shortcuts to a sound responsive design. To go responsive, organizations often have to undertake a complete site rebuild.
Client-Side Adaptive
Adaptive design builds on the principles of responsive design to deliver user experiences that are targeted at specific devices and contexts. It uses JavaScript to enrich websites with advanced functionality and customization. For example, adaptive websites deliver Retina-quality images only to Retina displays (such as the new iPad) while standard-definition displays receive lower-quality images.
A client-side adaptive approach means you don’t have to rebuild your site from the ground up. Instead you can build on existing content while still delivering a mobile-responsive layout. For expert developers, this approach also enables you to specifically target particular devices or screen resolutions.
Unlike responsive design, adaptive templates ensure that only the required resources are loaded by the client’s device. Because device and feature detection is shifted to the mobile device itself, CDN networks like Akamai and Edgecast can use most of their caching functionality without disrupting the user experience.
The client-side adaptive approach has a higher barrier to entry than responsive design. Developers need to have a solid grasp of JavaScript to use this technique. It also depends on a site’s existing templates as the foundation. Finally, because the client-side adaptations are a kind of layer on top of your existing code base, you need to maintain them as your site as a whole evolves.
Have you worked with any of these approaches? Tell us which one do you like the most! We want to know!
References: One Web Approach