Tuesday, April 19, 2005

One of the best articles on Web design ever?

The Dao of web design - absolutely essential reading if you are into the new buzz surrounding CSS/XHTML hacking and Ajax design. Key points are to avoid pixel perfect layout, and to avoid absolute font sizes - make them both proportional.

"Margins, text indentation and other layout aspects can also be specified in relation to the size of the text they contain, using the em unit for specifying margins, text indentation and other layout aspects. If you specify

p {margin – left: 1.5em}

you are saying that the left margin of paragraphs should be 1.5 times the height of the font of that paragraph. So, when a user adjusts their font size to make a page more legible, the margin increases proportionally, and if they adjust it to make it smaller, the margin adapts again."

"We can make headings and other elements stand out using font size by specifying that headings of level 1 should be say 30% larger than the body text, level 2 should be 25% larger, and so on. Now, regardless of the size that the user chooses for their main text, headings will be scaled to be proportionally bigger than the main text."