The Simplest Site Imaginable

---

Separating style from content is something highly encouraged by the W3C Consortium, and is a good idea in theory. But real browsers have different ideas of how to realistically render HTML and how to interpret the associated CSS style sheets.

Here I attempt to gather together the most robust, clear CSS methods and styles that will result in a consistently rendered site and still be easy to read, naviagate, and print out.

From http://www.alistapart.com/articles/howtosizetextincss/ we see that relative text size works most consistently with ems as a unit of size, and with the body explicitly setting the font-size metric:

body { font-size:100%; line-height:1.125em; /* 16×1.125=18 */ }

.bodytext p { font-size:0.875em; }

.sidenote { font-size:0.75em; }

Think 'F'

Jakob Nielsen's web pages note that most readers of Web pages do not read the we like a page from a magazine or a book. Eyes will start at the top left corner, trace along the first line, then run down the left hand side and flick along a horizontal line to read further. When the attention is duly grabbed, there is a second period of concentrated reading.

Make Links recognisable

A BiG Gripe of mine is the disguising of links. I want to know what to click on to follow a topic. Everyone is now used to seeing underlined blue text to denote a clickable link, so following with a blue dominated underlined text is connected deeply with "I can go somewhere with this."

Making it suitable for the printed page

http://www.alistapart.com/articles/alaprintstyles/

Making it readable on handhelds

http://www.alistapart.com/articles/pocket/

---