about

This website's design is fickle and variable. But, because i am sentimental, i keep old designs around. I have liked all of them, but for different reasons. This section outlines the various css styles that i have produced for this site.

Generally, these designs are heavily typographic and all feature one commonality: every paragraph hovers around 60-80 characters in width in order to make reading somewhat less annoying. In cases where the paragraphs are tightly set, the text is rarely justified.

module

Module was an idea i'd had for a long time, but it wasn't until i started making lots of netvibes modules that i really decided to fix the size of the page and each section of content.

In going this route, I was really sold on the concept of little boxes on the page, that you could take in each piece of it as an atom without having to deal with the rest of it. sure, that breaks the 'wholeness' of the document...

It breaks in loads of other ways probably, but here are a couple i have noticed.

• firefox puts overflow:auto; scrollbars on top of everything, even lightbox galleries
• safari doesn't know how to properly capitalize sentences, in particular, index's h1 used to read “Ok, let's begin,” but safari rendered it as “Ok, Let'S Begin.”
• safari stretches images with max-width set instead of scaling them.
• even though each paragraph has a margin-left, safari seems to ignore it. (i think this is my fault, but i'm not sure)
• The background-images used in every div have alpha transparency, so the webpage probably breaks real good in internet explorer.

swiss

Swiss is my answer to every previous design. While all have been fairly ordered, even structured, swiss responds with a truly grotesque design that is a brutally honest acknowledgment of helvetica's true properties. All paragraphs melt into each other, all lists are single parenthetical objects, the page is brutally white, and everything is anonymously plain. This is the grotesk [sic] rendition of swiss design that helvetica unleashed upon the world.

John Maeda commented in class that Helvetica is like that comfortable pair of jeans that you've always got. Styles go in and out of fashion but those jeans are trusty and reliable and soooo comfortable. Is there really anything wrong with wearing them a bunch even if it's no longer vogue? NO! i agree, but for a font that gets so much airtime but so little scrutiny, the best service you can do is to honor it with a truly fitting memorial.

Swiss (as helvetica is named for the country) was designed in november of 2006.

centered

In reality, centered is genuinely more classic than 'classic,' borrowing heavily from 16th century venetian printing. The purpose of centered, however, over classic, is to show that good design may not only mimic the printed page, but it may do so effectively while using the generic serifed fonts that exist on most everyone's computer. Here, everything is set at the regular weight and the largest font size (the main heading) is only twice as large as the copy text, a far cry from the almost excessively bold features of 'classic.'

Centered attempts to use, in order, Bembo Std, Georgia, and Times. If you are fortunate enough to have the first on your computer, then 'centered' is as venetian as it'll get on the web, otherwise, it just looks venetian. The other fonts do just as good a job, but the real trick is that the background color of the page is just creamy enough to make the actual content look like an honest page, white and all. Centered was designed in december of 2005 and my friend analucia berry has told me that it reminds her of McSweeny's.

sky

Sky was designed shortly after Classic and is a nod to three simultaneously unrelated set of people. It is first, a celebration of the wildly generic use of helvetica to set most 'modern' text. this was common, is common and will, i believe, not cease to be a legitimate use of such a font, although it betrays the typeface's grotesque manner.

Secondly, sky is a nod to the prevalent fixed background technique that pervaded most web design for about two or three years starting in 2001 or so. The effect is somewhat amateur, but nonetheless enjoyable. The entirety of the design, however, is predicated on a photo i took of the Green Building in... april or may of 2005 while resting on The Dot. In the upper left hand corner is the top of the green building having been effectively posterized beyond almost all recognition.

Sky is utterly simple, relaxed and anti-designed. Instead of using Helvetica, it defaults to Helvetica Neue which is the better Helvetica on MacOS. There is nothing special about it, except for the fact that it is one if this site's themes. Sky was designed around november of 2005 right about the time that the sky in cambridge started looking pretty grey. If you scroll slowly enough, you can almost see a rabbit in the clouds...

classic

Classic is actually more neo-classic than truly classic. The typefaces it uses (or hopes to) are, in order, Martin Majoor's Scala Regular, Matthew Carter's Georgia, Times, and Times New Roman. That is, the first two fonts have heavy baroque influences although Scala is much more postmodern than georgia is. In either case, both fonts have a classic feel. Times is included because it is the closest/most generic serifed font, although it is not nearly as gorgeous as either scala or georgia.

Classic was designed (much as Swiss would be) to exploit type color throughout the document. Headings are much larger and heavier than the copy of the document, so they are set in a lighter shade of black to equal out their contribution to the page. Second level headings are set on the right side of the content (in a gutter) that is headed up by the intro of the page. Classic then, is a two column layout.

Unfortunately, because the second level headings are aligned to the right of the second column, they are often hard to connect with the regular content. Additionally, because of the way in which they (and images) are set off, they may be chopped off from the page if a user's browser is not wide enough.

Classic was designed in September of 2005 and primarily used to set large blocks of continuous content, essays or papers.

bauhaus

The bauhaus style is an html interpretation of Herbert Bayer's bauhaus catalog. If you are lucky (or exorbitantly wealthy) enough, the site will display using Paul Renner's Futura LT font family. Otherwise, it falls back to Century Gothic (a cheap futura knockoff) and then helvetica/arial. Bauhaus commits the crime of de-denting the first line of text and also placing it in small-caps. The first is a faux-pas (i'm told), while the second may just be adding insult to injury. you decide.

The design is the most structured of all the designs so far. Despite the appearance of a table-based layout, the whole thing is accomplished in css (surprise surprise). Because its structure is so apparent and the design so geared towards showing clear relationships between heading and text, it was reused in a few MAS110 problem sets. This layout was designed in the july of 2005.

this current incarnation of my webpage was an exercise in abstraction. I had hoped to create a single page/template/aesthetic that was portable and had room to grow. It is also my answer to each of the problems i have with the web as it exists.

what?!

the web, if you think about it, has relatively little to offer people. here are some things off the top of my head:

• porn
• news
• documentation
• blogs
• text

and if you think about it, most of these things are relatively simple and straightforward to produce. That is, there isn't much to them except the content. This is a partial reason why rss is so popular, it cuts to the chase and gives us what we really care about: text and sometimes images. certainly it also has lots of metadata, but that's only as important as the content it provides, and most of that is just simple text.

in paragraphs.

structure is everything. if you ask css weenies, they'll tell you that the best documents to design have relevant structure. w3c, simile at csail, microformats and others are working hard to create and extract reusable structure for documents.

if you're lucky, you're never exposed to this issue. why should you be? who cares if this paragraph has a rel tag on it (the parser). what happens if i need to site-wide update all those rel tags to something new. what what what... it's a real hassle!

unfortunately, the problem is that the more abstract you get the more you fall into the trap of creating yet another markup language. and sure, maybe it's clean, maybe it's all you hoped for, but it will grow, it will soon expand to bridge gaps it never did before and the next thing you know, your clean and refined markup language is a bastard clone of what you started avoiding in the first place.

this is unavoidable.

Unfortunuately, this is what i have attempted with this site. Piece by piece i have created modules and elements for this site that will allow it to become what it already is with the least user intervention. As time goes on, i realize i have created an abstract structure that is arguable only slightly more intuitive than pre-existing solutions. But, i prefer mine.

the goal of good design is to elucidate meaning, so says Ellen Lupton. The less work the content creator needs to do, the better his meaning is conveyed and the better the end user's experience is. By addressing the issues that plague the problem of creating content we enable superior content with richer meaning. How can one rectify the unavoidable problem. this is what i try to address. this is what drives learning. this is what will advance education.