[thelist] front end design: liquid design

Gunlaug Sørtun gunlaugs at c2i.net
Mon Oct 20 01:10:37 CDT 2008

Erika wrote:

> Of those who do, what are your feelings these days about liquid 
> designs?

Liquid as in fluid ? :-)
(Those terms and how people use them are somewhat confusing.)

> like/dislike ?  and why.

In general I prefer fluid or semi-fluid over px/em-fixed.
Filling various viewports is good, IMO, but it depends on _how_ it is
filled (and of course what it is filled with).

Fluid designs with unrestricted line-lengths: generally not so good.
Example: Reading Wikipedia on wide viewports (1600 - 2400 wide) is hard,
but of course easy to remedy.

Wide px-fixed designs are not my favorites, but they're acceptable as
long as I can read one column/area on narrow viewports (600) without
having to scroll horizontally, and blow up font-size a bit without
losing content over the edges.

I generally dislike em-fixed (also known as "elastic") designs the most
because they tend to become wider than those narrow viewports pretty
quickly when subjected to font-resizing in any form. Often requiring
horizontal scrolling to read one column/area.
Annoying, and often completely unusable, IMO.


If one mixes px, em, percentages, min-width and max-width well, designs
can turn out quite well no matter what they're called. Like many others
I often mix this way - designing semi-fluid, somewhat along these lines:

1: total width never wider than the viewport, at least not on viewports
from 600 upwards.

2: not too wide. 1280 is normally wide enough for me, although letting a
design go wider, maybe em-size it while restricting it to viewport
width, can work well in most cases.

3: restricted line-length - max-width. Restricting line-length in em or
px can work equally well, as long as point 1 and 2 overrules line-length.

4: fluidity normally means one has to control/restrict image-width one
way or another, which doesn't always work too well in all browsers. We
need better image-handling in browsers.


More information about the thelist mailing list