Style Notes: Wasteland

Writing about a style you conceived over a year ago is never a good idea, but, almost imperceptibly, I have been filling in the various cracks in squarehappy, and this crack's time has come. It's shame that it has to come to the forefront like some kind of legit content, but the site that's how she works. Time to take a stroll down the stylesheet for Wasteland and see if it can jog any useful nuggets.

Red, Yellow, and Everything In Between

Wasteland did not begin with the color scheme you see. I think it actually started out as blue and orange, a color scheme I'd tried many times without any useful results, other than learning what not to do. It was dangerously close to using a color scheme which I dubbed "make-up", with a peach skyline against a violet gradient backdrop. Ultimately, I went with the red/orange/yellow scheme because it conveyed the city of the future as seen in my head: blistering sun, palpable humidity, choking on our own pollution. Not necessarily what I think the future will be like, I just wanted to convey a particular atmosphere, and this one's ozone is depleting rapidly.

The fixed width was also utilized to convey the claustrophobic sense. This was the first fixed-width layout I'd done in forever (I developed this one and The Times in tandem) and I wanted to see just how tight I could squeeze everything together. In fact, the layout starts at around 800 pixels, slims down to about 600 for the content, and eventually down to two pixels wide at the endmost point (wanted it to be one pixel, but I forgot to make the content width an odd number). I like to picture each page as a top or a city about to collapse under its own weight.

What I feel really ends up tying the theme together is the typography. I'll admit it was risky to use the negative letter spacing to cause an overlap on links, but I think I nailed just the right amount of overlap so the words are readable as they collapse on themselves. It came out looking a lot better than I could have expected. The graffiti font, along with the stick figures, are the only hope found in this design. The graffiti heads the menu, highlighting the individual voice, my own, as the voice of this blog. I do not make official statements. I find whatever piece of free canvas I can commit my opinion to. The system has been built up around me and I function within the confines of it.

Speaking of typography, I can't not mention the Comic Sans in action. Maybe you didn't notice it, but there it is on the menu bar. Say what you want about Comic Sans, and I'll agree with you which is why I took on the challenge of using it, but I made it look good. It actually fits with the grafitti type if you don't look too close, and I can't stress this enough, it doesn't look like Comic Sans.

I had great fun with the Photoshop editing, which essentially amounted to saving everything in the lowest quality possible. I tried to combine elements of ye old web designne (over-compressed images, Comic Sans) with elements of the new (gradients, drop shadows). Just look at the gradient lines in the background as an example.

Waste Management

I often like to have elements butt up directly against eachother, or maybe it just sticks out in my mind because it never works the way I expect it to, and it seems to happen most often with headers (h1, H2, etc.) Indeed I had to force p.post_info to rub up on h1 with a little relative positioning. I suppose it works, but I'm a bit beyond the point at which that is satisfactory.

I also butted my head against a wall trying to get the comments header on article pages to butt against the bottom border of its parent. It took a line-height adjustment to get there, but there is the unfortunate side effect of the background with the group of stick figures being partially obscured. Oh well, it still makes its point, and hides the fact that the stick throng is just a mirror of itself.

The button that submits a search turned out way cooler than I expected. It contains only the image of the SH logo, and the rest is pure CSS. Too bad not all browsers agree on how much control to let designers have over form controls. Firefox renders it optimally, and IE is close behind.

The look of the portfolio was a happy accident. I think it came from the stylesheet for Live, which I copied over merely for a reference to the syntax I was styling. A few tweaks later and I was done. I tend to crap out at designing the subpages (Folio, Styles, Links, About) but I manage to give them a unique look in each style, sometimes quite unique from eachother in a given style.

Wasteland is the only style where I went so far as to style the referrers page. It was a good exercise in styling tables with CSS, something I haven't done since I left tabled-based design behind.

The skyline is from San Francisco, a fact I don't believe I realized when I created the design, in spite of my proximity to it and affinity for it.

Having many different styles makes it difficult to ensure content will display appropriately multilaterally. Wasteland is the worst offender, given its narrow width, and images are its Achilles' heel. I have attempted to keep images within the confines of the layout by giving them a max-width of 100% of the containing box. Not only does this bork on IE6 or below, it doesn't scale the height when it does come into play. Still looking for a solution to this problem.

'Land's End

We've reached the singularity of Wasteland, the end point. Wasteland isn't the best example of my CSS capabilities, but it's probably the best in terms of creativity with the design. The unspaced links, in particular, stand out to me as something unique (at least I haven't seen anything like it) and sexy and yet very readable at the same time. Yeah, I said my links were sexy. Thus concludes the second style notes I've ever written, a year after the style debuted.