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.

Logging

Review is a powerful tool in getting better -- what did work, what did not. For review, reflection or reconstruction how something came to be, it is useful to have a log, because your memory is error-prone.

If you work in a laboratory, your laboratory journal is one of the most essential tools, and if you work installing computers, logging the process and what worked can be very useful, too.

On the other hand, recording things takes time, and time is the most valuable thing you have. So, how should one go about this? Getting Things Done is one of the more useful frameworks I came across.

The way I do it today is as follows:

• I just have one single private diary.
• I use this blog for essays, learnings and thoughts that might be of interest or use to someone else, or that I want to refer back to as a reference, a notepad for little interesting tidbits of information that fit nowhere else. Since entries can be edited from anywhere and updated, this is much more flexible than my old homepage that was in a master copy on one specific machine (which is the reason I put in the time to move it all to a blog).
• In work, I use old-fashioned paper sheets to make dated meeting notes, because one can jot down things much faster (although they are harder to share later) in a life meeting, especially if it is face-to-face.
• I do not do extra time-logging any more, but I schedule meetings, or block time for tasks in Outlook calendar, which therefore is a kind of log. I color time that I feel I spent productively green, so I can see my ratio of wasted admin time vs performance time visually.
• I track product improvement ideas in one product backlog document (currently on Google docs but it does not really matter that much, as long as it is visible), and from those we make sprint documents. For larger developments, there is no logging. I am better when writing things in organizing my thoughts, so long-term developments solidify when I write up strategics plans.
• I use a paper sheet at work for the TODOs, both for the physical satisfaction of crossing them off, and also because it is just much more visible. And my email inbox works as a todo, as long as a mail is in there, it is not done. I have not found a good solution for logging TODOs. The list in iPhone sucks, just as do the notes, as it does not correctly sync with outlook, and the smartphone clearly is replacing all kinds of calendars, notebooks and other gadgets. But I think this should be virtualized -- maybe send myself todo mails?

I use evenings and weekends to reflect and go over the backlogs and tasks, and prioritize things for the next day or week. Just pick only two or three things that you really want to get done, and then work like hell to get them done in spite of all distractions, is the best I have come up with. Setting yourself strict time boxes for how long you work is the best way I found so far.

That's it.

In the past, I used to have too many logs. Based on recommendation from Peter Drucker, I ran a worklog, where I logged down my dayly working time slices, which really was unproductive, as I never gained much from analyzing it. I think most of the time when you waste your time on something unimportant or unproductive, you know that you are doing it. There is no need for logging to find out.

Some times in my life I had to fill an offical time-tracking tool. This is pretty much a waste of everyone's time, unless some project manager or billing really makes use of it. If they do not, people tend to fill it afterwards, pure excise.

During my PhD I noted down what I produced, learned and administered (meta-work) in a work diary. Things I learned about a certain topic, ended up on their own cheat sheet, what is now on this blog.

Hompage must-haves

Research in website design, as narrated by Phil Greenspun has shown that any home page should offer three features:

1. a navigation directory to the rest of the site
   
2. news
   
3. search
   

For me that's three out of three, now ;-) Also you should ensure that interior navigation answers the following questions:
Where am I? (breadcrumbs) Where have I been? (moot point, back button) Where can I go? (links in standard colors).
You should include a logo or site name in the upper left-hand corner of each interior page, linked to the site home page, too, so users can know if they are still on your page. Check your links, to make sure they are still alive. Linklint is a good option.

Blogger

If you want to have a "What's New" list, I suggest checking out blogger. It's really good. Blogger also is amazing as far as the art of Web-based interfaces goes. You can learn a lot of what is possible with Javascript by looking at their pages.

Init.

Init. This is when this blog started. In 2000. As time goes by...