Mark Boulton

A lot has been said over the do’s and don’t’s of lay­out on screen. Design­ers who have a tra­di­tional design back­ground, advoc­ate a fixed column width is the way to go. Design­ers who have spent most of their work­ing life design­ing for screen will be a little less retesent to go for a flex­ible lay­out (aka. Amazon). Of course the likes of Jakob Niel­son will advoc­ate that a flex­ible lay­out is more appro­pri­ate for browser win­dow for usab­il­ity purposes.

I kind of sit in the middle. The typo­grapher in me screams “NO! Em’s are there for a reason, you can take advant­age of them in CSS, so do it!” But the usab­il­ity half of me see’s the advant­ages of a flex­ible lay­out and Doug’s site Stop Design proved this point well with one of the best flex­ible lay­outs i’ve seen. I say “proved” because he’s recently changed it to a fixed width which has promp­ted my post here.

There’s been some argu­ments about the “death of flex­ible width designs”. Per­son­ally the type of flex­ible width designs we’ve seen (amazon etc) should go simply because they degrade legib­il­ity by hav­ing no con­trol 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 cur­rently flex­ible, 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 meas­ure­ment in type­set­ting which is the width of the cap­ital M of the font and size you are using. The “em” is a rela­tional meas­ure­ment, unlike a pixel which is a fixed meas­ure­ment. Rela­tion­ships like this are all import­ant in “proper” typo­graphy. Line widths are related to the width of the font you are using. So, what i’m plan­ning 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 dif­fer­ent size to the one spe­cified in the stylesheet the column width would change accord­ingly ensur­ing legib­il­ity is retained. This is dif­fer­ent to pixel width columns which retain that set width regard­less of the size of the font.

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