February 1, 2001

I completely reworked the design of this site. It all started very innocently with a completely random idea that came to my mind: creating gradients using only HTML tags. I had actually tried this before, but never at such a fine granularity, and I thought it might look neat. So I began writing what eventually became the code that now renders the banners on the front page.

The effect is created by a painstaking process in which each letter and space is first given its own td block (a tile) in a table, then colored appropriately according to its position in the gradient. After some experimentation, I discovered that inserting small tiles to kern the characters properly and smoothen the gradient also imparts a more 3D look to the effect. And though it wasn't completely smooth, the step artifacts actually lends an interesting twist unlike the typical gradients generated by graphics tools like Photoshop.

Having created the banners, I then turned my attention to the rest of the page. The old page had a blurred picture of a cathedral window, which really needed to be replaced. I did like the table of contents, however, and decided to keep it, but rework it to mesh with the banners. Since the banners were gradients, I took the obvious approach of propagating the gradients everywhere else. In fact, though it may not be so apparent at first glance, just about everything on the front page is a gradient, going horizontally, vertically, and even diagonally: e.g., the diagonal arrangement of the three column banners; the subtle character gradient of the column titles themselves; and the obvious gradients of the column entries. I also experimented with several color schemes -- blue, green, even a red/purple/green combination -- before finally settling on the current scheme of B&W with green highlights.

Initially, I intended to leave the background as a solid black. The idea was to have a front page that was entirely text-based, and yet had a 3D appearance. However, I then decided on a whim to flip through my digital photo collection to see if any of them might work with this new design scheme, and my eyes immediately fell on a very dark picture of a lamppost that I had just taken a few nights before with the Canon EOS D30. The graininess of the moody B&W photo, taken handheld at ISO 800, seemed to complement the overall design scheme pretty well.

A significant feature of the lamppost backdrop immediately became apparent: its near-uniform darkness made it very easy to overlay lots of text without requiring an opaque enclosure to render it legible. The only tricky area was the bright-white lamp head, but using a colored text got around that problem. Interestingly, the position of the lamp head happened to catch the corner of the second column purely by coincidence, thus making it appear that the entry gradients are illuminated by the lamp. I tried to promote this illusion by filling in the boxes above the banners in the second and third columns, which are darker relative to the boxes below the banners, thus making it appear that the banners are round awnings that jut out to shield those tiles from being lit from below by the lamppost.

Since the size and positioning of every element is critical to the proper rendering of this particular page, I made liberal use of nested tables with absolute widths to ensure that the page layout is unaffected by browser size and video resolution. Thus, if one were to resize the browser window while viewing the front page, nothing will move around, as if the whole page were just one big imagemap. Unfortunately, because of this extensive use of tables, I was not able to get Netscape Navigator 4.7 to render the gradients correctly: apparently, NN does not allow cellspacing to be 0. Hopefully, the recently released v6.0 has fixed this problem, but I will not be testing this. Also, the default sans serif font used by browsers on SGI Irix systems appears to be substantially larger than the Arial font installed by Microsoft Windows, which again throws off the layout.

Most of the second-level pages have remained largely unchanged, since they already employed some gradients in their designs (e.g., the course list page). A major exception were the Plexus pages -- 'me', 'friends', and 'beyond'. Previously, all three employed the Heidelberg Schloss tower backdrop, which had a very high contrast and color variation that made it unsuitable for copious amounts of text. It was therefore replaced with the lamppost backdrop, and the 'beyond' page underwent a major design and content upheaval as well, resulting in a much more efficient, useful, and legible page. The one unfortunate bug on that page is that the lamp head ends up underneath several links, which are colored grey and thus are washed out. However, the affected links are easy to figure out from context, which largely mitigates this problem. The Schloss backdrop was moved to two of the Academics pages, in which opaque tiles were deployed to compensate for its complex color scheme.

This site is still 100% written using vi, and it remains largely devoid of things like ActiveX, ASP, CGI, CSS, Java, Javascript, VBScript, and XML. Frames are also avoided everywhere except the photo album page, where it is deployed with fixed panes for layout purposes. Unnecessary graphics are similarly avoided to reduce download times: e.g., the width parameter in img tags is used to create lines of varying lengths from a single line segment, such as the grey dividers found in the 'beyond' page. And the entire site is just three levels deep -- just two in all but two or three cases, in fact -- to help reduce the number of clicks required to get to any particular page. In short, I have tried to keep this site as self-consistent, streamlined, and easy to navigate as possible, while sacrificing neither its aesthetics nor its usefulness.