As of today, I’ve switched to using the pelican website generator to create this site. This is a piece of software that converts articles (like this one) that are written in a plain text format called reStructuredText into webpages.

The reason for doing so was that is is very difficult to label and cross-reference (tag) the pages of my old website which was simply some webpages either generated from plain text markdown format or hand-coded HTML. If I wanted to do that I’d have to do that by hand or write some specialized programs for it. Since tools like pelican already existed and would serve my needs, I decided I didn’t have to start from scratch, even though I’m often tempted to do just that because of the flexibility.

I’ve grown to appreciate the relatively simple plain text input formats like reStructuredText and markdown. Editing HTML with all of the tags is visually distracting. Below is the reStructuredText code for including an image;

This is an image.

.. image:: directory/picture.jpg
   :width: 50%
   :alt: alternate text
   :align: right

The lines under the image tag are optional. Compare that with the equivalent HTML;

<p>This is an image</p>

<img alt="alternate text" width="50%" style="display: inline-block;
float: right;" src="directory/picture.jpg">

The look and feel of this site is largely governed by what is called the “theme”. This is a combination of webpage templates and styling hints written as cascading style sheets. There are several themes available for pelican, but I didn’t really like them. I wanted to mostly keep the look of my previous website. So I studied the available pelican themes and some HTML5 templates and wrote my own templates and CSS. You can find this theme in the software category.

Previously my website was written in XHTML4, because the emacs editor that I use has a validating parser for it. But HTML5 is standardized, and CSS3 has some interesting improvements too, so I decided to go for that.

Ever since I discovered TeX in the 1990s, I’ve been interested in typesetting and typography. There are a lot of design considerations for this website that were influenced by that:

• Typesetting taught me to use resolution independent measurements. So when specifying measures in my CSS, I avoid pixel sizes. I tend to use em for widths. For borders widths and font sizes I use one of the pre-defined values.
• Black text on a white-ish background.
• For reading text on paper I prefer serif typefaces. But I realize that other people have other preferences. And on a computer display with limited resolution, they might not render clearly. So I do not specify any fonts in my CSS. You’ll see the fonts that you’ve set your browser to. I’ve set firefox to display a serif font named “DejaVu Serif”, which looks quite nice in my opinion. But in a browser that is for the reader to decide.
• The design style is deliberately book-like, with a distinct header and footer and the body text in between. Elaborate backbround images or other highly visible styling elements are just not my thing.
• The width of the body is set so that the text can contain around 80 characters on a line. That comes in handy when you’re showing source code. I like to think it is also a good balance between readability (more difficult with long lines) and conciseness. For inspiration I’ve looked at some of the books that I have, and between 70 and 80 characters per line seems typical.