December 2006

New page design for SamFenstermacher.com

You may realize that I've changes the page design for samfenstermacher.com. As usual for this site, the layout is pretty bland. I guess you could say this new page layout matches my personality. Honestly though, I like web pages that have lots of white space and no hard edges. This Web page layout emphasizes typography as an element of design.

The new design actually borrows some from print publishing. What's borrowed is the unit of typographical measurement, known as the 'em'. The 'em' is a relative unit of measure. It's roughly equal to the height of the letter 'M' in the parent font size.

The overall page dimensions and some of the padding and spacing are specified in em's. The page size is determined by the size of the font. As you adjust font size up or down, column width and line height change proportionally. This is called elastic page layout.

Elastic layout has its strengths and weaknesses. I like how the overall page presentation remains the same when you enlarge font size. This is bound to be a plus for vision impaired readers. On the down side, alignment can be complicated since size is relative to font size. A trick I learned after struggling for a little while is to use the same base font size in all areas of the page. This really helps with alignment. I am amazed how precise positioning is with a relative unit of measure.

Besides being a little complicated to work with, the other major disadvantage to using the 'em' unit of measure is that it's relative and so much of what you put on a web page is of an absolute size. Google AdSense ads come in fixed sizes, for example.

I call this page design Elastic Monochrome. You already know about the elastic part. Monochrome refers to the color scheme. I've done some black and white print making in the past. Whether you use Photoshop to make your black and white print or you use historical methods involving a darkroom and analog photo chemistry, your ultimately looking to produce an appealing range of monochrome tones. Using the historical approach, you end up using chemical toners to produce the rich warm tones of gray. With digital image editing software, the approach is more direct. You remix color channels and typically end up adding in a little extra red somewhere and pull out a little blue somewhere else to arrive at the same end result.

The color scheme for the new page design is that. Basic gray tones with a little red and yellow added for warmth. The effect is a little bland, but I'm sticking with it for a little while anyway. I'll post the HTML and style sheet as a free web page template in a few days.