Register now or log in to join your professional community.
I provide a little bit information so let’s share some of our knowledge about this feature: Responsive True responsive design is fluid, using CSS3 media queries to respond to any screen sizes. With the use of this CSS3 module, you can create a flexible grid where text can wrap and images can shrink to adjust along with your browser. For designers, this is similar to adjusting a text box in Photoshop and having the copy adjust to fill the height and width of the box. With responsive design, the use of media queries also opens up a range of options that allow for layouts (along with colors, images, fonts and text styles) to change based on screen size. Adaptive design uses a series of static layouts based on breakpoints. For example, you may design a webpage at three different sizes:320 for mobile phones,760 pixels for tablets, and960 for desktop browsers. Unlike responsive (where the design responds while you adjust a browser window), adaptive files don’t respond once they are loaded. It detects the device and calls up the properly sized layout to view. For a straight-forward visual example of how these both work. For whom has more information please provide it to us :)
Here is the simplest definition of Resposive and Adaptive designs.
Responsive Designs:
The distilled definition of a responsive web design is that it will fluidly change and respond to fit any screen or device size,” Boudreax writes. “The condensed definition of an adaptive design is that it will change to fit a predetermined set of screen and device sizes.”
Adaptive Designs
Whereas, AWD relies on predefined screen sizes, RWD relies on flexible and fluid grids.
So the responsive designs can be fit on any screen size, wether its a mobile device or large LCD. the responsive design will behave accordingly.
However, the adaptive designs are those which are defined with each size like when some one open a website in mobile phone the defined style for the particaular mobile size will be applied and turned the website to the mobile preview. So adaptive is limited and a bit complex than Responsive designs.
From my point the adaptive design is like mobile website concept based on the type of device we want to design number of sites, server is responsible for presentation. In responsive web design layout is changed based on the screen display in user mobile.
From data perspective , as lot of answers have been given from view perspevtive.
Responsive - same amount of data ( desktop or mobile ) lies in the browser , just represented differently.
Adaptive - selective data what is required for mobile should be given back to browser.
same like flexibility and non flexibility same as device dependent and device independent
Responsive - same code base, works on any screen.
Adaptive - deisgned specifically for each screens.
The phrase Responsive Web Design was coined several years ago by Ethan Marcotte and first introduced in his A List Apart article, "Responsive Web Design" and later, his book, A Book Apart - Responsive Web Design. Marcotte's key points of RWD are listed below. In my post on the subject, "How to get started with Responsive Web Design," I described how a responsive website design starts with the primary task of incorporating CSS3, media queries, the @media rule, and fluid grids that use percentages to create a flexible foundation. These key points, as well as the use of EMs, flexible images, flexible videos, and fluid type, allow the responsive website to adapt its layout to the viewing device, user agent, and environment.
The distilled definition of a responsive web design is that it will fluidly change and respond to fit any screen or device size.
The phrase Adaptive Web Design was coined by Aaron Gustafson, who wrote the book of the same title. It essentially utilizes many of the components of progressive enhancement (PE) as a way to define the set of design methods that focus on the user and not the browser. Using apredefined set of layout sizes based on device screen size along with CSS and JavaScript, the AWD approach adapts to the detected device. A recent post, "Understanding progressive enhancement techniques in web design" described the layers that make up the adaptive approach.
The three layers of Progressive Enhancement:
In a recent podcast interview, Aaron describes how the term was selected; he wanted to disambiguate his book from the Filament Group's book, "Designing with Progressive Enhancement". Aaron goes on to mention in the podcast:
"So, we were trying to think of, you know, what exactly does all of this stuff really mean, and it was about creating rich, adaptable experiences that tailor themselves to the particular device that you were working with. So, the way that I view progressive enhancement is very much analogous to adaptive web design. It's essentially the same concept."
The condensed definition of an adaptive design is that it will change to fit a predetermined set of screen and device sizes.
