Homepage design

All I know about home page design I learned from Philip Greenspun, Eric S. Raymond and Steve Krug.

Your page has to be interesting, and the way to do this is: content. Keep the design clear, white background, black ink, blue links. It's tiring to read on dark backgrounds. People are used to blue fresh links and magenta visited ones, so no need to puzzle them with other colors. Nothing is more annoying than a slow loading page full of unneeded images. Keep them to the neccessary minimum - you need some, or the pages look monotone and boring. Use stuff like frames and JavaScript sparingly, only to improve the handling of the page, not to satisfy your play instinct. No flashing stuff. No dead links. No "under construction" sign, every homepage is always under construction.

Use familiar navigation, like a breadcrumb trail, a tabbed menu or side menu, search (with a friendly search button), and if you want other tools like a site map. Navigation and content areas should be clearly separated graphically. Name links after the pages they link to, and have a heading on each page that tells what the page is about.

All of the drawings are my own and were drawn by hand. Usually I use a 2B pencil and a Pelikan Stabilo point 88 fine 0,4 black fineliner on normal copy paper, but some are done with color pencils or ballpoint pens also. None of them were done especially for this homepage, they were just sketches I made during role-playing sessions and such. The drawings are scanned on a bland flat bed scanner. I use The GIMP for working on them, unwilling to shell out for using Adobe Photoshop.

Blogger Version

In 2012, in the age of blogging sites crammed with gadgets and editable from anywhere you are, there was much less justification to maintain an own server for the homepage. So, while I had to retire a few features like bibliography pages dynamically generated from a Bibtex database, I moved to a hosted solution at Blogger, adding individual pages I had as posts. No more coding on this homepage for me. (If I had to do this again now in 2017, I probably would do it on Wordpress.)

I did want to maintain the overall navigation, with pages dedicated to the different areas of interest, showing an index of the posts for that topic. This is not supported by Blogger directly. The common approach to do topic pages is to label your posts, and then define pages as URLs that run a label search, like the following:

http://bioinfoxy.blogspot.com/search?q=label:essay+label:management

which will list out all the posts matching the given labels. However, this does not allow you to customize the content of the resulting page layout, and the posts are dumped in their entirety, without a way to just list the titles as an index.

To get around this, I originally used yahoo pipes. Since they shut down in 2015,  I switched to feed2js.org. You can generate an RSS feed for posts with given labels with an URL like this:

http://bioinfoxy.blogspot.com/feeds/posts/default/-/essay/management&alt=Rss

(add the parameter max-results, if you want more than the default number; I only need that for the table of contents index). Paste your feed URL into feed2js, select how you want the output to look like (in my case, title list only), and copy the resulting javascript snippet into your page where you want the index to appear. Voilá, dynamically generated index pages.

Original Version

What follows is a trip down memory lane, about the way the page used to be built.

I originally designed my pages by hand in HTML and a text editor. Apart from very few exceptions, all the HTML has been written by hand using just SELFHTML and some O'Reilly books. No fancy hompage-design tools, just the text editor. I used GNU Emacs which comes with a built-in HTML mode that does formatting, syntax highlighting, tag completion and other stuff. And it'll do the same for your favorite programming language. Homepage design environments are also good and speed you up, saving you the nitty gritty positioning and table stuff. They also tend to use less deprecated tags, and tell you which attributes you can use with which tags up front. NetObjects Fusion even lets you choose if you want your formatting done with nested tables or with CSS, and chose which pages to publish - pretty impressive. So maybe it would be worth to trade control for convenience.

I used Linklint, a free Perl script, to check my pages for dead links. It's amazing how fast links turn stale. Using a blogging site like Blogger is by far the most convenient way I know of for keeping up a "What's new" log - or any other kind of log. It's easy, comfortable, you can reach it from everywhere, and it's completely free.

The most interesting parts of my page from a technical point of view were the navigation bars. Since my page had to run on any hosted platform (like STRATO, which did not support PHP or SSI at the time), I could not rely on server parsed html or rewrite rules, like I could if I ran my own server, to inline stuff. Also a database back-end and CGI-Perl scripts were out of reach. So the page was produced via perl scripts from my internal version of the page, which pre-calculated all the relative paths and did the inlining.