I’m sure you have all heard about these terms. When It comes to web design, these are big decisions we have to make when starting to build the site. Wether we are creating a website that is responsive or liquid. They look similar at first but they are essentially different.
So, what’s the difference?
To begin with I will explain what each one 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 articulated in percentages and the biggest div takes over 100% of the screen.
This works just fine in most computers and laptops, but when if we are lucky enough to enjoy content in big screens, we start white margins in the borders. This happens because even tough the image will automatically try to take over 100% of the screen, they were set for smaller displays. The same happens when we see content in small screens like the ones on our 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 is unimportant, since it does’t alter our content, but if we thought of a more horizontal design then this changes 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 seeing The following image showcases the suggested measurements for the different devices:
This is ok if it’sa simple site, a regular landing page for example. But it’s going to b a hustle if it is a big one, eince we would need 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 tiny, each element will get re organized vertically in the smallest devices. 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 used vertically or horizontally, the resolution of the screen ( in terms of pixels), the colors and a few other parameters.
So instead of working just percentages you will divide up the screen in columns, if you want it to be even better, you 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.
As you can see, it adapts to any device!
I hope this blog was helpful and enjoyable! See you next time 🙂
Comments are closed.