Webdesign

Introduction

Webdesign and the study of CSS (and later, and in lesser degree, JavaScript) has been one of my major pastimes. This includes keeping up with latest developments and techniques, but also analysing bug reports and trying to find the cause of rendering problems: browser bug, PAS or a problem in the specs?

Occasionally I also write a webpage (all handcoded in a text-editor), and although I'm not much of a visual designer, I actually spent quite some time working on this (and previous) designs of this site. This page contains screenshots of past designs and contain information about some of my webdesign-related projects.

CSS/Experiments

CSS/Exp Aside from keeping up with developments in webdesign techniques and methods, in the past I also indulged myself in CSS Experiments with which I tried to push the boundaries of CSS. The experiments are are showcased on my CSS/Exp page. Many experiments focus on CSS generated content, but also other techniques related to scientific webpublishing and Opera Show can be found; and finally there's also time for some pranks! :)

Past designs

This is of course not the first design I made for my site. There have been some highs and lows, and here are screenshots as witnesses.

pre-MarkSchenk.com

Before I got my own domain name in the summer of 2002, I had just seriously started webdesign with this very pretty design, which I still consider to be one of my best. The Escher drawing and the various orthogonal lines on the page give an 'arty' feeling and the colour scheme is both futuristic and very accessible. It was also the first time I experimented with OperaShow on regular pages and many techniques on that page have returned on later sites.

MarkSchenk.com v1

With the new domain came the new design and, in retrospect, what an anti-climax it was. The only excuse I had, was that I used the stylesheet of an editorial I was working on at the time as basis for the new site.

Things got slightly better with the next design, but it wasn't a major change, only more colourful.

BTW, I no longer had either of these designs on my harddisk, but they were retrieved from the WaybackMachine

MarkSchenk.com v2

About December 2002 I decided I wanted to do a Blog and switched to Movable Type. In the process I designed a new stylesheet for the template that came with MT. This stylesheet was then extended to encompass the entire site, which resulted in very poor semantic pages as all classes and ids were taken from the MT template.

This stylesheet was too complex for Internet Explorer and I had to rewrite it entirely, though maintaining the same layout. The layout felt stylish, but was overly complex and showed many shortcomings under the hood, among which poor cross-browser performance.

The site received a major code clean up in the spring and the red background colour was added, but the design remained essentially the same because it looked pretty good :-)

MarkSchenk.com v3

Version 3 is the version you are looking at right now. The main object was to get the semantics in order on the pages, improve accessibility and cross-browser performance.

This was also the first time my frontpage is completely differently styled from the rest. The frontpage is derived from the Pantone colour cards and makes use of advanced CSS hovering techniques, which only work in Opera 7+ and Mozilla browsers. To this day I still like the design, and with a small JavaScript addition, the page now also works in Internet Explorer.

Initially the regular pages were styled as can be seen on the right – what was I thinking!? The colours are hideous...

Fortunately within a few months it was replaced with a much better, though rather dark design. This design is still maintained on my M2 tutorial.

MarkSchenk.com v4

After I graduated I had spare time, which I partially employed to rewriting, restructuring and redesigning my website. The layout is quite basic to start with, but my main focus was on introducing unobtrusive JavaScripts to add additional functionality to various sections of my website. For instance the navigation menus are automatically generated, and the TUDelft section has an advanced table-search-sort-script.

I also decided to stop updating inactive sections of the site to the new design, and instead freeze them to the previous design. Furthermore new sections need not necessarily conform to the same layout, but may have a separate identity, such as my Tensegrity Pages.