I finally finished reading Jeffrey Zeldman’s Designing With Web Standards, which has been a work-in-progress for my entire (extended) summer not because the topic is atrociously boring (because I find it utterly fascinating), and not because the writing is nausiatingly stagnant (because it is lively and viviparous), but because I have been busy living a million glorious lives since my feet touched down in Oregon five months ago:
Mountaineer, translator, chef, windsurfer, kiteboarder, snowboarder, gear technician, sales associate, rental manager, vacuum cleaner salesman, karaoke master, James Brown, town drunk, town crier, drummer, Sambaist, fencer, teacher, hiker, camper, climber, commuter, drinking buddy, pool shark, truck driver, shipping manager, squid-eater, dancer, traveler, friend, party animal, ventriloquist, author, scribe, photographer, male model, lunatic, bum, high-roller, geek and emo-doer.
Web designer is crammed in there somewhere, and even among these other pursuits I’ve managed to learn quite a lot. I must admit, over the last few months when my graphic design friends grabbed onto web design, and then wrapped their fists around CSS, I felt considerably threatened. I mean, I have a good eye for design and a good feel for usable layouts, but I’m no graphic designer. The new holiday splash ad for my windsurfing shop is the extent of my graphic design abilities. Nothing fancy, really, but it does look nice and gets the job done. The thought that a graphic designer could waltz onto the web design scene and pick up in a month the skills it has taken me years to develop; I found that t’ain’t to be a pleasant thought. I felt that to maintain my web superiority I would either need to take these guys to a super secret pizza party and dump them out of a moving van, or ultimately hire them to do my bidding.
But nay, I say. It seems that there is enough junk that is so web-specific that the only way to learn it is to do it. And do it. And call it names. And keep doing it until you can do it well. And I feel like I’m reaching that point. Take, for instance, the following nugget of code:
<html>
<body>
<div id="whopper">
<div id="header">
</div>
<div id="navigation">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
It doesn’t look like much, but it’s all the HTML mark-up I need to achieve any sort of design I want. No nested tables, no one pixel gif splints, no presentational junk mark-up. It’s what Brainside Out: The Cowboy Edition uses. It’s what The Adams Summit uses. It’s remarkably similar to what Big Winds uses (which, because of design constraints, had to keep a minimal table layout). Deep down inside, all these sites look the same. All bathing apes wear no clothes, or something like that. Of course, more complicated apes will require more intricate mark-up, but for my purposes these few lines give me all the ape-control I need. It has taken me years of evolution to reach this stage of sophistication in my web design, and after years of experimentation, research and cursing I have finally produced a delicious drop wisdom. A few million more drops will fill the basin at the Oracle of Delphi.
And now I’m excited. Excited because I realize I will not be immediately out-evolved by my graphic design counterparts, but am in a lovely situation where we can share vital information about the two mediums to hone our skills, both at home in our respective bunkers and abroad in dirty razor-wire trenches. There’s just too much to know in web design, too much stuff that doesn’t make total sense, for someone with l33t Photoshop skillz to just come in and take the place over. You trust your plumber to fix your shower and your mechanic to fix your car, and not vice versa, unless your car is a mobile home that has a shower and the shower is broken and needs a good plumbin’ and all your mechanic can do is look down the drain and whistle, “Hoo, yeah, that’s gonna cost ya.”
And it’s the things that don’t make sense that are the real kicker, that take up the most time and cause the most hair loss. I fixed a huge problem with the shop’s website after I learned about MSIE’s whitespace parsing error. As it turns out, when Microsoft built a web browser to compete with Netscape Navigator (and we’re talkin’ 3.0 here, people, circa 1996), they moved to emulate all the behaviors of Navigator… the good, the bad and the ugly. Navigator incorrectly parsed whitespace in HTML code, messing up the way a page is displayed depending on how the code is spaced out.
This:
<table>
<tr>
<td>
<img src=”punkroolz.jpg” />
</td>
</tr>
</table>
While lovely to look at and lovely to hold, will display differently than this:
<table><tr><td><img src=”punkroolz.jpg” /></td></tr></table>
…even though semantically they both say the same durned thing. Now, this shoudn’t be a problem in the ripe old years of 2003, except that in Internet Explorer 6 Microsoft still hasn’t fixed the whitespace parsing error. I spent days mucking around in my code, playing with table heights and vertical aligns and other cheap tricks to get two images to line up all snuggle-like in IE, only to finally learn about this completely nonsensical error. Finally today, after making further attempts at work to maximize screen real estate, I deleted all whitespace in my code and rendered it darned near illegible, and it still didn’t display correctly in IE6. I threw up my arms (like, threw them up in the air, not vomited them from within, yo) and stomped around the shop. Soon enough I came back to it, tried something still more drastic, and that cleared up the problem.
What did it take? Originally I had coded my comments thustly:
<– begin header –>
So I changed them to this:
<–begin header–>
And bam. Snuggly images, just like that. What’s more, you know the mad, mad spacing of the navigational buttons here on the left menu? How it appears that they’ve got restraining orders on them when viewed in IE? How I was rortin’ and snortin’ about that when I released this redesign? I’m almost certain this is due to the whitespace parsing error.
And if I wasn’t about to start on the next book in my line-up, I would fix it right now.
