Responsive vs Adaptive Design for UI

by Zymr

Share It

Adaptive responsive design


When designing and developing a website, it is essential for companies and user interface designers to think about how users are going to access their website. Would the site be accessed from desktops, tablets, smartphones or multiple devices?

What is the best way to achieve this state of cross-device, cross-browser, cross-platform compatibility? Two of the hottest methods for implementing multi-screen websites are responsive web design (RWD) and adaptive web design (AWD). RWD and AWD attempt to optimize the best user experience on a single website when viewed on various devices. It is important to consider them as options for web application development. Now, let us take a look at both of them in detail.

responsive vs adaptive

Responsive Web Design (RWD)

Responsive design or websites are based on the principle of flexibility. It has a flexible, fluid grid that uses CSS3 media queries to respond to any screen sizes. Responsive web allows dynamic resizing of layout, images, and text, within a browser, so that the content can be optimized for viewing at variable screen dimensions.


  1. Fluid grids

  2. CSS3

  3. Media queries (The @media rule)

Responsive Web Design

Adaptive Web Design (AWD)

The components of adaptive design are similar to those of progressive enhancement. Adaptive design detects the device and then provides the appropriate feature and layout based on a predefined set of viewport sizes and other characteristics.

Core Approaches:

  1. Page content or content layer: HTML

  2. Presentation or layer: CSS and styling

  3. Client side scripting core or layer: JavaScript

screen sizes

[See Also: 4 Steps for Assessing Mobile App Development Strategy]

Comparisons and Distinctions

Both adaptive and responsive design prepare your website for mobile use. Both allow websites to be viewed on handheld devices and various screen sizes, eventually providing visitors with a better mobile user experience. Where the two procedures differ is in their delivery of the structures, with responsive design relying on flexible grids and adaptive design relying on predefined screen sizes.

In RWD, regardless of the device used, only a single template is delivered across all devices. All page elements are downloaded and then auto-resized to fit the screen. On contrary, AWD uses separate templates, dependent upon device, and only the page elements required for a particular screen layout are downloaded.

RWD is the client-side meaning the layout decision is made on a user’s browser. The page is sent to the device browser and the browser then modifies the appearance of the page, with respect to the size of the browser window.

AWD is the server-side where layout decisions are made on the web server. The page uses this information to deliver different sets of HTML, CSS and JavaScript code, based on the characteristics of the device that have been detected.

Pros of RWD

  • No need to maintain different code bases; one for desktop and another for mobile .

  • Perform well irrespective of the screen size. Images and content including text can adjust given any browser.

  • no need to establish server-side redirects to guide desktop and mobile users to view the appropriate site.

Cons of RWD

  • It increased page load time as all elements are downloaded, whether used or not.

  • Incompatible with older devices/browsers

Pros of AWD

  • Page load time increase because only necessary elements are downloaded.

  • UX Design can be tailored to the device it is viewed upon.

  • Easy to renders on older devices and browsers.

Cons of RWD

  • Expensive and resource intensive.

  • Time consuming as it requires identifying the type of display and then code appropriately for viewing on a certain device type.

  • Complex, it requires advanced understanding of JavaScript and CSS.

[See Also: IBM Design Language for Product Design and Development]

In the debate over RWD vs. AWD, it is incorrect to assume that one is better than the other. Each method has its own set of benefits and short-comings, and both approaches provide different solutions for different problems. At the end of the day, it is all about user satisfaction, and providing the best user experience for respective devices is a great practice.

Everything you need to know about outsourcing technology development
Access a special Introduction Package with everything you want to know about outsourcing your technology development. How should you evaluate a partner? What components of your solution that are suitable to be handed off to a partner? These answers and more below.

Introduction Package

Leave a comment

Your email address will not be published.

Let's continue the conversation!

    Please prove you are human by selecting the Car.