Design of this Site
When I set out to redo my homepage (once again), I had a clear goal: It should be simple, elegant and expressive, in this order. Since I’m a big friend of typography, and like to read books, this reminded me of the design guidelines for books themselves. So my basic idea was to design my homepage like a book. The result can be seen here.
Page Layout
The header of a page in a book usually contains informative or decorative information, like the current section or the name of the book. Since a web page needs some navigation, I decided to make the header of a page mention the section and the name of the page, being links to the section or the main page, respectively.
The body of a page is divided into paragraphs. All of the paragraphs are set to a maximum width of 66ex, which should give an easy reading on about any font size.
The footer of a page usually contains page numbers, which are not applicable on the web. Instead, it’s useful to duplicate the copyright notice and the license on every page, since the pages can be downloaded individually, not only in a bundle.
Structure
Ignoring some front matter, a book usually starts out with a table of contents. This is duplicated here on the main page, which operates as a central navigation point. I also added some introductionary text, since this is still the web and not a book, and I’m missing the title page.
The structure of this site is divided, just like a book, into a preface, the main matter, and some appendices. You can see this structure on the main page. The sections in the main matter should contain subsections, but as far as structure is concerned, that’s the smallest granularity.
The preface contains information about me (instead of from me), and this description of the design. The appendix is reserved for downloadable files like Debian packages or Darcs repositories and other, similarly unordered data.
Design Problems
This being the web, not everything works as I would like it to. The main annoyance I encountered was the lack of useful justification algorithms in the popular web browsers. When designating a paragraph as containing justified text, the inter-word spacing easily gets too large for it to be read easily. Hence, I’m using ragged right text. This lead to the next problem. Having only a small indentation to mark the start of a paragraph does not work as well if your text is ragged right, so I added some additional paragraph spacing. As I retain the indentation, the ambiguities of that spacing will probably be irrelevant.
As the font, after a long time I decided to use the sans-serif family. Serifes help the reader’s eye to stay on a line, thus allowing more text to fit in the same space. But on a computer screen, serifes tend to look fuzzy, so sans-serif font families are usually preferred on the web. To compensate for lack of serifes for keeping the eye on a line, I use a line-height of 130%. On a print medium, I revert both changes.
Inside the paragraphs, I’m using angel brackets in German text instead of the normal quotation marks as more fonts contain legible variants of those characters. For the same reason of lack of font support, I use much less small caps than I would like to. But since most browsers render small caps just as downsized variants of the capital letters, they easily look very bad.
Block quotes are indented and use a slightly smaller font. I also added a slightly darker background, as the font size difference seems to get easily lost on some web browsers. Preformatted text is indented as well, and have a border on top and bottom to separate it from the rest of the page.
Links do not show up in books. I decided to keep some web compatibility and color links differently to make them stick out. I also decided to add a slight underline to the links that have not yet been visited. This breaks page grayness even more than the color, but I considered that to be good as unvisited links should stick out when skimming a page.
I have not yet touched headers at all, and I’m very unsure as to what to do with those.
Accessibility
As for accessibility, the whole design is done using CSS, which means the page itself should render well on all text browsers. I went as far as to add horizontal rules to the page itself that will never be displayed in a CSS aware browser to improve the look and structure in textmode browsers. I test this page with w3m and lynx.
