Finishing up our Web Directions South build up, we talk to Andy Clarke, Web designer, presenter and invited expert to the W3C’s CSS working group. Andy gives us the low down on standards, the new way of designing Web sites and the problem with Web 2.0.

Andy has a book out titled Transcending CSS, and has just finished presenting a whole day workshop in Sydney with the same name. He’s giving a talk at Web Directions South on the “October Revolution”: drawing inspiration from comic book designs to create innovative Web sites.

How important are standards in Web development?

I think standards are incredibly important, there’s been a lot talked about standards over the past few years and I think you’ve got to look at it from two sides. Firstly you’ve got to look at it from inside the standards environment, and particularly with microformats — which to me is really just an extension of what we’ve been talking about with standards development for years — it’s really about giving the user a lot more flexibility.

If you’re publishing content, why wouldn’t you publish content in a way in which people can do things to it? On the simplest level you’re talking about access to that content from pretty much any kind of device, but now we’re talking about microformats — giving people the opportunity to do extra things — even if its as simple as letting people take hCard info and add it to their address books. Those kinds of things would not have been possible if it had not been for the fact that we started looking at meaningful mark-up as part of a standards aware way of working.



You can think about mark-up in the same way as you think about honeycomb in a beehive, or a spiders web

From a creative point of view as well, the way that these things are structured has an inherent beauty to it as well. You can think about markup in the same way as you think about honeycomb in a beehive, or a spiders web, these things have inherent structural beauty. None of that would have been possible if we hadn’t started thinking about how we could use the technologies appropriately.

So I think that standards have been very important, and I think that they will become even more important. A lot of the time conversation revolves around “Have we done as much as we can? Is there anything left to talk about?” People wonder if we’ve done all the cool things we can do with CSS, but I think we’ve got a long way to go.

There’s an awful lot of publishing going on that pays no attention whatsoever. It’s not until we start making inroads into things like movie sites, sport sites or music sites — hit the big brands, you know.

If you think of a company like Nike, and the amount of money they can spend on a Web site, none of which have to do with what we do with standards. There’s no reason that you can’t achieve those kind of results by working in what I consider to be a very professional way. I think that it’s got to the point now that if you’re not publishing content that is at least aware of what you can do standards wise, then these things are not professional sites.

Aren’t developers going to be shackled by how well particular implementations adhere to the standards?

Yes we’ve been limited by what browsers can do, particularly when you think about Internet Explorer 6 and before. We’ve been limited in terms of what was possible, be it selectors that weren’t supported, or problems with DOM support, whatever — but you’re not limited by anything more than your imagination. People are aware of upgrading their technology in the wider world, I don’t expect I’m going to get video on my old iPod nano, I know that if I want video on my nano then I need to buy another one. I don’t expect high definition TV broadcasts on my old TV, I expect I’m going to have to upgrade.

In the real world, people are used to things progressing, a lot of people seem to have gotten stuck in the mentality that we have to use the lowest common denominator, the saddest old browser (and I’m talking IE 6), as our baseline because we mistakenly believe that everything has to look the same in all browsers. And the fact of the matter is that it doesn’t, as long as we think about the decisions that we make intelligently, then no, pages don’t have to look the same in all browsers. If we release ourselves from that, then we can stop being limited by the implementations in the browsers.

What’s wrong with the way the Web works now?

Is there something wrong with the way the Web works at the moment? I don’t think it’s necessarily a problem, but I think it’s sad. As an industry you would think that we would be more progressive, as designers you would hope we would all be coming up with new ideas and trying new things. I think that it’s sad that we don’t do more progressive work.

I don’t think that it’s necessarily a bad thing for people though. I think that most Web designers and developers will be aware of things like accessibility, even if they’re not doing everything that they can do. I think that one of the things that needs to happen is to bring some of the big players on board, because if you think of sites like Amazon, or eBay, you know, the big superpowers of the Web, those organisations have a lot to gain from adopting standards.

People that use those sites also have a lot to gain if they were to do it as well.



This whole notion of Web 2.0 suggests that we should have learned from the first version

You do see certain companies like Apple and Yahoo in particular going down that road. I think it’s progressive, I think we’ll see a lot more people come on board. I don’t think there’s necessarily anything wrong, but I would like to see more of the big organisations come on board.

It’s not just about the old stalwarts, the Amazons and the eBays, you only have to look at what goes on with the darlings of the Web 2.0 world, where AJAX is king and accessibility is a feature we haven’t implemented yet. That’s bad. This whole notion of Web 2.0 suggests that we should have learned from the first version, and a lot of the time these darlings of the Web 2.0 world are just making the same mistakes over again.

Are new standards such as CSS 3 going to have an impact when browsers are only partially implementing the ones we already have?

Yeah of course, and people still complain about how quickly specifications are developed. I can comment on this with CSS in particular, because I’m an invited expert on the working group, I know how long things take, and I have a bit of an extra understanding about why it takes so long. A lot of people are complaining about CSS3 and how slowly it is being finalised, but I would turn it around and say that there’s a lot of features in CSS2 or CSS2.1 that people still don’t use. There are loads of selectors that people just don’t use for the major reason that they’re not supported by sad old browsers.

So we can’t complain about not having new stuff if the stuff that has been there for quite some time isn’t being used yet. So really we have to start using this stuff in order to need more. That’s the focus of my workshops, to try and get people to use more of this stuff.

The reason for this is simply down to the fact that people work in an old fashioned way, and think in an old fashioned way. I’ll give you a couple of examples. One is the mistaken notion that a Web page has to look the same in all browsers, and therefore if you can’t do something — in particular if a selector is not supported in IE 6 — then they won’t use it.



I would ask the question, apart from Web geeks, who uses more than one browser?

I would ask the question, apart from Web geeks, who uses more than one browser? My mother doesn’t, I can tell you that, she’s never going to know if something looks different in Firefox.

The other thing is the way that Web designers actually work. The way that most companies work is that you have a design department that makes compositions, and an engineering team that interprets them and makes them into Web pages. That’s such an outdated way of working. It’s probably why we have so many fixed width centred layouts at 760 pixels, because that’s what the clients signed off on: a Photoshop comp. If we’re going to be designing for the Web we should use the Web, and we should be using CSS in particular as a really integral part of the development process.

What makes CSS so vital?

The cool thing about CSS is that in the past we used mark-up generally not only to convey content, but to provide the visual look and feel. This goes back to the biggest hack of all, which was using tables for layouts. Even though people have by and large stopped doing that, they still think presentationally. They still choose elements and order those elements based on how they want them to look visually. It’s really the wrong way of doing things; they really should be concentrating on exactly the rawest, minimal mark-up and then using CSS to style it. That’s why we should be using the full range of selectors and using all off the tools available.

Now particularly with the IPhone and the explosion in mobile browsers we’re getting away from the desktop, so using CSS appropriately, to do cool stuff with one design and different cool stuff on another design, is where it’s at. You can’t do that if you tie the visual look and feel to the mark-up.

If the old way of developing Web pages is wrong, then what’s the new approach?

I am a really big fan of something that’s a bit like an agile development model, let’s start to see designers and developers side by side. I’m working on a project at the moment where I’m responsible for the visual look of a site, but I’m also sitting in with their development team. So at the moment we’ve designed the wireframes, and those wireframes took a day to do — and they’re all done on paper. So there’s no Photoshop comps or Fireworks comps, we literally designed the thing with sticky notes on the wall, and then drew it. Then we move straight into XHTML and CSS templates just of those wireframes.

That means that the developers that are moving on the project already have a shell of mark-up that they can add their Ruby to, or their .NET to or whatever it is that they’re using — they’re actually making the thing work.



I might as well do the whole thing with oil paints or watercolours — Photoshop is just a tool

What we haven’t considered yet is the look and feel, when I go back to design that I’m only going to develop one Photoshop template. I might as well do the whole thing with oil paints or watercolours — Photoshop is just a tool. Working side by side with them, I can say to them “this is what I want to do?” and if they say “we don’t have an element for that” then we can decide together that we need to introduce a new element into the template and it’s there instantly. They don’t have to think about, come back to me having implemented it and go through this whole backwards and forwards approval process.

Some of the big companies that I’ve worked for have entire departments dedicated to QA, where they will do browser comparisons. None of that needs to take place now because you can actually be in the browser while you’re designing it — the designers can see immediately when the developers have done something.

It also means that we’re actually able to do things with Web design that we were not able to do before. So many times you see fluid layouts being thrown out the window, but when you’re designing in the browser you can see what happens when the text wraps and the line lengths get too long, or elements start sloping odd ways — you can see immediately. The designers are there to make the decision.

So now when the developers say “look what happens when we make the text bigger, what do you want to happen now?” I can say “well I want it this way” and they can get started on it. No more long winded meetings and having to walk across different buildings. That’s the way I think we really ought to start working, where we can. It’s not appropriate for every organisation, but I’ve definitely seen it pay dividends.

How feasible is that for large projects?

It’s difficult, it’s very difficult. And what I would encourage large organisations to do is to run a pilot project, maybe on a part of a site, or a mini-site or whatever. Then just say “okay, this is the project. We just need to build this part of our Web site.” Then get two designers, two developers, maybe a backend or server guy and stick them all in the same room for a week, and get them to build it.

I encourage people to do it, even to the extent where you have them doing video diaries or something, just to demonstrate the process. I’ve seen time and time again just how much gets done — stuff that normally takes a month takes three days! Just because everybody is right there working together.

So doing it as a pilot project is really the best way to do it if you can’t go whole hog.

Does your average designer or developer care enough about standards to go the extra mile to ensure their sites are compliant?

I hope so!

Obviously there are things that get in the way, clients for one, bosses for another. By and large though, I think Web designers and developers care a lot. Sometimes they don’t have the opportunity, sometimes they might be a bit reticent about going up against bosses or clients that want something that they know is stupid, but that’s a personality issue — it’s not about the technology.

What about the trade-off between perfectly valid compliance versus the time it takes to do that?



It’s not about a checkbox approach, it’s about making good decisions

Look, you can write a perfectly valid document and have it make no semantic meaning at all. A page layout that is made with tables, that uses spacer gifs that have all empty attributes is a completely valid document. That doesn’t say that it’s any good.

If you have a CMS that spits out unencoded ampersands and you can’t do anything about it it’s not a big deal. I think that people need to be thinking more about the meaning and the spirit of what they’re doing. It’s not about a checkbox approach, it’s about making good decisions that you can justify to other people, and more importantly to yourself: “I did this because …” You have to accept that if you do that sometimes things are not going to be exactly as you want them to be, it’s the real world.

Lastly, does anyone care enough to make the semantic Web a reality?

No, and it’ll never happen. That’s why we’re doing microformats.