The Grid

Having seen Mark Boulton and Khoi Vinh talk about grids at SXSWs and then reading the classic Grid Systems in Graphic Design I couldn’t not redesign my site using a grid.

In fact, I’m even maintaining a vertical rhythm as well (busting out some Bringhurst for that). This particular aspect isn’t 100% yet, as I’m having a time with borders throwing off my vertical grid, but I’m working on it.

Also worth noting is that I, while these strict grid types often make excessive use of Helvetica, after I did a bit of research I found that Gil Sans is included on every Mac and anyone with Word installed on Windows, so I’m going to use it here. Not everyone will have it, but it’s more exciting than Helvetica (and not enough people have Futura).

Colors

I’ve been thinking about how to embrace wabi-sabi on the web since I began the Stanifesto. How can you create something that weathers and gathers character with age in a digital medium? If you follow that last link, you’ll notice that the post is in black & white. That’s because all of my posts gradually desaturate with time now, and anything over a year old is grayscale.

Additionally, this site now slowly cycles through color schemes throughout the year. I wrote a particularly clever algorithm that grabs the day of the year and then calculates the color palette from it. That means that if you visit often, you may never notice that the colors are changing but if you only come by once-in-a-while, the site will have entirely different hues. You can blame my switching to locally grown, organic produce for this feature (just like certain fruit, the purple color scheme is only in season for so long so enjoy it while you can). Oh, and transparent PNGs play a large role here.

Goodies

Most popular posts! Recent comments! Contextual footers! Creative Commons license! All sorts of fun for those looking for it. Still to come is a full overworking using microformats and stylesheets that re-arrange content based on the size of your browser window. There are sure to be some bugs, too but I couldn’t wait until everything was ready or I’d never come back from vacation.

Speaking of vacation, I’m headed to Black Rock City next week, where I’m going to try to do the unthinkable and somehow continue to blog. We shall see.

But let’s back up a second. First, what are microformats? Just this evening I found myself explaining them, which is difficult without a running start. Once upon a time, a single webpage contained both the contents of the page and how those contents were supposed to look. Webdesigners learned clever tricks that made pages pretty but insanely huge and complicated consequently. Ask anyone who has been designing websites longer than 3 years about “nested tables” and you’ll see the terror in their eyes. We’ve come along way since then, separating the content (as XHTML) and the design (as CSS); but soon we realized there was more to be done. The content we had was just meaningless words, what did it describe?

For instance, here’s a random (but true) statement:

Last weekend I saw Björkestra play at the Great American Music Hall with my friend, Anne. They played Björk greats like "Human Behavior", "Joga", and "Oh So Quiet" with an 18-piece jazz ensemble. The venue was incredible and the band itself phenomenal.

Lots of things are going on here. I’m describing an event, I mention a person, a list of songs, and give a review. You, a human of greater than average intelligence (you are reading Stanifesto afterall) and capable of parsing language for its meaning, immediately recognize all of these things. A computer just sees a string of letters and numbers interrupted by commas, periods, and quotation marks. Not very useful.

Enter microformats. With microformats, you can do a little behind the scenes work (adding some XHTML tags that say things like rel=”friend” or class=”rating”) and soon a computer sees EVENT, PERSON, LIST, REVIEW. To see microformats in action, download the Tails extension for Firefox, which drops a little green square in the corner of your browser whenever it sees microformats on the page you’re viewing. Then scripts that will take those microformats and do useful things with them, like “Map that location on Google” or “Add that person to my address book”. Which brings me to the point of this post… finally!

My Addressbook was chaos. There was one group called “work”, one called “personal” and then a big pool of unorganized people. I never knew where to look (would my cubemate Japhet, in whom I often confide great secrets, be contained by “work” or “personal”?) and would frequently find people I did not remember a damn thing about. I had plenty of content, like phone numbers and email addresses, but no way to make sense of it.

Nice photo, dude.

There’s a microformat for relationships called XFN. As an example, you could link to someone’s else blog and use XFN to note them a colleague that you had actually met in real life (with an easy rel=”acquaintance met colleague”). I opened one window to the XFN Quick Reference table and another to my Addressbook and started chugging away. There were some tough decisions to be made (is my father a “friend”? is this person a “muse” or a “crush”?) but a clearer picture of the people in my life and how they relate quickly came into view.

Crushs are just a click away!

The next step was adding some Smart Groups that will scan the notes field and organize folks into groups automatically. No need to decide whether or not to drag them into “work” or “personal”, just tag them honestly and they’ll show up where they need to be. Japhet ended up in both “Co-Workers” and “Friends”, which sounds just right to me.

Microformatting is not really intended for local applications, it’s really more for making better sense of publicly available information. So it’s really quite thrilling to me that it was so incredibly useful on a personal level. Like RSS and AJAX, microformats are another great example of the internet community at large (and not a closed corporation) constructing a product to meet their own demands, in an open and organic way. I’m excited to see what else I can apply them to.

Maybe this blog?