No Commercial Potential: It's just as I had feared. I have come undone.

Undesigning 1 May 2008

If you are the noticing type, I’m sure you noticed that No Commercial Potential looks pretty substantially different than it did on, say, last Thursday. Here’s some why and also a tiny bit of how.

Physician, em-hance thyself

The thing that is not immediately obvious maybe, but which will be apparent if you increase or decrease the text size in your browser, is that my CSS is now entirely em-based. If you’ve been following along at home you may recall aggressive em-hancement I did of Coudal Partners’ Seed Conference site. That was a fun little lark and it got a bit of attention (in the form of a massive (by my pathetic standards) traffic spike) when superstar Dan Cederholm linked to it.

Well, it’s a fine thing to get your name out there for rewriting someone else’s hard work and quite another sort of thing entirely to do your own from scratch. And I was about halfway through the Seed em-hancement when I started thinking about doing the same for this, my own site.

Here’s the problem between em-hancing my site and the Seed site: the Seed site is entirely text, therefore it all scales when you do a text resize. From the day I started No Commercial Potential, the most prominent item on the home page has been an image of some sort. In the current incarnation of internet imaging technology it’s an unavoidable fact that images just don’t scale. The fixed dimensionality of the <img> tag is inescapably manifest in the pixel-bound hardwiring of its ‘height’ and ‘width’ attributes. And even if an image’s size were defined in ems with CSS (I admit I haven’t actually tried to do this) the horrible things that would happen to those stretched-out pixels would do no one’s work any favors.

So there’s that completely intractable yet indispensible element to start with. But you know what? Fine. I’m not going to stop posting images and images aren’t going to stop having specific pixel dimensions but there are definitely other areas that can benefit from em measurements if one chooses a life as free as possible from the dimensional tyranny of .jpg, .gif and .png.

Background Check

There were many more images in my previous design than the ones I was posting. There were a number of tiling background images which, as with embedded <img>s, would not scale with text. And then there is the larger problem in image-replaced text (I normally use the simple tactic of a background image and big negative text-indent) of which there were several instances in the header and footer and scattered about other places in the previous design. It’s a great way to keep presentation and content separated and to keep your markup tidy but, again, the images will stay stubbornly at native size when the rest of the design is em-lastically expanding and contracting.

So, for this version of the site I decided to dispense entirely with any images that were not content. Posted images can stay, background flourishes and replaced text must go. Which is not a way I’d ever built a page before so….

Helvetification

Having decided to limit myself to text I had, of course, limited myself to the thin, lukewarm gruel of web typefaces. As anyone who ever built a web page knows, there just isn’t much to choose from. I played with your Verdanas, and your Times. Dallied briefly with my old pal Georgia and gave some consideration to Lucida Grande. Even had a sit-down with Courier. Eventually I left it here:

font-family: “Helvetica Neue”, “HelveticaNeue”, helvetica, tahoma, verdana, sans-serif;

I admit this is rather a boring decision. But Helvetica is the designers crutch for a reason. And I’m hoping that Lars Müller will point at my web site some day.

The nice thing, however, is that when I finally do change my mind about it, I only have to change one line of CSS.

Gridding

Oh and also? I used a grid this time. I have often worked with the idea of a grid in my head when laying out sites, but this time I actually laid it out on top of a grid image. It just seemed necessary — since I was being as spare as possible with design elements — to keep a solid foundation very much present in mind.

So my use of a grid as well as the preponderance of Helvetica should quite effectively put Khoi Vinh off his lunch. He won’t know why, but we will.

Other Consideration

Ok, and also the other thing about this design that was not a technical decision was that I was completely bored with what I had. The design immediately previous to this one was one that I thought of while I was halfway through building the design that it replaced.

I think I have actually never come up with a design for NCP that I was so satisfied with that I got all the way through implementing it without already thinking of its replacement, or at least becoming thoroughly sick of it. This is why I will never get a tattoo.

But we will see how I feel about this undesigned direction. At the very least it’s not distracting. And I feel like I’ve got a flexible enough framework in the markup and CSS that I can just about whatever else I feel like with it. You can certainly expect changes big and small without notice.

A Note to Internet Explorer

Ok, IE, here it is. 7, I am looking at you, too. When I’m working for a client you can push me around. When it’s for money and someone else’s image, I will bow to your absurd, insane, demands because I will have to. When I am at work, I will put up with your bullshit like the irrational boss you are. But this — here — is my home and I will accommodate you at my leisure. You don’t get to push me around here. Maybe when I feel a bit more masochistic I will try to figure out why you don’t want my columns to actually sit next to each other. Until then you can just suck it.

Etc.

Wow, did you actually read all the way to here? Amazing. Well, if you’re really that committed, feel free to comment or mock as you are led. I didn’t include a lot of how-to here as I figured you are either a nerd who already understands the ideas behind em-based design, or you couldn’t be fucked to care. But if you are really interested in how I did something go ahead and ask.

I just realized I very unintentionally turned this into a May 1st Reboot. Well, fuck.

See more: Unjustified Text, Design