Client-Side Adaptive Web Design

Adaptive design builds on the principles of responsive Web 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.

There are two approaches to adaptive Web Design — one where the adaptations occur on the client side, in the user’s browser, and another where the web server does the heavy lifting of detecting various devices and loading the correct template. Examples of client-side adaptive sites include Threadless and Ideeli. One of the strengths of the adaptive templating approach is the ability to reuse one set of HTML and JavaScript across devices, simplifying change management and testing.

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. For example, for many of Mobify’s online fashion retail clients, 95% of their mobile traffic comes from iPhones. Client-side adaptive means they can optimize specifically for Apple Smartphone.

Unlike responsive Web 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 Web Design 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.

Server-Side Adaptive

We can achieve the server-side adaptive approach in a variety of ways, through server-side plug-in and custom user agent detection. Website Design Sites that use server-side adaptive include Etsy, One Kings Lane and OnlineShoes.com.

Why choose server-side adaptive? It typically offers distinct templates for each device, enabling more customization, and it keeps device-detection logic on the server, enabling smaller mobile pages that load faster. Additionally, there are numerous server-side plug-ins available for common CMS and e-commerce systems such as Magento.

Why choose server-side adaptive? It typically offers distinct templates for each device, enabling more customization, and it keeps device-detection logic on the server, enabling smaller mobile pages that load faster. Additionally, there are numerous server-side plug-ins available for common CMS and e-commerce systems such as Magento.

Of course, many companies are still wrestling with the basics of responsive, and they’re not ready to confront the more sophisticated flavors of adaptive. Increasingly, competition and mobile traffic, however, will drive more and more organizations to kick the tires on all three approaches, and pick the one that works best for their users.

Tag:

Web Design Sydney, Web Development Sydney

Designpluz is a boutique creative agency in Sydney. We are specialised in Web Design,Branding, SEO Services, Logo Design, E-Commerce, Graphic Design and much more.