Elastic, Liquid, Pixel: Explained.

In ‘modern’ web design (as in, the last five years versus the five years before) there are three main ways to define your design.

Also called ‘fixed’, the first and most used method uses pixel measurements to define the width (& height) of elements on a page. The most obvious advantage to this method – and the reason it’s the easiest to get your head around – is that you get pixel perfect results with it. Photos and other fixed elements on your page will always fit, another huge advantage. That’s also its downfall however, as it doesn’t increase in size as text scales, making the defining of a good line-length quite difficult.

Which brings us to the next, most recent, method dubbed ‘elastic’. The crux of this method revolves around using ’em’ to define (mainly) widths instead of ‘px’. You’ve already guessed of course that ‘px’ stands of pixel – but how is ’em’ exactly defined? Well, an ’em’ is the width a normal ‘m’ takes up on the screen. This method has the advantage of scaling along with the text. That means your line-length will always be exactly as you defined it, but, if an included picture were to take up more width than the current line-length, it’d stick out.

Liquid has been going in and out of fashion for a couple of years now. It uses percentages (defined with ‘%’ in one’s code of course) to define the width of elements. I think it was created with the intention of not squandering precious screen real estate, and while it does maximise the use of the screen, it has several flaws. Given that screen sizes can vary a great deal, a designer can never be certain the line-length is anywhere near correct and whether or not photos actually fit (pushing themselves off the screen, or worse, pushing the design off the screen!).

In my next article (not necessarily the next post!) I’ll talk more about handling the downsides of the methods and how a mix of them is often the most effective (and laden with browser flow errors – yikes!).