CSSquirrel A look at web development and web design by Kyle Weems

Today’s comic finishes (finally) the An Event Apart “storyline” that starts here, and has part #2 here. It features AEA speakers Andy Clarke, Nicole Sullivan and Ethan Marcotte. It also features Naepalm, the chinchilla alter-ego of Janae, one of my fellow Mindfly Web Studio designers. The comic also has a brief cameo by everyone’s favorite archaic browser complication: the dreaded hasLayout.

It’s been a long journey to crank out these three comics, which highlight some very important points. First, continuity in a web-design commentary webcomic is difficult at best. Second, that cheese tidal waves represent the best of all possible worlds. Finally, that An Event Apart: Seattle was an awesome extravaganza and Janae and I are still trying to squeeze out all the drops of precious information we absorbed into Mindfly’s waiting arms.

One of my favorite presentations was Ethan’s Dao of Flexibility, which discussed adaptive layouts and fluid grids in detail, opening my eyes to the real power of the world of media queries. I’ve been tinkering away in my acorn-filled lair since the conference, working away at a new design for this site that harnesses these arcane techniques for my own dark purposes. From time to time, I have to pause and laugh with evil glee.

Thanks, AEA.

We’ll now return to my regular schedule of making fun of HTML5 politics and Opera.

Today’s comic, the first in a small An Event Apart related storyline, features Andy Clarke, Nicole Sullivan, Pete LePage and Naepalm in a future where rogue browsers must be “retired” by browserrunners.

It touches on what people may find hard to believe: Microsoft (like us) wants IE6 to die, already. In less than two hours after I post this, Pete LePage is going to get in front of the AEA audience and tell us that very thing.

I’ve got to get back to listening to more awesome speakers. Enjoy! (And if you’re at AEA, feel free to say hi to the guy in the CSSquirrel shirt. I don’t bite.)

Today’s comic is a bonus, bringing the count for this week to a nearly unprecedented two. I know, such generosity on my part staggers the mind. The comic also seems like fodder for some form of novelty t-shirt. I’ll get right on that.

Like most people that make websites, I heard of the funeral held for the cantankerous, ancient and malformed IE6; a funeral doubtlessly inspired by Google’s announced discontinuation of support for IE6 in many of their products this month. Like even Microsoft itself, I’m glad that there’s another nail in the coffin of this undead browser that still clings to the computers of many, many web users.

I realize that, funeral or no funeral, IE6 isn’t gone. Not yet. There’s entirely too many people still using it, making it unsafe to simply pile in the dirt over its head. But for me and my amazing coworkers at Mindfly Web Design Studio, it’s as good as dead. Seizing the opportunity provided by Google’s announcement, I pitched an idea taken from one Andy Clarke, Brit rockstar: Let’s stop explicitly supporting IE6, and feed it instead a universal, generic stylesheet for all sites. Those users who visit a site with IE6 will still get what they’re looking for, just in a more modest package.

Being hip designers on the cutting edge of awesome, they naturally all agreed with me. The hours once slavishly chained to the moribund beast in the woods now will be devoted to more fun tasks, like convincing clients that random pictures of their children will not increase online sales of tractors.

Today’s comic’s title is a reference to the Battlestar Galactica equivalent to “Amen” for those few of you not as deep in the sci-fi geek rabbit hole as yours truly. (This came directly from a great idea by Shaun Inman regarding “Six” that I failed to implement due to time.) It acts as a solemn affirmation of what’s being spoken.

So let’s get solemn: IE6 is dead to me. Let’s move on without it into the modern era web. So say we all.

Nothing keeps you more humble in your industry than learning an important job-related detail, then discovering shortly thereafter that everyone else has known for years. For the past few months I’ve been experimenting with “OOP CSS”, taking advantage of mutliclassed elements to reduce stylesheet size and increase CSS reusability (after attending this presentation by Nicole Sullivan at Web Directions North.) Within the past couple weeks, I found some major roadblocks to using this technique with IE6 when being incautious about how the rule descriptors are ordered: IE6 majorly bungles multiple-class descriptor support.

To get a better view of what I’m speaking about (assuming you’re not already familiar with it), go check out the post I wrote at Mindfly about this very issue: Web Developer Weems and the Case of the Multiclass Bungler (AKA IE6).

When my analytics started showing IE6 hits, I realized two things.

1. Even people following links from a place like meyerweb.com (thanks for visiting!) may still be using the dread bile beast of Redmond (Internet Explorer 6 for those not following along).

2. They probably want to be able to see/use the site like everyone else.

I needed to bite the bullet and get that particular “browser” (if you can call it that) to render the site functionally, since this page is crawling with PNGs. Unfortunately, after a couple of hours of tinkering around with Dean Edwards’ IE7, things hadn’t improved much. I got the transparency I needed, but a lot of unusual bugs crept into the header (clipped elements, missing buttons, unusable navigation, etc).

So since I’m expected to work on client sites at work and I was out of time, I made a quick fix (using conditional comments and a ie6-specific stylesheet as I describe here) and for the moment the IE6 version of the site has GIFs. Ugly-edged GIFs. I could clean them up, but I think I’m going to take a page out of Andy Clarke’s book and just do a completely different look for visitors with IE6, like he does with Stuff and Nonsense.

I suppose a design that was nothing more than a giant mother nagging you to upgrade your browser wouldn’t quite be appropriate.