Hey my Gentlemans! Today I come to bring you this concept of fluid design that will make your life easier when it comes to responsive design, let's get started!

It is no secret that for modern web applications it is very important that they adapt to any screen and any resolution, this allows us to display our web content in an elegant, professional and friendly way for the end user regardless of the device they use, but as more and more screens come out it can become hell for us developers!

Responsive design vs Fluid design

Wait a minute! Aren't they the same thing?

The short answer is NO and the long answer is that it depends from your own perspective.

Below you will see why I am telling you this.

Responsive design 🤔

Responsive design is mainly based on the use of media queries, this way we can detect different devices, sizes and much more. But this has a problem and that is that the css code becomes not very scalable, it repeats a lot and makes your css files have a bigger size.

Example:

Here we have a Title with a h1 tag and a fixed size of 32px and a couple of media querys to make it responsive according to the device size we want to detect.

	h1 { font-size: 32px }

	@media screen and (max-width: 800px){
		h1 { font-size: 20px }
	}

	@media screen and (max-width: 400px){
		h1 { font-size: 14px }
	}

<h1>Responsive Design</h1>

Here maybe you will say how exaggerated is the Joer! but the truth is that think about it for a couple of seconds carefully, with an example as simple as this we had to repeat the same rule 3 times, which makes me shudder just thinking about the styles of an entire website, how many styles we would have to repeat for each device! It is also possible that you say "Ahh but if we use relative units such as rem / em and viewports (vw, vh, vmin and vmax) we would solve this problem" and the truth is that YES but at the same time NO. I explain the reason: