Responsive design vs adaptive design

Question

Would you explain difference between RWD (Responsive Web Design) and AWD (Adaptive Web Design) in a simple way?

Answer 1

Adaptive (AWD): Not necessarily set on a fluid grid; targets specific device resolutions (320, 768, 1024, et.al.); can have set widths (fixed) or relative widths (%), controlled by media queries.

Responsive (RWD): Built on a fluid grid; will change with the browser, no matter what the screen resolution; content can break apart and realign if need be.

In short: RWD is like AWD, except taken a step or two further, in order to future proof design for unknown devices as well as known devices.

Answer 2

Fluid Lay­out

Adjusts in a word-wrap fash­ion as screen width is increased or reduced.

Adaptive Layout

There are pre­de­fined sizes were dif­fer­ent lay­outs are trig­gered. These are called breakpoints. Adaptive layout can be either fluid or completely static!

Responsive Layout

Combination of Fluid and Adaptive Layout. Provides optimal experience.

Progressive Enhancement

Process of honoring your content (and your users) by applying technologies in an intelligent way, layer-upon-layer. Progressive enhancement doesn’t require that you provide the same experience in different browsers.

Source: http://bloggingexperiment.com/archives/responsive-web-design-rwd-vs-adaptive-web-design-awd.php

Answer 3

From my blog post on the topic:

“Responsive web design,” as coined by Ethan Marcotte, means “fluid grids, fluid images/media & media queries.” “Adaptive web design,” as I use it, is about creating interfaces that adapt to the user’s capabilities (in terms of both form and function). To me, “adaptive web design” is just another term for “progressive enhancement” of which responsive web design can (an often should) be an integral part, but is a more holistic approach to web design in that it also takes into account varying levels of markup, CSS, JavaScript and assistive technology support.

For the record, I do think it’s important to draw a distinction between “adaptive web design” and “adaptive layouts” because “adaptive layouts” implies only the use of media queries, which may not be done in a progressively enhanced way. Adaptive layouts achieved in a mobile-first manner, however, are very likely progressive enhancement and, thereby, a means of “adaptive web design.”

Answer 4

An alternate definition that I've seen breaks it down by where the magic happens:

• Responsive -- client-side -- the same page is returned to all devices, but the display of the page responds to the devices, typically using JavaScript and CSS (especially media queries).
• Adaptive -- server-side -- information is passed to the server regarding the device's specs, and a page adapted to that device is returned. This would use some of the same JavaScript/CSS techniques as RWD, but some of the content may be different / smaller.

Source: http://www.huffingtonpost.com/garrett-goodman/adaptive-design_b_2344569.html

Not sure how this definition fits together with some of the others that talk more about the flow of the page content.

Answer 5

The difference between adaptive web design and responsive web design is wider and more important than distinctions that have been suggested in this thread. The difference is neither a mater of where software functionality resides nor what unit of measurement is used in CSS conditions.

Neither term (adaptive or responsive) is a brand, so we should not deviate from the basic definitions of the words. In computer science, a response is an action, event, or message generated upon some stimulus. This definition originated from biology. The dilation of pupils in response to light is a responsive design.

Adaptation is denotes much higher functionality than simply a programmed response. The ABILITY TO DEVELOP pupils that can dilate is an adaptive design. Adaptation requires the storage of history and its later application. In biology, the adaptation requires DNA to store adaptations. In web design, adaptations could be stored in cookies or the user's account profile on the server.

Let's start with the simpler of the two. A good formal definition of a responsive web design is this:

A responsive web design examines display characteristics and instantaneously respond in the display of pages in ways that go beyond the built in automatic layout capabilities of HTML to provide a convenient, functional, and maximally visible experience across varied display conditions.

Portable devices have raised the importance of this additional size responsiveness. Many such design techniques center around the addition of conditions to the CSS (cascading style sheet or sheets) or via scripting (such as JavaScript). Each condition based on display characteristics improves the overall user experience by controlling the values of specific style parameters for a set of document elements (tags), identified by CSS selectors.*

Using either the dictionary definition or the common computer science definition of ADAPTIVE, the document layout of an adaptive web design must vary intelligently based on some higher criteria than a simple static size threshold, criteria that are evaluated continuously. A good definition of an adaptive web design is this:

An adaptive web design records the patterns of usage and conditions of use and adapts, over time, to more quickly, comprehensively, or individualistically provide users with content and functionality.

Some of the other uses of the term ADAPTIVE in regard to web design gives too much credit to what is merely another responsive design methodology, no smarter or more adaptive than any other.

Simple adaptive schemes can be programmed into JavaScript to vary CSS based on JSON data returned from RestFUL calls to the server to acquire user scroll and click stats from a database via SQL or NOSQL. More advanced user experience analytics might use a rules based system (such as DRules or Prolog) or fuzzy logic, neural net, or Bayesian schemes that run asynchronously.

An example of a simple rule is, "Sort the links in order from the most frequently to the least frequently clicked and every 10 displays put a less popular link in second place to ensure elements can trickle up over time."

Trivial feedback forms are common feedback mechanisms.

Answer 6

One of the best link to differentiate between fluid, fixed, responsive and adaptive layout. http://teamtreehouse.com/library/build-a-responsive-website/introduction-to-responsive-web-design/fixed-fluid-adaptive-and-responsive-2. In simple words for the styles applied in your html page,

1. Fixed layout : Using pixels.
2. Fluid layout : Using percentage.
3. Responsive layout : Using only percentages with media queries
4. Adaptive layout : Using both pixels and percentages with media queries

Answer 7

simply:

RWD (Responsive): is a different structure and design of the website that targets a certain device. (mainly we are talking about a server side work because we are talking about different structure and different functionality)

AWD (Adaptive): is different design with the same structure that targets a certain device. (mainly we are talking about a client side work because we are talking about different design only)

note that the both technics aim to create a different user experience more friendly for a certain device

Answer 8

In Sense Of website design: Responsive Design: Web Page create with Fluid grid and Flexible content (E.g. images) and media query( in css). This will adapt the layout according to the browsers/device width. In Adaptive Design: Web Page create with Fixed layout means neither fluid grid nor flexible contents. Break page layout with specific points(E.g. using media query).