#liquid layouts

(Following my last article about when/why we should use px or % to define the website layout).

After some time spent researching I've came across some interesting findings:

Fixed layouts (layouts that are fixed and don't re-size to fit the available window width):

This seems to be the most popular.

Pros: Once we have choose the width (usually the most popular e.g. 940px, 960px etc.) we won't be needing to test it on different screen widths. The structure and the aesthetics will be preserved.

Cons: Some users with small screens (mobile devices) may need to scroll horizontally to view the site if the fixed width is larger. Unless we provide a mobile edition, as well, that users can have access.

Liquid layouts (layouts that horizontally re-size to fit the width of a window):

Pros: the content adapts in order to use entirely the Window width. Which means that we don't have to choose between the most popular fixed width. Liquid layouts are useful for small screen (mobile devices) which vary slightly. We have to do less work on adapting it to all possible screen sizes.

Cons: If the site re-sizes to fit horizontally, we end-up not having control on the layout as much as if it was fixed. The structure and aesthetics of the site won't be under control. This means that at the end, probably you will end-up having to do more work to support all screen widths as we considered scenarios where the screen is really small and the menu navigation is all clustered and ugly or too far apart on a large screen.

It seems that both are a valid option. But, the issue remains:

Browsing on our mobile device is increasing heavily and for me it makes sense to create a solution that is shown properly on a mobile device. This is when a website might require CSS media queries. 

My next article will be entirely dedicated to CSS media queries.

Cheers,