Reconstructing Jeffrey

“We are not amused.”, I can almost hear him say, while I sit here laughing wildly, surveying my latest CSS experiment. I think for these projects, CSS might stand for Celebrity Style Sheet. And actually, I’m sure Jeffrey would at least get a kick out of it. Especially the bit about the muffin.

You have no idea how much fun I am having with this little project. It’s become a bit like Halloween for me. Which, by the way, is my favorite holiday anyway. It’s allowed me to sort of dress up as it were, and play at being someone else for a few days. Trust me it’s fun. And the whole process is simplified by the use of CSS. Which is what the other half of this project is about for me. Getting a good handle on it all. Without CSS, It would be far more difficult to rearrange the elements of the page easily. And it’s an integral part when it comes to separating the content from presentation or style. I wind up spending more time recreating graphic elements than I do with the layout of the page. And I only hesitate to use the word style, unlike Jeffrey, because I feel it’s the presentation that inherently has a particular style. But it’s really just a matter of semantics. Choose your own word. In the end, the content is still separate from the form it takes on output. And that is a great thing. Now, on to the reconstruction.

zeldman.com is the benchmark for good website design. Good layout, readability, usability, and great content. It’s got everything you need from the Web. It’s probably the single most copied layout I’ve seen. I’ll be calling the Guiness people in the morning.

The layout itself seems to enter the browser with confidence. The background color says, “STOP, you need to read me!” The 3 pixel border surrounds the content and locks in the freshness. It’s basically a 2 column layout, with links on the right and the content on the left. The navigational elements at the top of the page are strategically placed above the title and the photo of the man himself. If you were to remove it, the whole structure seems to crumble. In fact, that’s a sign of a good design. The page is an ensemble of elements working together to create a greater whole. The bold title announcing the beginning of the content area. The photo of zeldman himself, staring you down, daring you to be bold in your own designs.

At the bottom is the footer of this virtual document, complete with counter. I’ve often wondered why this is there. You don’t see them as much anymore, but this is club zeldman, and he’s entitled to keep a head count.

What isn’t obvious when first viewing the page, is the attention to detail. Jeffrey is all about the details. And the clean lines and elegant minimalism belie the seriousness and intent of the design. There is nothing here simply for it’s own sake, or just because he can. There is no need for a page full of sliced up graphics or flash intros. The design is geared towards the presentation of the content. “We are content personified.”, he might say. A look at the code reveals just how much that content means to him. And how much it means to him that you be presented with its richness. The detail with which he ensures that it can be accessed simply shows that he is all about reaching people. My reconstruction, might make him shudder. It works, but that’s all it’s meant to do. Jeffrey constructs pages as if he is building pillars. They’re meant to hold up under any weight, and yet remain flexible enough to be accomodating. They don’t topple over just because some silly browser feels like pushing them around.

This is what web design is all about. This is design with far reaching roots. When all is said and done, and the smoke has cleared, zeldman.com will be the last site standing.

That preview I was talking about? Forget about it. It looks nothing like that anymore. I’ve gotten so fed up with it at this point that I needed a break. So what have I been doing? Thinking about what it is I like about some of my favorite blogs/sites on the Web. And in my infinite wisdom, I’ve decided to ease up on myself and have some fun for a bit.

Over the next few weeks, as I work on MY redesign, I am going to redesign this place to look like some of my favorite blogs/sites and talk about what it is I like about their design. To those designers whose sites I copy, please don’t take offense. I’m not really stealing your designs. I’ll be working these up pretty quick and dirty for the most part. They will only be temporary, and I can only say you guys rock!! Class acts all the way. Thanks for the inspiration.

First up on the chopping block [as it were] is harrumph! by the lovely and talented Heather Champ, also of FOJM fame (I promise I’ll send in a photo or two).

The first thing you notice is the cleanness of the design. Very neat and tidy. Nothing overpowers anything else. Cool isn’t it? I always thought so too. I also believe this current design is sans Blogger. I’m not completely sure. It’s basically a three column design, and is fairly liquid, which is great. Occasionally, liquid design is done where the text fills the screen, and it gets difficult to read. Thankfully that’s not the case here. The text area is kept well within readability limits.

The first column on the left is the Blog section. Verdana is the font of choice, and Heather uses a line spacing of 19 pixels here, which makes it extremely readable. Next to that, in the center column, is the real eye candy. Her fantastic photos. She’s always got something new and interesting here. Heather can take a picture of a toaster and make it look cool. I’ve seen anywhere from 1 to 4 photos here. And they’ve never been anything less than excellent. On the right hand side are the navigational elements. the links to her other photographic projects, stories, archives, gear (t-shirts, etc.), as well as other links of interest. She’s gone the smart route here, and kept this to a minimum and added a ‘more…’ link where needed, which takes you to an extended list. The long list of links can get crazy on the main page and make it look a little messy. Just look at my list to get an idea of what I mean, hehe.

Next is the color scheme. It’s probably the closest you can get to silver white and gold on the Web without being gaudy. Nothing is in your face screaming “CLICK ME!! CLICK ME!!”. Even the hover color is perfect. Nearly any other color would stand out too much against the other colors. If you check the code, you’ll notice even the main text isn’t black, although it’s close. Actually, I don’t think there is a thing that is black, except the black and white of her photographs. Very reserved. The overall look says class.

The logo. Ah yes the logo. The wild and crazy ‘Harrumph!’ being held in check by the reserved and upstanding ‘HARRUMPH!’. Oh, the duality of it all!. Did she plan that? We may never know. It’s definitely a recognizable logo though. And just so you know, my version is meant to be a pale imitation, so hush up!

Then of course there’s her tag line—[ Don’t let the name fool you, baby! It’s all about LOVE ]. It is all about Love isn’t it? Very cool.

And there you have it, one of my favorite layouts. This was fun. Tune in next time when I’ll be tackling the elusive zeldman in the wild. That master of the 2 pixel, black border. The guy who has spawned more clones than a Jurassic Park experiment.

A preview of what’s coming.

Ever just been so totally out of ideas that you’re straining to do anything but finish working on the project at hand? Good. Well that’s me right now.

Yes I know this design sucks right now, I’m in transition, and I need sleep. Maybe I’ll make it all green for St. Paddy’s Day; then who’ll be sorry?

The RIAA has no idea what they are up against. The Napster community isn’t going to go anywhere, and they won’t let Napster go anywhere if they can help it. You’ve got a bunch of executives trying to face off with a bunch of programmers and tech geeks and web-savvy teens. Wanna guess who’s gonna win this pissing contest? Nothing that Napster does or the RIAA forces them to do is going to stop this. It’s too late for digital rights management. How many CDs do you think are already out there that have no controls on them?

Getting tired of Napster? Try Aimster or Gnutella. I really like Aimster, Johnny Deep’s stand in this whole thing.

I was at the gas station tonight, filling up at the self service pumps, when I noticed something odd and made a weird association (excuse me if I get a little inappropriate here).

Getting gas is alot like pissing in a urinal in a public restroom (there, I said it).

Before you get out of the car, you let anyone who’s with you know that you’ll be right back. Then you head to the pumps. There’s usually at least 2 side by side. And usually not all that clean. You’ve hopefully picked out a nice one. Next, you have to yank your hose out, point it where the fluid is gonna go, then stand there and wait ’til you’re done. Everyone pretends not to look at each while they’re pumping, but they’re all scoping out each other’s car and trying not to notice how much gas the person next to them is getting, but you know they want to know. When it’s all done some give it a few taps, some just wres

You then have to see the Men’s Room attendant on your way out. He’s got everything you need all nicely laid out for you. Everything from cologne to condoms. You get any last minute items, leave him a tip, and head back to your car. The only thing I see missing is the mirrors. Ah, but then again nearly everyone checks themselves in their rearview the minute they get back in their car, so maybe we don’t need more mirrors. I’m still amazed at the parallels between the 2 experiences. Maybe it’s why guys have an easier time at Gas stations, who knows?

Ladies, take special note next time you get gas. You can get a feel for what it’s like to pee standing up. And also what goes on in the Men’s Room.

Never EVER try and study javascript, trigonometry and algorithms, while drinking. I am now just a sloppy mess, whimpering in a corner muttering something about gods, and lightbulbs, and trying to make my eyes focus again.

Meanwhile, the sign I bought today tells me to do the opposite. God I wish I was a robot!

Did you get a ballot? I didn’t get a ballot.

Ok, here it is direct from the RIAA’s big mouth. Scroll down till you get to the following paragraph:

Official “Songs of the Century” ballots were sent out to music lovers across the country. The hundreds of voters came from all walks of life including local, state and federal elected officials, the music industry, teachers, members of the media and students. Participants were asked to keep in mind the historical significance of not only the song, but also of the record and artist.

Wow, hundreds of voters huh? 6 Billion people in the world and they only sent out ballots to a few hundred people to vote for “Songs of the Century”. Good work guys, now go catch another music pirate why don’t ya’!

I have to find out what the criteria was that the Recording Industry of America, and the National Endowment for the Arts used when they compiled this list.

I mean c’mon, Achy Breaky Heart by Billy Ray Cyrus is a Song of the Century?