UNDERDOG of PERFECTION

Yes, it’s… yet another redesign

I’ve redesigned this blog more times than I can count. Many of those redesigns have been incremental tweaks, to be sure, but still, there’ve been probably dozens of times that I’ve completely torn it down and rebuilt it, more-or-less from scratch. This is one of those times.

I’ve also (finally) wised up a bit. Usually when I post these redesign announcements, I don’t include a screenshot… as if this is the last time I’ll ever redesign the site. I wish I could go back to some of those earlier posts and see what the site actually looked like when I announced the changes. I can remember most of them, even from the pointless ramblings I composed to commemorate their creation. But it would still be nice to see them on the outside of my brain.

There are some big changes in this version. Most significantly, I’m using two (relatively) new technologies as both key components of the underlying structure and also as inspiration for the design itself. They’re created (or at least inspired) by some amazingly talented people in this field, so they deserve recognition.

First, the fonts are being delivered by Typekit. Finally, web designers have more fonts at their disposal than Arial, Georgia and Verdana. (Yes, there are some others, but these three are the most excessively used.) There are some awesome people behind Typekit, but I especially want to call out founder Jeffrey Veen and creative director (and probably the best web designer on the planet) Jason Santa Maria.

Next up, we have a responsive web design using CSS3 media queries. (Yes, that’s probably the most boring possible link about one of the coolest technologies out there right now in web design.) I think we have Ethan Marcotte to thank for devising this brilliant use of CSS3 media queries to dynamically adapt web page layouts to the size of the browser window. At the very least, he named it and helped spread the word with the aforelinked A List Apart article and his new book.

In short, by employing CSS3 media queries to adjust the page layout to an appropriate width and number of columns (and smartly resizing elements within), it’s possible to easily adapt a web page’s presentation to suit the capabilities and dimensions of a number of screens. Just take a look at this site on your 27-inch iMac and then on your iPhone (or your roughly equivalent non-Apple devices) to see what I mean. I’m sure I’m not doing Ethan’s work justice, either in my description or in my application of it here, but I’m excited about the potential regardless.

It’s a great time to be a web designer!

Update: I went for less than 48 hours with Futura PT Light as my primary font for body text here, despite knowing it was too light and, perhaps, too geometric for good body type. Finally, at a friend’s prodding, I resorted to the inevitable: Proxima Nova. I love Proxima Nova. It’s the primary font I use in all of my business materials (and in my logo itself). I had envisioned a kind of ’50s retro school textbook concept with this site redesign, and Proxima Nova, a 21st century font, doesn’t fit that description, but… man, it just looks so good. So, now it’s here.

The only thing worse than Arial is a careless mix of Arial and Helvetica

I snapped these photos yesterday in the parking lot of the Lyndale Rose Garden in Minneapolis. Why, at a garden with huge displays of flowers, fountains, sculptures and more, would I bother taking not just one but multiple photos of the pay machine in a parking lot?

Fonts.

In particular, ever since I saw the documentary Helvetica, I’ve been observing instances of the use of Arial — that abomination of a Helvetica knockoff Microsoft foisted upon the world by being too cheap to license Helvetica for Windows — on public signage. In days gone by, the default, almost ubiquitous, font on all sorts of public signs was Helvetica. But in the modern PC era, these signs often use Arial, the readily available not-quite-lookalike, instead.

But this pay machine is something else entirely. It displays a schizophrenic mix of Arial and Helvetica.

'PAY HERE' and taped-on sign in Arial
The most readily distinguishable difference between Arial and Helvetica, as I’ve noted before, is the capital R. So this pay machine immediately caught my attention with the giant “PAY HERE” sign at its top, immediately recognizable as Arial. I also noticed that the taped-on “ATTENTION” sign (which frustratingly informed me that the credit card function was not working) was in Arial as well.

Dymo labels in Helvetica
Next I noticed the pasted-on Dymo labels below the change slot, which were printed in Helvetica.

Machine instructions in Helvetica
The instructions printed on the machine, presumably by the manufacturer, are in Helvetica, albeit an ugly, artificially compressed version. So it would appear that the “PAY HERE” sign was a Minneapolis add-on and not part of the original unit.