Liquid or fluid design vs Responsive design?

What’s the big difference?


I’m sure we have all heard at some point these terms, when It comes to web design these are big decisions we have to make when starting to build the site. Wheatear we are creating a website that is responsive or liquid. They look similar at first but they are essentially different.


To begin with I will explain what each on e of them is.

A liquid design or fluid layout is basically a design meant to take over 100% of the screen, horizontally, no matter the size of it (as long as it’s a computer screen). This happens because the design was done in percentages and the biggest div takes over 100% of the screen. This works just fine in most computers and laptops, but when we are lucky to have bigger ones or we are using full HD TV screens that are a lot bigger, we begin to get white margins. Because even tough the image will try t take over the 100% of the screen they are most likely to be small for those settings. The same issues go for when we begin to use smaller screens like the ones on tablets and smartphones.

In these cases we are most likely going to see a scroll bar on the side and the images will be redistributed vertically. In some cases this might be fine, but if we thought of a more horizontal design then this issues will change it all.

However it is not all lost, you can set min and max width lengths so that it will work on different devices, however that means that the designer has to create several versions of the layout depending on the platform that they will be seen. The following image showcases the suggested measurements for the different devices.


This  is fine if its a simple site but if it is a big one its going to be a hustle to design all the different versions.

Now a responsive design is thought out in a different way, remember how I said that the liquid one was planned in percentages? well this one is thought out in columns of 960px (most of the times). In a responsive design instead of the website being all crumpled  and getting g tiny  each element will get re organized vertically   in the smallest device. They will re arrange based on the hierarchy of the elements.

On a responsive design  there are lots of characteristics taken into consideration not only the size in percentage but also, the proportions, the aspect ratio, the proportion between the height and width. It will consider weather the device is use vertically or horizontally, the resolution of the screen ( in terms of pixels), the colors and a few more parameters.

So instead of working just percentages you will divide up the screen in columns, if you want it to be even better to can give those columns the sizes in percentages, this will guarantee you a better fit for all the devices.

The best part of  a responsive design is that you only need to have one version of your page, with just on e HTML and CSS you will be able to see it in all the devices that you wish. Therefore the maintenance of it is easier and it will be cheaper than having the designer create multiple versions.

When it comes to making your site popular and top listed on google search ( SEO) it will be a lot more effective because you will only have one URL to work with.

Here is a little sketch to show you how the responsive design behaves  in different devices.





I hope this blog was helpful and enjoyable! thanks for reading.

Related posts

2 thoughts on “Liquid or fluid design vs Responsive design?

  1. I гeally likе it whenever people come togetheг and share thߋughts.

    Great bloɡ, continue the good work!

Leave a Comment