In ‘mod­ern’ 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 meas­ure­ments to define the width (& height) of ele­ments on a page. The most obvi­ous advant­age to this method — and the reason it’s the easi­est to get your head around — is that you get pixel per­fect res­ults with it. Photos and other fixed ele­ments on your page will always fit, another huge advant­age. That’s also its down­fall how­ever, as it doesn’t increase in size as text scales, mak­ing the defin­ing 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 nor­mal ‘m’ takes up on the screen. This method has the advant­age of scal­ing along with the text. That means your line-length will always be exactly as you defined it, but, if an included pic­ture were to take up more width than the cur­rent line-length, it’d stick out.

Liquid has been going in and out of fash­ion for a couple of years now. It uses per­cent­ages (defined with ‘%’ in one’s code of course) to define the width of ele­ments. I think it was cre­ated with the inten­tion of not squan­der­ing pre­cious screen real estate, and while it does max­im­ise the use of the screen, it has sev­eral flaws. Given that screen sizes can vary a great deal, a designer can never be cer­tain the line-length is any­where near cor­rect and whether or not pho­tos actu­ally fit (push­ing them­selves off the screen, or worse, push­ing the design off the screen!).

In my next art­icle (not neces­sar­ily the next post!) I’ll talk more about hand­ling the down­sides of the meth­ods and how a mix of them is often the most effect­ive (and laden with browser flow errors — yikes!).