Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I've gone through with many articles to understand exact difference between Responsive and Fluid web design. But couldn't make my understanding differentiate between these two.

Can anyone help me to understand it with my following questions (please pardon me if the same are too silly to ask)!

  • Does responsive mean, developing a website 'only' for three view-ports i.e. smartphone (320*480 including orientation), tablets (768*1024 including orientation) and desktop (980/960 width). So if there comes any other in-between resolution for eg. from 480 to 768, it is not compulsory for website to have the same perfect look as it would have in three main view-ports resolution?

or in other words, if my client asks me to create a responsive website he is meaning to create a website for three view-ports only i.e. smartphone, tablet and desktop? He doesn't mean any other resolution apart these three?

  • While in fluid, the website looks perfect on any resolution i.e. from 320 till 1900?

[when I see responsive web samples online and resize my browser width, then their content/layout appears perfect on any width. I don't see any extra space appearing around a content due to shift of other content in next row. How it happens then?]

  • Another question is, does one use media-queries only while doing responsive web design, and the same don't need to make fluid web design?
share|improve this question
2  
With regard to the question of "if my client asks me to create a responsive website he is meaning to create a website for three view-ports only i.e. smartphone, tablet and desktop?", I would put that question to your client. Buzzwords aside, you need to know what they are expecting. –  Matt Obee Aug 29 '13 at 14:06
add comment

3 Answers

The answer you are looking for is the difference between responsive and adaptive web design. Simply said, responsive is where you can resize your browser window and the website/app resizes with it. Adaptive is exactly as you said: designed for a couple of viewports, so maybe for an iPhone, a tablet, and 15" computer screen.

However, adaptive might not be the best way because phones and tablets come in so many different (screen-)sizes nowadays. A responsive site can behave a littlebit like an adaptive site though: so when you resize the window, you can see it "snaps" to certain cut-off points.

http://www.techrepublic.com/blog/web-designer/what-is-the-difference-between-responsive-vs-adaptive-web-design/

http://www.pbs.org/idealab/2013/06/responsive-vs-adaptive-mobile-strategies-of-top-news-sites

share|improve this answer
1  
A great example of toolkit that enables responsive design right here -> purecss.io. Resize that window. Delicious! –  Gusdor Aug 29 '13 at 12:35
    
@Liang, your comment "A responsive site can behave a littlebit like........to certain cut-off points." helps me to understand that responsive websites could have their content-adjusting with some shift (or jerk). Which usually happens due to change in width or on disappearing of a particular element on a defined view-port size. –  Rav Aug 29 '13 at 16:32
    
(continued)...Apart this responsive website resizes smoothly to any width, resolution or viewport. Can you please make me understand that how can I distinguish between responsive and fluid as a designer? Is there any way by looking in their structures (design or html)? –  Rav Aug 29 '13 at 16:51
    
I'm not sure what you're asking/looking for. The answers that Joshua Barron and DA01 give explain the difference between RWD and Fluid. Put simply: fluid is part of RWD where things resize, but no real layout changes happen. This doesn't mean that your layout needs to change drastically at each breakpoint. It all depends on the design of your site. –  Liang Aug 29 '13 at 17:54
add comment

Responsive Web Design is a term coined by Ethan Marcotte to describe techniques that use CSS media queries, a fluid grid, and other techniques to adapt a web page to various screen resolutions (usually based on width breakpoints). Typically there will be 3-4 breakpoints as you describe (mobile, tablet, desktop, extra large desktop) in a given design, but there is no requirement for this; responsive design simply means adapting to various screen sizes (you could have 10 breakpoints or 2 breakpoints, or your components could all adapt at independent resolutions).

A fluid design is a component of responsive web design. Typically to make RWD work you will need some kind of grid system based on percentages so that it stretches nicely at various resolutions. A fluid grid also enables you to do some trickery with stacking, etc., so that you can better adapt at various resolution breakpoints.

To get a feel for RWD, I recommend you check out popular frameworks such as Bootstrap or Zurb Foundation.

share|improve this answer
    
Yeah, fluid design is just that: the layout flows with whatever the screen size. RWD can use fluid components, but also any number of much smarter techniques like media queries and javascript to make the UI fit any screen without having to reload. –  Koen Lageveen Sep 9 '13 at 21:29
add comment

A fluid design has limits. You can't stretch a column of text, for instance, from 320px to 1120px an have it usable.

So, a fluid design is typically for a range--usually desktop screens, and typically consists of a columnar layout where the columns change widths to an extent.

To accommodate a greater range of screen sizes you can go the responsive route. Which in addition to a bit of stretching like Fluid layouts do, it will also re-arrange or even add/remove elements to accommodate the various screens.

It doesn't necessarily mean '3' view-ports. It can be 3. It can be 5. It can be 30 if you wanted too (though that's obviously impractical).

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.