Adams and Clarke on CSS, the W3C, and Design

At Web Directions South 2007 in Sydney, I caught up with SitePoint author Cameron Adams (themaninblue.com) and renowned designer Andy Clarke (stuffandnonsense.co.uk), both of whom spoke at the conference. You can listen to this interview instead if you like.

Hi there! This is Kevin Yank from SitePoint, and I’m at Web Directions South 2007 in Sydney. This morning, I’m joined by two of the speakers: Cameron Adams, The Man in Blue, who’s a three-time SitePoint author, having recently co-authored Simply JavaScript, and also having worked on The Art & Science of CSS and The JavaScript Anthology. I’m also joined by Andy Clarke, renowned designer, and Andy runs his own design firm, Stuff & Nonsense, and recently wrote Transcending CSS, a coffee-table book that should be on every designer’s table. Guys, welcome.

Andy Clarke: Hi!

Cameron Adams: Thanks, Kev!

SP: Andy, your talk yesterday took inspiration from the world of comic books, and what they could teach us about web design, perhaps. Something I noticed that was conspicuously absent in the talk was typography. Typography — at least in my mind as a comic book geek myself — plays a big role in the art of comic books. Was that omission a conscious one? Is it a reflection of the state of font technology on the Web?

Andy Clarke: I think that’s an interesting question. There is a big issue surrounding fonts on the Web, and typography on the Web in general. But to answer your question specifically about the talk, really, there was only 45 minutes, so, in order to get everything in – and I could talk to you about comic books for several days without a break, as long as we had plenty of coffee —

SP: That’ll be another podcast, I guess.

Andy Clarke: That’ll be another podcast. So, really, it was a question of, you know, what to put in and what to leave out.

SP: Yeah.

Andy Clarke: Also, you’re always conscious when you put these talks together as to what type of people are in the audience, whether they’re web designers or developers. For a conference session — it’s different for a workshop — for a conference session, you’re always conscious that you don’t want to go too heavily down a particular …

SP: Right.

Andy Clarke: … a particular road in terms of design specifics, in terms of typography, so, try to keep it a little bit more general.

SP: Mmm. Well, if we could get specific for a second, I’m thinking series like Neil Gaiman’s “The Sandman”, for example, occasionally used typography to great effect. I know you use the sIFR approach on your own site a lot to get some unique fonts in when it’s effective to do so. Do you think, just offhand, there are lessons to be learned from the typography that we see in comics?

Andy Clarke: I think, definitely, the way that the type is laid out is — as I was talking about yesterday — is certainly a way that we can help lead a viewer’s eye around a page…

SP: Yeah.

Andy Clarke: But there’s been a lot of talk around CSS particularly in terms of custom fonts and imported fonts and the way that we can perhaps in the future make the selection of fonts that we’ve got available a little bit wider.

SP: Mmm.

Andy Clarke: But I would always err on the side of caution. We don’t want to go back to a stage where everything is just kind of … shouting out at you. Just because we’ve got lots of fonts doesn’t mean that we have to use them. (chuckle)

Cameron Adams: Does that also mean you’re advocating more use of Comic Sans, Andy?

Andy Clarke: Comic Sans is one of my absolute favorite fonts, and expect it to crop up in several projects.

Cameron Adams: You heard it here first.

SP: Cameron, your talk was a lot — at least for me — about the possibilities offered by maturing JavaScript libraries and other advanced UI techniques on the Web, and specifically about giving users a truly customizable user experience. Now, you mentioned that this adds constraints to your design work, and makes it actually harder to build a well-designed and working web site. Working as a freelance developer of your stature, how often do you get to work on these special projects that are worth going the extra mile for?

Cameron Adams: They are very few and far between, but I think that, you know, as you work in the industry and get a name for yourself, you can sort of tend to pick which projects you’re actually going to go for, rather than just doing ones for the money and … Increasingly I’m finding that I’m just waiting for the right client to come around and say, “Here’s something I want to do. Can you do it?”

SP: Yeah.

Cameron Adams: It’s a great position to be in, because, you know, not many people get to do that, but … Yeah, you do have to sit around and wait for them.

SP: Is there a recent example of a site that you really got to sink your teeth into, in terms of pushing the design?

Cameron Adams: Ah, yeah there was one. I can’t really talk about it. (chuckle)

SP: Oh! Well … you heard it here first! Um, yeah, look forward to seeing that.

Cameron Adams: Yeah, that was a very interesting project. It was for a really great client.

SP: You showed the White Pages Australia site in your presentation yesterday as an example of a site that can adapt to different browser sizes. To you knowledge — I mean, I was surprised that such a mainstream site would adopt such, I guess, a risky approach.

Cameron Adams: Yeah.

SP: How did you find– Did you have to twist any arms to get that–

Cameron Adams: No, Sensis are one of the really great web companies in Australia. They’re really pushing forward with cutting-edge technologies. There’s, like– (chuckle) The one thing Sensis is really bad at is exposing what they’re actually doing.

SP: Yeah!

Cameron Adams: They’ve got a whole great number of products that never see the light of day, because they’re just working on so many things that they all just get swallowed by some of the other, you know … Yellow Pages and White Pages marketing.

SP: Cool.

Cameron Adams: But, it was really easy to get Sensis on board with that sort of thing because they’ve got some really great people down there, so if you just have a chat to them and go, “Hey, this is something cool you could be doing,” they’re really happy to try it out.

SP: That’s great to hear. I’d like to ask the both of you, having listened to your talks yesterday separately, it sounds as if you are both looking at web design coming at very different directions. Andy, you seem to approach it almost as a fine art, where you’re crafting an experience from beginning to end, to find a vision that will both answer your clients’ needs and build, like, a usable and attractive experience for the visitors to a site, whereas Cameron, listening to your talk, you’re really talking about empowering the users to build their own experience as, perhaps, a new approach to web design. Are these approaches at odds as you approach any given project, or is there a happy medium to be found for any project?

Cameron Adams: I don’t think they’re at odds. I think they’re quite well suited to each other. They’re both pushing at the same point, which is to get the best experience for the user possible. Depending on what project you’re working on, either approach could work. You just have to look at what the user needs and what they really want from the site, whether it’s a finely designed site or something that you get a bit more interactivity with.

SP: Mm. Andy?

Andy Clarke: Sometimes I think that people think about web design in isolation. It’s like it’s almost becoming an art form — or a science, when a lot of people talk about usability — in its own right, and they sometimes forget to look outside of the Web for inspiration from other types of media. At the same time, people are– In their daily lives, they’re exposed to magazines and comic books and newspapers and movies and all this other stuff. And part of the user experience for me, I think, is the brand. And, you know, the brand is very, very important and brand is part of the experience. So actually getting something which can excite people, or shock people, or just make them sit back and go, “Ooh! That wasn’t what I expected,” can all be part of the brand experience. So now these things, they’re not at odds because at the end of the day we’re actually trying to design an experience from end to end.

SP: Mm.

Andy Clarke: I sometimes get frustrated when people talk about web design in relation to usability, as if it’s important to get from point A to point B as quickly as possible. And for me it’s what happens in the middle that’s important. You know, that’s the journey, that’s the story that you’re trying to tell people, from when they first log on to when they actually end up, for example, signing up or buying product. So, I think that there are lots of things that we can bring in to design that will just make people sit back for a second and make them potentially think about what they’re seeing, rather than make the actual design itself transparent, so that the sole function of using a site is to do whatever task it is.

SP: Right.

Cameron Adams: Probably putting just a bit more value into it rather than just ROI, looking at the bottom line.

SP: All right. Well, yesterday at the end of your talk, Andy, you announced the CSS Eleven project, and I thought maybe I’d give you the opportunity to get the elevator pitch out there.

Andy Clarke: Yeah, I mean, this has something that’s been on my mind for a very long time. I’ve always been one of those designers that looks at what’s coming, or what’s been happening within the CSS Working Group, and kind of throwing stones from the outside, and one of those people that was kind of bitching about how slow things take and, you know, how little action there seems to be, and how possibly incomplete the solutions that we may be seeing at some point in the future happen to be. And then I was very lucky to be asked to join the Working Group last year.

I’m ashamed to say that I’ve done bugger all, really, in terms of actual contributions. But — one of the reasons for that — I mean a) I’m very busy. But one of the other reasons for that is, actually seeing things from the inside makes me realize just how difficult it is, not only from the Working Group’s point of view, to make these things happen, but also from an outsider’s point of view, to come in midway through a project and actually understand what the bloody hell is being talked about.

The people that are on the Working Group are very nice, and they work extremely hard, but that doesn’t necessarily mean to say that they know everything that we need to happen. They certainly potentially don’t have the same priorities — and if you watched Bert Bos’s talk yesterday about all of the things that were on the CSS3 kind of wish list, you know, there was everything in there from MathML, and slide show formats, and all this kind of stuff… Well let’s just stop buggering about with ‘everything’ and focus on potentially finishing a few things.

So, really, the idea was that — having seen the lack of real designers’ knowledge inside the Working Group, and also having seen how really difficult it is to communicate from the outside with the Working Group — I mean, they get lots and lots of suggestions all the time through the mailing list, etc., but actually communicating with the Working Group, and with anyone at the W3C, is actually quite difficult. And there isn’t this layer of transparency. We don’t really know on the outside what’s being discussed, what the priorities are, how close things are, whether or not things discussed are accepted or rejected based on politics or economics or factors for browser vendors, for example. Do browser vendors think, “We don’t want to implement this feature because it’ll take us, you know, a lot of money to implement in a browser.” You know, we want to know the reasons for this.

So, really, a) I got frustrated in the lack of progress, obviously, as lots of other people do, but also in the fact that it wasn’t really any good to stand on the outside and throw stones. It was far better, I thought, to actually try to find some way — maybe it’s not the right way, but some way — in which we can take what’s already been done in terms of CSS3 — and there is a lot of work being done; there’s a lot of drafts already pretty mature — and then have a bunch of people who are very, very experienced in design and in CSS — and also in scripting techniques as well, because a lot of the time we’re using scripting to prop up what’s not possible in CSS — to take what’s there, to look, for example, at the Multi-column module and say, “This is a mature draft. It’s been partly implemented in Firefox, but it’s broken. It could easily be fixed. What are the things that we want to do? What other particular aspects of CSS do we need in there?”

I’ll give you an example. The Multi-column module creates multiple columns, but you can’t style those columns. The Selectors module allows you to select very precisely particular, for example, table rows with nth-child. So I could style the first six rows of a table, or I could style the ninth, nineteenth, and twenty-ninth rows of a table with the nth-child selector. But there’s nothing to enable me to style alternate columns that are generated by the Multi-column module.

SP: Mmm.

Andy Clarke: Little things like that are missing. And also elements of classical typography: the way that headings work within columns, the way that images could maybe span multiple columns. These kind of things that designers want and need, but the problem is, is that the Working Group don’t have the time or the experience, really, to produce proper examples as to how something should work.

SP: Right.

Andy Clarke: So that was the idea behind getting a bunch of people together that could actually finish the job, or at least take it so far so that when we go back to the Working Group — and I don’t believe it will take an enormous amount of time, either — go back to them with something with something which is not only human readable — because if you’ve ever tried to read a spec, it’s incredibly difficult, because they’re not written for human beings, they’re written for computer scientists, they’re written for implementers, browser makers; they’re not written for design geeks as instruction manuals…

SP: As they should be, but … yeah.

Andy Clarke: Exactly. So, go back with something which is very clear, very precise, that says, “This is how we want something to work,” accompanied with some really good, real-world, graphical examples.

SP: Mm.

Andy Clarke: And, potentially, the start of code — HTML and CSS — that can be the basis of test suites. Just get the thing done.

SP: On the surface, this could be seen as a criticism, or an attack of the W3C’s work on CSS, but really you may end up being their saviour, exactly what they need — this way of getting the message out about the work that’s being done and the possibilities that are there.

Andy Clarke: I do believe that the current model is broken, for several reasons. The first, and perhaps most controversial, is that the Working Group is made up of, as I say, very good, hard-working, nice people, but the majority of them are representatives of W3C members, which are multi-million-dollar corporations, for the most part — certainly on the CSS Working Group. And should it be the browser makers, in particular, that are responsible for deciding on what our tools are going to be in the future, that believe it should be that way.

I think it should be us that decides, the W3C to ratify, sort out implementation issues — that’s not to say that– The implementers on the Working Group should look at things and they go, “Do you know what? Actually, we can’t do this because computers aren’t powerful enough, but we could do this instead.” Have that dialog going. That’s important. And then the browser makers should either implement stuff, or not. But the current model of deciding on what goes in, and communication and transparency, is broken. So this is just one idea…

SP: All right.

Andy Clarke:…as to some way that we can fix it.

SP: Well, I’ll look forward to seeing that work! Both Cameron and Andy’s talks at Web Directions South 2007 will be podcast at webdirections.org. I encourage you to check those out to hear a bit more about what they’ve been talking about here. Thanks for joining me, guys!

Andy Clarke: It’s been a pleasure.

Cameron Adams: Thank you, Kev.