Type Supply Website (The Making of)
I recently launched a new site for my company. I put a lot of thought and work into it, and a few people have asked me questions about the tools I used, why I did some things the way that I did and stuff like that. I love behind-the-scenes, making-of stories, especially about nerdy stuff, so I present to you: The Making of the Type Supply Website (2007 Edition).
Design
My background is in print, but I’ve designed several websites over the years so designing for the web is not a big change for me. That said, designing for the web has always been a source of minor frustration. I’ve never been able to express why until recently. Khoi Vinh articulated it perfectly a few weeks ago:
on the Web, design is not a method for implementing narrative
Exactly! I don’t have any problem dealing with the new interaction behaviors that the web has brought forth. I struggle with the fact that telling stories is very difficult on the web. I wanted my site to express my personality and get across the passion that I have for what I do. In other words, I wanted to tell the story of my work. I could have just put it all in a paragraph, made a simple image portfolio and been done with it, but that’s not how I do things. After a ton of experimentation, I settled on a fairly informal design with bright colors, lots of images and a casual tone of voice. Each typeface family has it’s own subsection where I can expound on the intricacies of ink swells and still have plenty of room to show big images of the typefaces doing what they do best. I don’t think what I settled on is groundbreaking, but I think it gets across who I am. I hope it does anyway. Please don’t tell me if it doesn’t.
Django
The earlier versions of my site consisted of static HTML that was either written by hand or generated with Corbon. That sucked. Several years ago I handled the design side of a big PHP/PostgreSQL based website. I know it’s a cliché at this point, but working with a dynamic system was an eye opener. When I decided that I wanted to do a big Type Supply site, I knew that it had to be database driven.
I’m fluent in Python. That means that I am legally required to hate PHP. (Kidding!) Thus, I had no interest in dealing with PHP again. I’ve been monitoring a few Python based web frameworks over the last couple of years. Django, TurboGears, web.py, etc. I decided to go with Django. It is a mature framework with an active development community, excellent documentation, a nice Python API and a clean template syntax. I couldn’t be happier with it. I had a working version of my site up and running within a few days. Sure, I rewrote it two times after that, but I’m a little bit of a perfectionist that way.
One of the great things about Django is its template system. Granted, some people argue for other template systems, but I think they are really starting to split hairs on this. It’s like arguing which ice cream flavor is better: vanilla or chocolate? I don’t care. I’m just happy that I have ice cream. Anyway, what was I saying? Oh yeah, the template system. One of the nice things about it is that it is possible to filter data. I’m using a handful of filters to process all of my text. My text is stored in the database in Markdown syntax. The text is pushed through the Markdown filter and then through the excellent Typogrify. Thus, my text is stored as plain text, not HTML, but I get nicely formatted HTML without doing any hard work.
On and on and on. You get the idea. I ♥ Django!
MochiKit
Up to this point I had never written any JavaScript. Not even a single alert("Hello World!") line. I always thought that I would hate it, but I was pleasantly surprised to learn that I don’t. It’s not Python, which I adore, but it isn’t bad. I wanted some simple effects on my site, fades between images, an interactive LetterSetter interface, etc. I wrote all of these from scratch. Then I wrote them from scratch again. Then I ditched all the code in favor of MochiKit. Yay MochiKit!
Coda
One of the things that has kept me away from web development has been my frustration with the tools used to develop sites. It has been a cobbled together mess. Then, along came Coda. Coda made me want to work on a new website. In fact, I had designed my new site a few months before Coda was released. It sat stagnant because the thought of jumping back into the web development whirlwind made me ill. I downloaded Coda the day it was released, licensed it a day or so later and started writing the code for my site. John Gruber wrote a thorough review of Coda that explains why it is so good. I do have one minor gripe: compiled Python files show up the file browser. Argh! My eyes! I reported this to Panic. Other than that, I’m really happy with the application.
HTML & CSS
All together now: typography on the web sucks! I’d write more on this, but I think the dead horse has been flogged enough.
One thing: Safari 3 users get a slightly different design than everyone else. Buttons have rounded corners and main elements have subtle drop shadows. I did all this stuff with the proposed CSS3 attributes that are supported by WebKit. I tried the rounded corner support in Firefox and Camino, but images inside the rounded elements were not properly clipped. Sorry Firefox.
The End
I think that’s it. I don’t develop websites very often, and it in the past it was torturous, but this was fun. I hope people like the result.