So what is the difference between the two web design styles?
Responsive Web Design
responsive is fluid and adapts to the size of the screen no matter what the target device. Responsive uses CSS media queries to change styles based on the target device.
Here’s an example of what it looks like in CSS:
@media (query) {
/* CSS Rules used when query matches */
}
The pro’s of this design style are:
- Can effectively show information on many resolutions.
- are most effective for the massive amount of people who use mobile more than P.C
- Only have to code for one. “one resolution fits all”
The con’s for this design style are:
- extra css for some details that are at risk of causing trouble in different resolutions are required.
- Isn’t as well suited to each resolution as a fixed layout might be
The main difference between the two is how Adaptive design uses static layouts that are fixed to a certain resolution.
the pro’s for this design style are:
- they are less likely to resize or minimize or break up information the way responsive does.
- they require no extra css
The con’s for this design style are:
- They require you to code for each resolution size
- They will look small or big depending on if the viewer is using a resolution that isn’t suited for by the code.
- takes much more time to do effectively.
The way I see it, responsive web design is the best way to go for most projects. But some projects that are only available on some resolutions (for example apps are only on tablets and mobile) then an adaptive web design could be more effective.
It is all up to your preference though, they both get the job done quite nicely.
references:
https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=en
http://blog.uxpin.com/6439/responsive-vs-adaptive-design-whats-best-choice-designers/