Difference Between Responsive Web Design and Adaptive Web Design
The above blog well describing the difference between responsive and adaptive web design factors.
I disagree. Who says that the term "responsive" limited to client-side techniques? I think that the distinction responsive/adaptive is spurious and does not reflect actual usage of the term.
Responsive Web Design aims to provide optimal viewing experience, that is reading and navigation with minimum of resizing and scrolling, by the use of fluid, proportion-based grids, flexible images and CSS3 media queries. Each responsive web page resizes and rescales its layout and navigation structure according to the screen size of the clients viewing device. Here all the changes for new display are made in the client side.
But in Adaptive Web Design these changes are made in the server side to respond and adapt to different screen sizes.
"Distinct templates are optimizing for each device." that's for Adaptive Web Design, with so many devices that are out there one would end up with a boat load of "Distinct Templates". In my opinion it would be better off not worrying about a particular device, besides there's a reason people call cellphones "Smart".
Says who??? What purpose does inventing different terms serve??? Responsive design is responsive design, irrespective of how it is implemented. Lets get our heads out of our a...s!
Originally Posted by florasmith
yeah its true that responsive sites are automatically adjust according to the screen size but the adoptive are based on the server side..
Adaptive design is when distinct templates are optimizing for each device where as responsive design are optimizing for all screen sizes.
Who today (apart perhaps from maintaining legacy sites) uses templates for each device???
Originally Posted by mehrishaly
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. 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, and 960 for desktop browsers.
Have you not heard of media-specific style sheets? E.g.
Originally Posted by anirban09P
This example uses:
<link rel="stylesheet" href="style.css" title="styles" type="text/css">
<link rel="stylesheet" media="screen and (min-width:480px) and (max-width:799px)" href="mobile.css" title="styles" type="text/css">
<link rel="stylesheet" media="screen and (max-width:479px)" href="handheld.css" title="styles" type="text/css">
<link rel="stylesheet" media="handheld" href="handheld.css" title="styles" type="text/css">
a) A default style sheet for all devices, (including browsers that do not understand media-specifics e.g. IE8 and below).
b) An intermediate style sheet for mobiles with 480px to 799px displays.
c) A minimalist style sheet for handhelds and mobiles with screen widths 479px and below.
I.e. Good responsive design uses breakpoints, not just fluid layouts, because they accommodate a wide range of display sizes with minimal shuffling about of the content (which can look naff).
Last edited by jedaisoul; 04-18-2014 at 04:16 AM.
I'm listing 5 main differences here:
1. The very first difference between Adaptive Web Design and Responsive Web Design is that the former one will thoroughly change to fit the screen and device dimensions whereas the latter one will fluidly change and respond to fit a set of devices and screen sizes.
4. Adaptive web designs are implemented on a pre-existing site whereas in case of a responsive web design, you need to rebuild the site from scratch.
5. Websites designed using AWD have images that are optimized for specific device screen resolutions whereas the ones designed using RWD contain images that are first downloaded and then re-sized to fit the respective device.
Convert PSD to Responsive web design is fluid, with the help of CSS3 media queries to respond to any screen sizes. where as Adaptive web design is using a series of static layouts and it completely based on breakpoints.
MOD: replying to a 2-1/2 year old thread so that you can post a link to a blog article is a good way to get banned.
Nice question! I will try to add some key statements about the difference of each design:
Responsive websites are a good idea if:
- You are limited in time and financial resources.
- You have a simple clean design and functionality without the necessity to adopt it to various needs.
- You aim to increase the speed and ease of maintenance and the update process of your website.
Adaptive websites will be a great choice if:
- You are absolutely sure that you need an audience with a wide spectrum of devices.
- You have both time and financial resources to create and maintain several variants of your product.
More information you can read here - link deleted by moderator - After reading this article you will have a much better understanding of the topic.
Last edited by NogDog; 10-05-2016 at 09:23 AM.
Reason: remove link
Just a footnote:
The adaptive/responsive debate is over. Adaptive lost. Why? Because responsive can do what adaptive seeks to do (support a range of specific screen sizes) whilst also responding to in-between sizes. Adaptive cannot.
Indeed the whole debate seems to have been based on a misconception: mistaking fluid design for responsive. Responsive designs are usually (but not exclusively) fluid, with the addition of media queries to provide break points. However, it is also possible to base a responsive design on a series of fixed designs with break points (for display on medium to large screen devices whether PC or mobile) plus a fluid design for small-screen mobile devices (where it is more important to utilize all the limited screen acreage).
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Tags for this Thread