Liquid layouts

A lot has been said over the do’s and don’t’s of layout on screen. Designers who have a traditional design background, advocate a fixed column width is the way to go. Designers who have spent most of their working life designing for screen will be a little less retesent to go for a flexible layout (aka. Amazon). Of course the likes of Jakob Nielson will advocate that a flexible layout is more appropriate for browser window for usability purposes.

I kind of sit in the middle. The typographer in me screams “NO! Em’s are there for a reason, you can take advantage of them in CSS, so do it!” But the usability half of me see’s the advantages of a flexible layout and Doug’s site Stop Design proved this point well with one of the best flexible layouts i’ve seen. I say “proved” because he’s recently changed it to a fixed width which has prompted my post here.

There’s been some arguments about the “death of flexible width designs”. Personally the type of flexible width designs we’ve seen (amazon etc) should go simply because they degrade legibility by having no control over the line length of text.

“Hold on a minute! You can’t get rid of them all together” I hear you cry. No, we shouldn’t. We should replace them. True, the Snooch site is currently flexible, but i’m going to move it over to a fixed width BUT instead of the fixed width being based upon a pixel width, it will be based upon a em measurement.

So, how is this done? Well, first of all for those who don’t know, an “em” is a measurement in typesetting which is the width of the capital M of the font and size you are using. The “em” is a relational measurement, unlike a pixel which is a fixed measurement. Relationships like this are all important in “proper” typography. Line widths are related to the width of the font you are using. So, what i’m planning to do is have a “fixed” column width based on em’s BUT, this is the clever bit, If the users font size is a different size to the one specified in the stylesheet the column width would change accordingly ensuring legibility is retained. This is different to pixel width columns which retain that set width regardless of the size of the font.

Watch this site over the next few days for a change…

Comments

Commenting is not available in this section entry.

I'm a graphic designer from near Cardiff in the UK. I've been a designer for over ten years now and primarily work on the web. I'm still partial to a bit of print every now and then though. I used to work for Agency.com in London as an Art Director before working as a Senior Designer for the BBC in sunny Cardiff. This was all before I took leave of my senses and formed my own design consultancy, Mark Boulton Design Ltd.

I've got a thing about grids and typography and occasionally ramble on about them to anyone who will listen.

Mark Boulton Design

If you're after simple, clean and effective web design; let me know.