I am going to explain here about the difference between Fluid/liquid layout and Responsive design layout.
| Fluid | Responsive |
|---|---|
| Fluid Layout is grid built with percentage. | Responsive layout is the combination of Fluid layout + Media Queries |
| all the values used are calculated that corresponds to the viewport size. | when resizing, the number of columns changes according to the available space |
Additionaly please check the below animation to find the difference between Reponsive and Adoptive design
There are an increasing number of websites that are becoming responsive.
- Fluid, also known as liquid, is just like it sounds.
- a layout that grows and shrinks to fit the “container” – in this case, the screen size.
- This type of website takes less time to design and program since the layout does not actually change.
- The content simply resizes proportionally to the screen size.
- But what looks good on large screens may not look good on smaller ones.Images, text, and a sidebar may end up getting squished to fit onto a mobile screen.
- Not only changes size, but if necessary, re-organizes the layout/content to better suit a viewer’s screen.
- Imagine taking the content from a newspaper and having to fit it into a magazine and a pamphlet. If you did this with fluid design, you would end up with the same columns getting narrower as the paper got smaller
- Responsive website will remove elements, like a sidebar with less pertinent info, to give more room to the main content area.
- Responsive design requires developing more layouts (desktop, tablet and mobile) for a single website so that the user experience can be optimized for different screen sizes.
A combination of both these design tactics is the way to go. By using fluid design in combination with responsive design tactics, you can support an infinite number of screen widths.
| Responsive | Responsive & Fluid |
|---|---|
 |
 |