Responsive Design
Image Courtsy : TNW

From past 5 years we are listening conversations on Web Design; and one word grows up Responsive Web Design. Now everyone is designing their site outline with a responsive frame work.

But some of the discussion switches to Adaptive Web Design. Google and Apple really helped in this concept that we must think about while designing for a smart user.

What is Adaptive UI

Adaptive Web Design or AWD is like responsive design. Adaptive is based on to develop a better user experience on different devices.

Adaptive UI
Photo credit: Lufthansa

While Responsive Web Design or RWD is one design that has slight variations from device to device i.e. Look N Feel. The AWD magic is, the website is served to the user on the basis of device and device specific features. In this website is custom made for user’s machine.

In AWD you cannot actually see everything. The best interfaces are where the user does not feel the presence of designer.

Adaptive v/s Responsive Web Design

The basic thought behind the AWD and RWD are similar, but they are not the same thing.  This is the game of HTML and CSS & way to serving of information to user.

Adaptive vs Responsive
Photo Credit : Engineers Without Borders

Responsive Design is Client side; it means complete web page is delivered to the machine browser (Client) and the browser changes the appearance of the page according to attributes of web browser.

Adaptive Design is Server Side, before delivering web page, the server (where the site is hosted) detects the aspects of machine and loads a version of web page that is specially designed for its dimensions and basic features.

Adaptive and Responsive
Photo credit: unifi

There are much other dissimilarity between Adaptive Web Design and Responsive Web Design as well. How much information is visible on the user end is different, Adaptive websites are faster to load. Adaptive Designs uses multiple templates for a single website where as Responsive Design uses a flexible framework with a single template.

Pros of Adaptive Web Design

Benefits fo Adaptive Design
Photo credit: Spire
  • Better Performance: The way of serving web pages are faster and more efficient at user/client end.
  • More Flexibility: You can make changes to a particular code without affecting entire site. Like if a command button is not working fine for android users, you can make that adjustment without breaking that works for iOS user.
  • Developed Strategy: In AWD website is specially designed for different devices, You can develop more functionality. How to attract users? It is almost a personalized and excellent experience for every user.

Adaptive Design Ideas

Design Thinking with Adaptive
Photo credit: Google Ideas

Switching your website designing from responsive to adaptive demands thinking about process of designing. You are actually building multiple versions of webpages/website.

While the method of designing is unique to designers. Google’s Material Design documentation is really good for views about adaptive process and how to create a website in this manner.

Google Material Design
Photo credit: Google Material Design
  1. Breakpoints: Web page layouts are better in 480, 600, 840, 960, 1,280, 1,440 and 1,600 pixels. Knowing these widths allows you to quickly prototype for various devices, using tools such as UXPin.
  2. Grid: A 12-column framework is preferred with consistent margin and gutter widths that align to a baseline grid. Grids can be full-width or centered.
  3. Surface behaviors: The UI should adapt based on screen size in specific ways – visibility, width and descriptions – and Google offers details for each of these adaptations.
  4. Patterns: User action behaviors and patterns – reveal, transform, divide, reflow and expand – are based on screen size. To see today’s most popular and effective mobile patterns,

It includes set of templates for different devices i.e. 3 minimum templates need – Desktop, Mobile and Tablet. You must have set of protocols for how to use break points and grids. At final step you need to know many changes are acceptable between device designing.

Is Adaptive Design Good to Use

You can never get this answer like this. It all depends on the project need and audience that you serve.

You can use adaptive design if:

  • Must need of device specific experience
  • You can develop unique experiences for each of those machines.
  • You are good to maintain and handle adaptive templates and resources.
  • Your users are engaged with website on lots of different devices. (If less than 70% traffic is generating through a single device than adaptive UI is waste of time)

It is not compulsory that if you are not using adaptive designs than your website performs low. Always develop a common, user friendly experience that users want to be a part of it.