At least one of which is the entire lack of kangaroo steaks.

My apologies to the vegetarians among you.

There’s two non-restaurant related points to the comic. The first is that almost everything I know about Australia I learned from Crocodile Dundee. Which means that large knives, boomerangs, and poisonous animals are everywhere. The second (and more relevant) point is that I am more than a little annoyed at the task of vertically aligning text with CSS. And clearly, John agrees with me. But, naturally, when he discusses the point it sounds so much cooler because of that dreamy Australian accent.

Let’s get to it. CSS has been around in some shape or form since, what, 1994? And most of the early web was all about text. Red text. Blue text. Flashing text. Marquee text. Text that was occasionally on fire with a sword going through it. Epic, taste-shatteringly bad text. In the entire intervening generation since, why has nobody in a position to do something about it said, “Hey, if we want to vertically center more than one line of text… how do we do that?”

Really, why? How wild and crazy is the concept that you may want to vertically align a paragraph of something in the mouth of a giant robot, or otherwise arrange it delicately between two slices of bread?

I’m aware that I can center text vertically inside an element that’s been given display: table-cell. And when the need arises, I’ve even used it. But it leaves my mouth tasting almost as bad as it did the day I chewed on a tiny blue plastic donkey I found in the playground when I was five. It’s the kind of rancid, oily taste that ruins your meals for the next several days. No, really. Kids, don’t chew on blue donkeys.

What if I want an inline-block? What if I don’t want all the behaviors of a table-cell? What if I hate tables with such a passion that I’d rather eat my meals while standing rather than bring back memories of table-based layouts with either using a CSS style that imitates them or eating on a wooden surface that shares a name with them? Huh? What then?

Well, in such a circumstance, I believe I’d be screwed.

I’m not entirely sure how necessary it is to have a Marquee module in CSS3. Don’t get me wrong, panning text is… er, hot… but along with all the whiz bang animations that CSS3 brought us, can I please get something that makes me capable of vertically aligning some bloody text in a bloody parent element with a single bloody style? Especially without invoking tables?

Thanks. Loves and kisses.

P.S. John Allsopp is a nutter. I say this, because he’s running a five week online course, HTML5 Live With John Allsopp, over at SitePoint. My evidence for his insanity is that this course contains 8 structured lessons, 2 Live Q&A sessions, practical exercises and a yak! All for under $10. Ok, it doesn’t have a yak. But it has the rest, and looks to be an in depth look at harnessing HTML5 hotness today and tomorrow (markup, native audio and video, canvas, ARIA and more!)

It’s a crazy good bargain. Go take advantage of it.

When I was first hired by Mindfly in 2007 I was not what you’d call “web standards aware”. Upon seeing the table-based layouts, font tags, and massive collection of inline-styles that stampeded through my pages like wild buffalo, grown men would gnash their teeth and wail in torment and mothers would hide their children.

It only took a few crying infants for me to realize something needed to change if I wanted to keep this career. My infovore nature led me to consume as much information on the topic I could muster, starting with Andy Clarke’s Transcending CSS and continuing through dozens of online tutorials and references. Learning the errors of my past, I spent a bit of time quietly taking my old sites out to the woods, instructing them to dig their own graves, then whacking them with a shovel before burying them for all time.

After the evidence had been destroyed, I went about trying to make compliant, pretty sites using the best practices in HTML and CSS. By 2008, I had friends who thought making website was the bee’s knees, but they didn’t know where to look for learning CSS, etc. At that point my bookmarks of handy sites had grown enormously, so I heartily recommended several.

One that I mentioned time and again was the Sitepoint CSS Reference, which was (to my knowledge at the time) a very complete, useful reference to the wonderful world of CSS. It even included tasty tidbits about CSS3 support. The main reason I sent each person who asked to this reference was explained in Sitepoint’s announcement:  “…the reference contains a bunch of features that make it stand out from the pack — things like cross-browser compatibility charts and user feedback to ensure that it is accurate, up to date, and best-practice. If you’re building sites with CSS, this is a reference you’ll keep coming back to again and again.”

With the speed at which this industry changes, who wouldn’t want access to a constantly updated reference that even incorporated outside feedback?

There is a problem, unfortunately. As near as I can tell, the reference isn’t updating. Since its launch, it seems to be sitting still, failing to modernize its information as browsers march on. Every single browser on their compatibility list has had major updates since its launch, putting much of the CSS3 support information well out of date. Never mind that Google Chrome has been out for quite a bit of time now (as the Internet sees such things) and has no compatibility information present despite it’s higher browser share than Opera in most markets.

In a book, this situation is a necessary reality. Books, by their static nature, are out-of-date typically before they’ve even been published, requiring later editions, etc. But for a web-based reference, which claims specifically to have the benefit of staying up-to-date and incorporating user feedback, this isn’t terribly cool.

For me, the situation is exasperated by their promise to incorporate feedback (or even claiming to do so) when they (at least in situations I’ve experienced) clearly are not. To back my claim, I’d like like to direct you to my own experience I’ve had, which I’ll call Exhibit A. If you examine the page on CSS3 Attribute Selectors, you’ll find that it erroneously claims that Internet Explorer 7 completely fails to support these little gems.

I’m no IE fan, but I can tell you my friends, that this is a falsehood. And because I was foolish enough to take that advice at face value (who doesn’t trust Sitepoint?) I created IE-specific workarounds in a project where I first included these selectors, workarounds which ended up costing me a decent chunk of time. It was only later that I decided the best experience is personal experience and I actually tried the selectors in IE7, only to discover that they work perfectly fine. I’d wasted time (translate that: money) fixing a nonexistent problem they claimed existed.

Not being the type to hoard information, I shared the fact that they were mistaken in a comment on May 2, 2008, complete with a link to a test page to confirm that I wasn’t full of hot air. (The old test page has disappeared, so you can see what I’m talking about if you check this test page in IE7). Eventually they marked that they’d incorporated my comment into the article… only they hadn’t. It still incorrectly stated IE7 support didn’t exist. Sometime much later (aka, this year), I commented in annoyance at the mistake again on Twitter. They responded multiple times over Twitter to me, asking for clarification (which I gave) and then promised to update their Reference (which they didn’t).

That was a couple months ago.

Today’s comic shares my view on the so-called Reference, albeit in a somewhat abstract sense. So let me make it clear: I don’t think the Reference is what they claim: a reference. Rather, much like René Magritte’s unpipe it is not what it appears, merely the image of it. The unreference, if you will, is something that claims authority and completeness but increasingly lacks both as time moves forward.

One erroneous page isn’t worth tearing down their entire reference. However, with a complete lack of modern CSS support information on every major browser, Sitepoint’s “up-to-date” CSS Reference has become largely useless as a source for web designers living and working in 2009.  I’m upset at this, because I sent literally everyone I knew with an interest in learning CSS to their site, saying “Hey, these guys know their stuff.”

Now… well, now I tell people to avoid it. I’ll repeat that for anyone reading: Don’t bother. They mean well, but they’ve failed to live up to their mandate of keeping updated. In March, when I’d commented (again) on my disgruntlement with the lack of updates, I received the following pair of tweets from Kevin Yank (@sentience).

April 6, 2009 4:19pm: “What erroneous compatibility info did you find? We are planning to refresh the Reference for the latest crop of browsers in May.” (after which I gave a summary).

April 6, 2009 4:50pm: “Thanks! Will get that corrected ASAP.“

It’s July now. I think we may have different definitions for “corrected” or “ASAP”.

In particular, though, I’m sad that I missed Andy Clarke’s “Walls Come Tumbling Down” presentation (warning, link goes to a very long presentation transcript.) He expressed a good deal of nervousness about how the topic would be received, which implied it was going to be pretty eye-opening considering his usual bravado. It’s something I just had to see… if I had the funds for traveling, attending, and food and board.

As I don’t, I didn’t see it. Which is sad. Fortunately for me, he posted the transcript and slides online (see link in prior paragraph.) It’s a long read, but it’s worth it for every single one of you to go take the time and check it out. It’s good. It’s great. It pushes on a lot on updating the web design process to reflect not only the state of the modern web, but also the state of the modern economy. It’s so good I wish I could build a time machine, go back to earlier this year, and do the presentation myself to sound as clever as he does.

My short-lived attempt at building a time machine ended when I discovered that DeLoreans are slightly beyond my means to purchase. So instead, I had to content myself with creating a 80’s themed comic that portrayed my agreement with what Andy is preaching. I think today’s comic proves two things: 1. Andy Clarke would probably fit in quite well with the pastels and whites of undercover Miami cops and 2. Some things can’t be built with just a picture.

Let me focus on that last one in more detail, because it’s something I’ve encountered in my own career and talked about before, but keep encountering.

In the example listed in the comic, you can’t expect a speedboat to be built from just a drawing. By the same token, there’s a vast majority of products that require a design that is more than just an image. This is something we accept as common sense in our everyday lives. Have you ever had a home built based only on a picture some guy drew, rather than blueprints from a contractor? No, of course not!

So why do we expect modern web sites (which are more often than not actually applications) to be something your developer can make or your client can easily grasp with a static visual proof/comp? Yet, all too often, this is exactly what we show clients. We finish making a pretty picture in Photoshop set to just the right width, then get our clients to sign off on that. It’s then handed over to your developer (or whatever you’re calling the guy making the code) with little to no cues for how the site responds to a changing browser resolution, how it interacts with the user, etc.

As a result, an iterative process begins. The developer interprets the designer’s vision. It goes to the designer, who naturally will find issues caused by a disparity of vision on how the site interacts, or whether it has a fixed width, or whatnot. Then they mark up their preferred changes, and send it back. This goes on until the designer is happy enough to show the fledgling site to the client, who almost invariably will have a problem with it because it wasn’t what they imagined when they looked at the static picture they were shown!

So it gets revised… again.

Finally, it all seems well, until the client’s mother sees the site on their old e-machine running IE6, and they want to know why it looks different. Where are the rounded colors, the transparencies?

Time and again I’ve heard of this happening or experienced it myself. Why is it still occurring? The web is interactive. The web is different from browser to browser. The web is sometimes seen on a screen slightly larger than a postage stamp. We know this. In order to properly design for it, we need to move beyond habits we inherited from print.

Andy proposes designing in the browser, showing the client how it changes depending on a browser’s support, and how it might interact with different widths, etc. For some designers this could be a pretty radical step, as accustomed as we’ve become to using Photoshop’s powerful toolset. But on tighter budgets in an increasingly complex Web, we don’t have a lot of choices in the matter.

I could repeat Andy point for point, but let me just play the role of fan boy and tell you that he’s brilliant. He’s saying what we all understand: We have to change how we design for the Web. It’s even more crucial in this economy than it was a couple years back. Go read Walls Come Tumbling Down. Even if you’re not in a position to adopt all of his suggestions (or even if you disagree) you’ll come away from it improved.

Disclosure: The candidate I voted for won. This is the first time that’s happened for me. The following doesn’t involve the candidates, however. Also, this is a bit of a ramble.

America (and to a lesser extent, the rest of the world), I’m really sick and tired of extremist/fundamentalist diatribes fueling all our conversations. At some point, it became impossible to simply disagree with someone civilly on any topic. Instead, whether it was about tonight’s pot roast or the national election, if someone disagreed with you they were a damned, dirty, ape. Possibly a communist dirty ape or a nazi dirty ape, depending on what angle you were spinning. It’s become all too common for everyone from newscasters to tweeters (tweet people, what the heck do we call those) to literally go unhinged and accuse anyone they disagree with of being un-American, nonhuman, or worse.

What’s wrong with this picture?

I think the following image sums up part of the problem.

This is all too often how we’ve become accustomed to looking at our country, at an all or nothing us versus them breakdown. True, thanks to the Electoral College this is how our votes our distributed, but it doesn’t represent how America really is. Although the opinions, creeds, faiths, political affiliations, and other qualities of our populace vary in proportions from region to region, there’s no all or nothing location of “all us” and “all them”. For that matter, I don’t think there should be.

Our country’s strength comes from it’s plurality, as in the state of being plural, as in consisting of or containing more than one kind of class. It’s been there from the beginning, and it’s not some sort of outdated quaint concept in the 21st century. Yet there’s always the vocal minority that champion intolerance against “them”. Them is a pretty big category of bad guys, including but not limited to: Republicans, Democrats, Socialists, Rich, Poor, White, Black, Gay, Religious, Irreligious, Comedians, Foreigners, etc.

As in, all of us.

Look, I don’t agree with a lot of people on a lot of topics. But the best part about this country is that it is an open forum for all people of all stripes (all of those ‘bad guys’ listed above and more) can co-exist, be publicly proud of their various qualities and engage in open discussion about who they are and what they think. Sure, this means we’ll argue. But we’re stronger from the process, and there’s nothing un-American about the guy with the other view. Period. If there wasn’t a discussion in the first place, we wouldn’t be in America.

America isn’t a collection of blue and red states. It’s a collection of purple ones. Take a look at this:

Taking away geographic reference or the all-or-none colorization of the Electoral College, this is what America is really like. It’s a big, confused mix of different people of different views. And this year more of those people than ever before got involved in our free discussion and voted. Who cares who won?

So stop being intolerant. Stop assuming everyone else is horrible because they don’t agree with you. Because our country is founded on disagreements. Now shut up and eat some apple pie (which technically is English, not American, but I don’t think they’ll mind).

Seriously, why prevent that? I’d initially hazard a guess that it was due to technical limitations, but CSS3’s rgba colors don’t suffer from the same limitation. Too bad rgba colors aren’t universally supported yet.

Then again, neither is opacity.

-sigh-

I wonder if IE8 will support either, although frankly, if they’re going to step up to the big kid’s table, I’d rather see them implement rgba colors first.

I spent an ungodly amount of time yesterday trying to concoct a method to doing liquid column layouts without an extra wrapper element, and somewhere along the way my brain started hurting a lot. It keeps feeling to me that there’s somehow a way to trim the markup down to just the one element each per column, but it keeps barely escaping me. I was hoping inline-block would prove the key to this, but so far I’ve had no luck.

One of my thousands of permutations of CSS worked only in Opera (which I found odd), and another in IE (which didn’t surprise me, as it’s always ’special’), but as of yet nothing has produced what I desire for Firefox and Safari. Yes, I could get two elements to nest next to each other, yes I can get one to sit on one side of the screen at a fixed width. The problem is that although I can have the remaining column adjust it’s minimum size based on the width of the parent and otherwise be elastic, I couldn’t get it to expand to fill the width of the space on it’s own (rather than, say, because it has a paragraph inside it that pushes it’s borders out to fill the space it’s in).

I’m guessing there’s a reason the negative-margin layout (aka this) is still around.

I haven’t given up hope yet, but I’m beginning to hit a wall here and suspecting that it’s just not going to happen. So I’ll ask, has anyone  had any luck doing a two-column liquid layout design with CSS without resorting to a wrapper element for one of the divs (aka, standard negative margin layout)? To increase the difficulty rating, a footer would need to be beneath the columns (so you can’t just use absolute positioning) and the solution can’t use javascript.

Twitter is a fun, useful service. But if it allows itself to become a place where harassment (pretty lewd stuff, at that) is allowed, then I can’t imagine it’ll stay in use forever. Wake up, guys, you need to protect your users.

[Edit: Two new things I've learned since this entry went up. First, Arial is part of the Pownce team. While I won't say outright that working for the competition could have been a factor, it does bring the validity of the situation into question. Secondly, as Twitter team members stated, both sides of the story hadn't been told and they offer their viewpoint of the situation here. I don't know what to make of the situation, but it's clear that if harassment is happening that Twitter needs to follow up on their threats and ban such people.]

Let’s be honest here: Twitter isn’t the fittest boat in the ocean right now, with a tremendous number of crashes and slowdowns this week alone. What isn’t helping are twitter accounts following several thousand strangers at once. I myself just decided to block a new follower who was following over twenty-four thousand people!

Twenty-four thousand. That’s like me trying to keep track of what a third of my city is doing all at once. That’s just messed up. Seriously, even if that account is ran by a human and not a machine, he’s clearly not actually paying his attention to the feed.

So do some Twitter activism. Block stalker-bots (or stalker people) from your Twitter account. That’ll be one less tweet notification that their overworked server will have to deal with.