The Wayback Machine - http://web.archive.org/web/20040327075335/http://www.mezzoblue.com:80/

Standards-Based Education

March 26, 2004, 10AM PST

In a former coal town on the western Canadian coast, nestled in a protected harbour which makes the surrounding area a boater’s paradise, inaccessible from mainland North America save for an hour and a half ferry ride, I received one of the most encouraging signs in a while that standards-based web design is really catching on.

I had the absolute pleasure of spending a leisurely hour ferrying across the Georgia Straight one morning earlier this week to Malaspina University-College on Vancouver Island, then running an afternoon workshop with Jim Rutherford’s Digital Media class. And I’ll say this about the experience — it’s positively uplifting to hear that there are instructors out there who have shelved old-school design methods in favour of standards-based design, and are seeing their students respond in an overwhelmingly positive way.

New this year, the course syllabus has started to heavily promote standards-based design, and as the semester draws to a close it’s proved so successful that a complete 3-credit web standards class is in the works for next year, as well as a heavy bias in this direction across the rest of the course.

This is just fantastic news. I haven’t had my finger on education’s pulse in a while but I mistakenly assumed it’s as bad out there as you’d expect. Instead we have shining examples like Malaspina leading the way, and molding their students for a better web of tomorrow.

It was an honour to go and talk to a class who I suspect could have shown me a few new CSS tricks. (And look at their portfolios, wow.)

comments off

Over-Exposéd

March 23, 2004, 10PM PST

too many OS X windows

Those aren’t Post-Its. That’s Simon Willison’s Exposé setup. God bless OS X.

Reply (22)

The Price of Theft

March 19, 2004, 1PM PST

The relative ease of stealing someone else’s CSS-based design has been at the top of my radar over the past few weeks. I really don’t have the time to write the analysis I’d like to, but suffice it to say that nobody wants this issue to go away more than me, and no one realizes yet how much of a problem this is going to become over the next few months/years.

What I want to draw your attention to is that, due to a few reasons revolving around re-use of his design, Andy Budd has asked me to remove his popular ‘sub:lime’ design from the CSS Zen Garden, the former #046. I have complied.

Andy’s feelings surrounding re-use of his work have been voiced by more than one contributor, and while many are open about allowing others to modify their base design, some are not. There definitely seems to be a price to the success we’re enjoying, and because there are so many contributors, each one is going to have a different attitude toward paying that price. Which is to be expected, but I have no idea how to cope when I’m caught squarely in the middle.

I’m not at all happy that this was necessary though. It’s the start of a slippery slope, and it’s going to cause me to re-write submission requirements yet again. I’ve been very sensitive toward each designer’s needs throughout all this, but I now understand quite a bit better why contest organizers and media promoters require participants to sign waivers.

There’s a balance here, but I’m having trouble finding it. The Garden has to be open, which means a small percentage of bad eggs will abuse that openness. The designer’s rights have to be protected, but I don’t think it’s quite fair to the rest of us for one to ride the success for a while and back out when it gets messy.

Lest we all walk away from this with a bitter taste in our mouths, I’d like to note that while I am incredibly disappointed in those re-using his work in commercial situations, I’m not angry at Andy himself. He has made a decision for his own work that, given the terms when he submitted, I guess he’s allowed to make.

But I would like to encourage him and others to realize three things. A more restrictive license won’t stop any of this from happening, since those who set out to rip off others’ work will do it regardless of copyright. And running away from the problem isn’t the solution, because when you’re producing design work, it will get ripped off sooner or later. Trying to hide it under lock and key deprives the rightful audience, it takes money out of your pocket (how can you make a living off of design work that nobody sees?) and it leads to the scary groupthink of the music industry. A slippery slope indeed.

Finally, the group of people seeing a design who then decide to steal it are really rather small. Don’t be fooled by the blind spot — for every 1 person who steals your work, 15 or 90 or 700 others have seen it and been inspired to create new and fresh work of their own. You may not ever hear from them, but they’re out there, and they’re the ones who suffer for it.

Don’t let the bastards bring you down. They can steal one of your works, but they can’t steal your soul. Keep on creating because there’s only one you, and the world is dimmer without your creative energy.

comments off

Hi-Fi Design with CSS

March 18, 2004, 12PM PST

And at last, the transcript of my own panel on Monday. Enjoy!


See, the way I see it, CSS is about font control. You can manipulate things like your leading, text color, and font face. That’s about all it gets you.

Well… The old school method of thinking (old school being as late as last year for some, though I’m thinking more of 1998-era methods) was that CSS was useful for typography, and that’s about it. I was guilty of that mindset myself for years. In fact, it was embarrassingly recent that I realized that hey, you know, this stuff can do a whole lot more.

I’m a graphic designer, image is important to me. I need things to look just right. I’d been hacking with tables and spacer GIFs for years, so I knew the mechanisms of that inside out, and all of us who had to put up with that way of building earned a badge of honour as far as I’m concerned. But I also think it’s the finality of those methods that’s holding the web of today back.

See, once you get comfortable in a way of thinking, you rely on it. I knew how to build a complex set of tables to hold a site together across all the popular browsers; I had no idea how to achieve the same in CSS for the longest time. That was a stumbling block for me, because when you have a deadline you go with what you know. And that’s going to keep holding back those learning CSS.

But let me tell you, once you get over that hump, it’s pretty cool stuff.

There’s no question about it, this is the future of web design. I’m not going to bother going into a huge list of points about why you should use it, plenty of others can and will do the convincing for you. Suffice it to say it’s becoming more common on large commercial sites, and the visual appeal of the new work being built in CSS these days is unrivaled.

But that’s today. The problem I saw in 2003 was that we really didn’t have many example sites. A few major commercial sites like ESPN.com and Wired.com (thanks to Doug, of course) had taken the plunge, and this was absoluetely great for business examples. And they were both well-designed, but they weren’t the sort of visually inspiring artisitic free-form sort of work that designers could really latch on to.

Something to realize about us freaky artist types is that when we’re looking for inspiration, we really don’t care about things like usability and successful business targets and fast download times, and all the sorts of things you just HAVE to do when building commercial sites. That’s work. We want play! And when it came to CSS, there wasn’t much play around at the time.


So I got to thinking. What if there were a site that did all that, and demonstrated the flexibility of CSS, and also highlighted the benefits of using it, things like accessibility and degradability and so on? And, you know, what if, by the same token, it were to be approached as a collaborative effort so it’s not just one designer’s ego-stroking, but a community effort that displayed the multiple takes on a single source document by a bunch of talented people?

Well, we all know what happened then. Enter the Zen Garden. I’ve been maintaining this site for almost a year now, and I’ve seen some phenomenal design work added.

The basic idea here, of course, is that I’ve built a very simply marked-up XHTML document and that every submitter has used this exact same file as the source code, and contributed only a CSS file with a set of images to radically change the design. Take a look through these next examples — [1] [2] [3] [4] — and keep in mind that the only thing changing between each design is the CSS.

I guarantee that’s all that’s changing too, because I’ve made it physically impossible for each submitter to alter the XHTML.

Let’s think about this for a second. These examples are all using the same base XHTML. And because I did most of the legwork when building that markup last year, every single one of these designs, and the other 200 hundred odd on the site, are highly accessible. They work just fine in older browsers and mobile devices and some screen readers because the presentational layer, that is, the CSS and images that go along with it, it’s not being served up to devices that can’t handle that. All they see is unstyled markup.

What you’re seeing here is of course, is the bare bones XHTML without any CSS applied. It’s ugly. No one wants to look at this for very long. Thanks to the plethora of designs on the Garden, we don’t have to.


What’s really struck me about some of the work being submitted is the wild variation between individual approaches. It’s inevitable that when you ask two designers to submit their interpretations of a single theme, you’ll get four or five responses. In this case that’s more like hundreds and hundreds of responses, but you get what I mean.

There are a couple I’m particularly fond of, but of course my tastes vary as much as anyone’s — what’s nice is that there are so many to choose from.

Not So Minimal, Dan Rubin
(Shared anecdote about pushing minimalism, process for improving Dan’s [beautiful, but too minimal] original design)
Door to My Garden, Patrick Lauke
(oh man, that’s nice. Interesting effect - fixed position background.)
Blood Lust, one of mine
(Want to clear the air about this one. I like it, most don’t, went for Futurist style/patterned GIF dithering… it does it for me)
Maya, Bernd Willenberg
(oh, you haven’t seen this one yet have you? Sneak preview! See? You got your money’s worth) (further note: will have this one added soon)
This is Cereal, Shaun Inman
(great theme, well-executed, and cool menus [which won’t work in IE of course])
Oceans Apart, Ryan Sims
(oh, how I wish this were one of mine. wow.)

So on that note, here’s what I want you to take away from this.

If you’re a designer who hasn’t explored advanced CSS yet for one reason or another, do! The world’s moving in this direction, and it makes for happy clients. You might be surprised at how much quicker a site can come together.

If you’re a designer just learning how to build with CSS now, don’t worry. It gets easier. It’s a tricky thing to learn, but once you have it down, the days spent cursing browsers that don’t cooperate get fewer and far between. I promise!

If you’re a designer who’s been using it for a while, uh, where’s your Zen Garden design, huh? I’m waiting.

If you’re a company working with a designer who doesn’t use CSS, ask them to start!

If you’re a company working with a designer who does CSS, you’re probably not paying them enough. (Just kidding. Or am I?)

Anyway. The benefits of using CSS are being proven time and again. It’s a great tool in a designer’s toolbox, it’s available now, and once more start getting their mind around it, we’re going to see some more amazing work. Can’t wait to see the Zen Garden this time next year.

Reply (31)

CSS: The Good, the Bad, the Ugly

March 15, 2004, 11AM PST

I took pretty aggressive notes during the panel that came after mine. Enjoy!

(You can tell I was paying more attention to the two people who were talking about things I hadn’t heard much about before; less notes from their portions. Both were very good.)


Tantek Çelik
  • Good CSS: standards
  • Bad CSS: abuses, misuses, amazing screwups (tables poorly mixed with css)
  • Ugly CSS: necessary: hacks, workarounds, wishes they never existed

  • CSS2.1 is now a W3C Candidate Recommendation: this is big news. CSS2? forget it. 2.1 incorporates changes, errata, adds the colour orange.
  • CSS2.1 reflects reality of current implementations
  • CSS validator updates, updates for validating against CSS3
  • coming up: dozen CSS3 modules, and as they get published, pieces are being implemented

  • Tantek: I’m best known for opening Pandora’s box for CSS hacks (thanks to the Box Model Hack).
  • It was necessary, had no idea it would propogate as far as it did.
  • Philosophy: avoid hacks if at all possible. Problem is that it builds a mystical voodoo magic around code. Good for movies, not good for work/tech. (DS: Good point.)
  • Given that, if you can’t avoid them, the fewer you can use the better. (gave examples)
  • Further hacks are from content, the better. Hacks in CSS, they come and go — in markup, they’re there forever. (ie. they belong in the CSS, not the markup, if you have to use them)
  • Idea: Build content clean, build CSS clean, import separate hack stylesheet (isolate problems today, remove them tomorrow when they’re not needed)
  • Should have known better, but despite it all, introduced new hacks between last year’s SXSW and this year - IE5Win. SprintPCS used it 40 days after introduction. Incredible. (DS: band pass, I think?)

Eric Meyer
  • Here to point out errors that people fall victim to, but to help (not to make you feel bad!)
  • (explained favelets that he’d later use, ran through a couple — turning on borders for tables, inline style, un-ALTed images, and font tags among others, to visually demonstrate bad markup) (DS: clever idea.)

  • Showed LockerGnome redesign. Highlighted tables, missing alt text overuse of classes. Ouch
  • Showed new working draft, ran bookmarklets, much better job.

  • Showed WWW Conference. Not created by W3C, created by committee. been doing it for a decade.
  • Turned on tables — plenty of them.
  • Turned on alt highlighting — not many ALT attributes
  • BAD alt text on some elements
  • Some font elements.
  • bold element, inside font element, inside inline style element. Yikes.
  • doesn’t come close to validating
  • didn’t bring it up to laugh at them, “ha ha, what a bunch of jerks”
  • showed difference between old one and new quick revision ny himself — page weight dropped 60%
  • (had to admit: bashing low-hanging fruit)

  • debunked a few arguments — code is not religion. most important thing is that it’s about the content. Doing it this way allows good accessibility to more devices.
Douglas Bowman
  • Image replacement - in the beginning, it was good. We all believed it was good. (listed benefits)
  • Shows original FIR example, explains origins of FIR (Fahrner)
  • View source, simple h2 element and span
  • Why not use images? Listed reasons
  • Downfall: inaccessible to certain screen readers. Can’t count on display: none;
  • Alternatives: Phark, Gilder/Levin (touched on CSS on, images off, showed example)
  • Experimental techniques good, push web dev forward. Keeps W3C on its toes, feedback loop for screenreader manufacturers, want it to work.

  • CSS3 has a good new method. Generated content.
  • New ‘reader’ media type (thanks Joe)
  • Avoid use of original FIR — officially deprecated as of today
  • Keep in mind appropriateness

  • Inspiration, or RipOffation? Discussing ease of CSS ripoffs, viewing source
  • + it’s how we learn
  • + view source, shows you how to build for the web, want it to continue
  • - Design theft becoming increasing problem
  • - all design in one file, you grab that, you’re set.
  • Showed examples

  • Ran out of time; didn’t get to discuss dual hover method. Look for it on stopdesign.com
Brian Alvey
  • publishing system (SiliconAlley maybe?) in 1997 — used WYSIWYG control, basically using Word on a web page, nice.
  • source produced is kind of crappy
  • IE had control all along
  • Mozilla just caught up, now adds its own tool.
  • if you’re in IE-based one, it adds garbage markup
  • when page is sent to a server, it’s easy to strip out and convert something
  • Mozilla’s handling is a nightmare. Span span span.
  • Who’s building a CMS on these tools that spits out valid markup? Not many. A few. They’re going to heaven.
  • listing different types of controls (Java-based best, but worse to load), Flash doesn’t count (not truly WYSIWYG)
  • easier to use other people’s - if you know enough you can customize them
Kimberly Blessing
  • Met Tantek through W3C group, who wondered what the hell is AOL doing here?
  • many web developers in AOL, representing what we all do with CSS
  • target latest and greatest, but have to worry about user with Mac OS 9 on a version of AOL they no longer support.
  • to support that wide list, you need to use hacks
  • interested in moving forward
  • examples: different types of search results are displayed with different styles (cited Zen Garden, whoo-hoo)
  • walked through marking up a featured piece of content (simple: an h3, an img, a few p’s, and some ul + li combos)
  • showed a grid, placement of blocks of content
  • not sure I understand it, but it looks very cool, and totally database-driven
  • showed different layouts given the CMS, all CSS-driven
  • flexible design given different types of content/features

Reply (11)

SXSW 2004

March 13, 2004, 8AM PST

To spare those not here this year, I’ll contain my entire SXSW experience in this post and just keep updating it. Chronological, with the most recent events up top. I expect it to get lengthy and full of photos, so you’ll have to pardon the cut, but I’m sure you know what to do.

I feel so blog.

comments off | Read This Entry…

CSS Problem-Solving

March 10, 2004, 11AM PST

After spending an hour debugging CSS with Tim Bray this morning, it occurs to me that the most valuable skill to possess in the maddeningly complex minefield of today’s browser landscape isn’t, in fact, knowing which browsers do what to which properties. It’s problem-solving.

Reply (41) | Read This Entry…

See all of this month’s posts…