15

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?
Improve this question
2
  • 3
    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, 2013 at 14:06
  • Regardless of what the client says, you still have to get them to specify what they mean. I wouldn't trust most clients to have the best understanding of the terminology or technicality to base the requirements on their definition of the term.
    – Michael Lai ♦
    Jul 17, 2014 at 2:49

3 Answers 3

Reset to default
12

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

Improve this answer
4
  • 1
    A great example of toolkit that enables responsive design right here -> purecss.io. Resize that window. Delicious!
    – Gusdor
    Aug 29, 2013 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, 2013 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, 2013 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, 2013 at 17:54
8

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.

Improve this answer
1
  • 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, 2013 at 21:29
1

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).

Improve this answer

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