Terms such as ‘liquid’ and ‘fluid’ may be common amongst web designers, but they’re needlessly confusing for learners.
The other day, Jeremy Keith wrote a post titled ‘Zoomfusion’, discussing confusion surrounding how various page layouts react to browsers’ zoom features. My response stated, briefly, that I think this is a problem of terminology. I always seem to do a mental double-take when I hear the term ‘liquid layout’, as I try to recall exactly what that means. For those new to the profession, this must be a nightmare.
I stated in my answer that I think Jeremy can probably come up with better terminology himself, especially given that he came up with the excellent ‘crawlbar’. However, I thought I’d have a go myself too; it only seems fair.
This is the one term I actually think is good enough already. It pretty much says it all, unambiguously, and we all know what it means. Even someone with no knowledge of web design whatsoever might be able to have a pretty good guess as to its meaning. I vote we leave this one alone.
This term is used to describe a layout whose width is relative to the viewport’s. Let’s call it ‘relative-width’.
Finally, a term describing a layout whose width varies according to text size. It scales appropriately as text is sized up or down, so let’s call this one ‘scalable-width’.
Yes, those last two are contentious. Yes, the latter refers to a layout that is still relative, albeit to font size rather than width. However, I consider the term ‘relative’ to be far more relevant to replace the ‘liquid’ term because:
So, we now have ‘fixed layout’, ‘relative layout’, and ‘scalable layout’. Note that the ‘width’ part of this really can be dropped since we’re always talking about width. That does depend on context, of course; it’s probably wise to make it explicit to learners that we’re dealing with width. But all of those is dependent on context anyway.
I also recognise that these terms aren’t quite as attractive or original as their existing equivalents. This is a shame but, for the purposes of clear language, pretty much unavoidable. I’m certainly not suggesting elimination of the current terms; they do still have their place!
In my specific case, I’ll be adapting some tutorials here to use this simpler terminology. I’ll still talk about ‘liquid’ and ‘elastic’ from time-to-time, but I think these easier-to-understand terms will make good equivalents for learning material.