Jeffrey Zeldman and Ethan Marcotte talk about the third edition of Designing with Web Standards as well as discuss the future of the web.
Paul: So, joining me today is Jeffrey Zeldman and Ethan Marcotte from Happy Cog, and they’ve recently released the third edition of “Designing with Web Standards,” which is basically the bible of the web standards community. It’s good to have you both on the show.
Jeffrey: Thanks, Paul.
Ethan: Thanks Paul, it’s great to be here.
Paul: So the first question has to be, we’ll talk about the book in a little bit, then we’ll get on with some more general issues, but starting with the book, Jeffrey, other than the fact that Ethan is obviously a genius in everything that he does, why did you decide to go for a co-author this time around?
Jeffrey: So I wrote the first two editions by myself. I was half way through the book and said I need Ethan as a co-author. I didn’t say I needed a co-author, I need Ethan. There were a couple of reasons. I think the principle reason was, I’m now a captain of industry, right? I spend a lot of time flying around, and walking around, and in cabs talking to clients, giving presentations, writing stuff, it’s all great. But I’m not at the front edge writing code anymore. I wrote the first edition of “Designing with Web Standards,” I was doing experimental CSS design work nobody else was doing. And I was like, This is pretty. Well, actually, Eric Meyer was doing more than, well, there were people doing it, but I was one of the first people doing it, and I was going “Look, this is amazing, and it really works!” And for the third edition, I wanted someone really brilliant, really wonderful who is doing that same work, who’s at the forefront now and who is making CSS, jump through it’s own sphincter and all that stuff, so he was the guy. Ethan has a wonderful, funny writing style that I’ve got to say, this’ll sound, it reminds me of mine, and it sounds arrogant, I’m not saying “He’s wonderful like me!” His writing style and mine flowed together so naturally that it’s hard for me looking back, “Did I right that, or he?” I think it was perfect.
Paul: Brilliant. So what encouraged you to write a third edition then? You know is two not enough?
Jeffrey: Well actually, if we still had IE6 as the principle browser that everyone was using, if XHTML 2.0 was still going strong as an experiment that nobody was going to use, there was no [what] working group, there was no CSS3 in the wings, there was no HTML 5 in the wings, we could have waited longer. But, it so happened that during the writing of the second edition, and shortly after the standards community was very upset. It seemed like it was divided between people who thought now we have a stable base of tools and we know what to do, let’s just keep refining our best practices. Another group said that’s all well and good, but we need new tools, we’re very limited in what we can do, in terms of layout. The semantics of HTML are very limited. Well now, all of a sudden, in the last year and a half, HTML5 comes bursting out, like ready to be used and supported in browsers. There are elements of CSS3 that are in browsers. People are all over, not just standards people, people all over, including Microsoft are saying “Help us get rid of IE6.” We have An Event Apart speaker coming from Microsoft, who’s going to spend half an hour, asking our audience to help him get their clients off IE6. So, there’s so much going on after basically eight years in a nursing home. Years of dull, bad, nothing happening, except that everyone got up to speed and pretty much anyone who wasn’t aware of web standards and wanted to be, had those eight years to read the books, make the mistakes, and everybody knew the tricks and all that and now all of a sudden its an all new game. And I think also the fact that people I respected kept saying we’re in so much trouble, we’re going to lose semantics, HTML5 is a disaster, XHTML is dead, that means that people who use XHTML are fools, we’re losing the W3C, the W3C is stifling innovation, and there was so much opinion that was so wild, I thought “Okay, what do I think about this?” and a few blog posts that I had written in response didn’t seem like they were solving anything, it didn’t seem like I could go “Here’s what I think…” that it was over. There’s a lot of ferment, a lot of people who are confused, upset, so let’s figure out what’s going on and see if we can provide some wisdom.
Paul: Ethan, from your perspective, what is it about the third edition that really excites you? What in there is really grasping you, what was your excitement as yuo wrote it?
Ethan: I was a technical editor on the second edition, and started off as a technical editor on the third edition. Just comparing the two books, there’s a remarkable difference between the third and the two prior. I think the biggest one is that, Jeffrey I think you would probably agree, that this edition is significantly more hands on than the first two were. Designing with Web Standards is fundamentally and definitively a conversation starter, for someone who is interested in standards-based web design. And it introduces a whole host of topics pretty authoratively but not exhaustively. I think the first two editions definitely still had to make all the philosophical arguments of, this is why we need to move past table-based layouts, this is why this new techniques really make a lot of sense for the web. Now we are in the position where there are still a lot of people out there that are still acclimating themselves to web standards, but at the same time we do need to start getting more of our feet wet. So the layout chapter has been significantly re-written to actually introduce people to the concept of not only the box model but the float model and some of the drawbacks with some of the different techniques that are out there. The last chapter of the book actually is a pretty comprehensive look at how these three tiers of the standards “cake” or the trifle if we’re playing Andy Clarke for a moment, actually snap together, pretty robust calendar, using just a straight HTML data table. I think there’s a lot of really great stuff in there, I think even the philosophical stuff is still fresh and new to me as a reader, but the hands on stuff is what I’m most excited about.
Jeffrey: I agree. I think we freshened it. Basically, nothing was sacred and anything could come out. In the second edition, that was not the case. The second edition had to keep making some of the same points and had to stick to some of the same examples. In this edition, we threw out many of the examples and language. There were all kinds of regressions in the first and second editions that were interesting, maybe important in some ways, but they didn’t seem as important now to what people are doing. There’s an emphasis in the book in just what do you say to your client or boss who says you can’t do accessibility. What do you say to the person who says we can’t afford user testing or we have to support IE6. Of course they do; they have to support it, but what does that mean? What does that mean in 2010? So there’s still a lot of philosophical stuff upfront but it is short. Unlike what I’m doing in this interview, I wrote short. If I had seven paragraphs to explain something in the previous edition, it was like let’s do it in one. So I think it has a leanness to it.
Paul: Yeah, it sounds like for the vast majority of people who already own one of the previous editions, this feels like a real leap forward that is worth paying the extra money for because of the new state of things at the moment. So yeah, sounds really good.
Okay, I’m quite interested in the way that you described a minute ago Jeffrey the place that we’re at the moment, because there are a lot of people that would say, well, isn’t the work of the Standards movement done, haven’t we kind of seen that adoption that we were looking for both in terms of the design and development community, but also in terms of browser support, is there really still work to do? But from what I’m hearing from you so far, you see there as being a big transition point. Is that right?
Jeffrey: Yeah, I think there’s work to do on two levels. I want to hear what Ethan thinks too. From my perspective, even if none of the changes I mentioned were happening; even if there was no HTML5, no CSS3, no ending of XHTML, etcetera, etcetera, there would still be a phenomenal amount to do in education, because most of the schools that are teaching web design, aren’t doing it right at all. They’re not teaching interaction design, they’re not teaching usability, they’re not teaching content strategy, and they’re certainly not teaching web standards. They’re looking at it as some kind of brain damaged, sub-species of graphic design. They’re telling them “well, you know how to use Illustrator, learn how to use Flash.” I was talking to a man yesterday, very qualified guy, who was up for an academic position at an university in his area. And he didn’t get it; they literally laughed at him. Again, these are professors, people who knew nothing about web design, they laughed at him. But it’s all Flash, we don’t understand, just learn Flash. What is it you’re trying to teach? We don’t get it. So if people could just take the first edition of this book, and some Eric Meyer books, and some Andy Clarke books, and Dan Cederholm, and just spend old ones, and just redo the way web design is taught in the academic community. So there’s that thing. Then, did I say two, there’s three. When I’ve been writing about, at Zeldman.com, when I’ve been writing about what’s going on with the iPad, why did they leave out Flash, is there any upside to that, or talking about IE9 preview, I get a fair amount of, I wouldn’t call it hate mail, cause that’s too strong, but I get a fair amount of people, very strong push back, who either think that Microsoft’s browser is really the platform that everyone uses, so standards should be adopted to it, not the other way around. I still hear that a lot. And I still hear, the way you guys are torturing web fonts and everything like that, just use Flash. So there’s a lot to do there. And then the third thing is for the people that get it and who are on board, as you said, it’s a transition point or an inflection point because the way we use standards is changing. Or rather, the baseline best practice that we have which will last forever and they’re fine, we can now do more with less. We can now use lighter CSS to do some of the things, and lighter markup to do some of the things that required, like now, in the past, I wouldn’t have done rounded corners just because of the ridiculous amounts of silly markup I had to use to do it. Little pieces of images, and using it now, especially with IE9 onboard, also supporting CSS3 rounded corners, put in the rounded corners and eventually, everyone will see them; even though not everyone will see them this year. I also think the whole war about whether it’s ever okay to use pixels as size elements for type takes on a new dimension when text zoom is pretty much dead and page zoom is pretty much the way. Ethan and I disagreed on that and actually, we were going to do an author vs. author thing with our arms crossed, but we just didn’t get it together in time.
Paul: So I want to pick up on that. It’s always good to find a point of disagreement. Who takes what position over this? What’s your position, Ethan?
Ethan: I take the right one. I’ve always been a strong believer in designing to the user’s preferences. Obviously, at some point, design is about setting parameters for the experience. When it comes to font sizing, I’ve always been a firm believer in shying away from pixels, just because of the prevalence of IE6 in the marketplace. That’s really it. Working with large financial institutions or government institutions where that is such an entrenched install, you know, but at the same time, you have to balance that with the accessibility needs of, well, we have some low vision users, or differently abeled users that would actually like to bump up the contrast on this a little bit. I’ve found working with Ems, especially with a lot of Rich Rutter’s excellent work. He wrote a great article for ALA a couple years back that was my go to article on that for a long time.
Jeffrey: The 62.5% solution or the one he wrote after that, how to size text on the web?
Ethan: The 62.5% one was a technique that he used on his blog and then he sort of upgraded it for the ALA article and said that actually basing a font size on 100% for the body gave you a much more consistent display. And really, I’ve just found, and I should state at the outset that I am horrible with math, but I’ve always found that it’s fairly easy to do with a little, just using the calculator app on OSX.
Paul: There are also some great web apps now that kind of do all that hard calculation for you as well.
Ethan: Yeah, and actually I use Textmate as my text editor, and they got some built in calculation stuff which is great, not only for sizing text but I also do a lot of work with fluid grids.
Jeffrey: You have to come to my desk, because I use Textmate too, and I don’t have any of those tools. I know they’re built in.
Ethan: Sure, we’ll do a screen share after this.
Paul: I can see another thing come on. We need to do a screencast of all these tools you have, Ethan.
Ethan: It’s great watching other people work. That’s one of those things that you lose in a virtual environment. I love seeing how people set up Photoshop, or set up their text editor, it’s always fun.
Jeffrey: I used to just sit and watch other people work.
Paul: Well, it’s far better than working yourself, I find.
Jeffrey: It was work. That’s my job now.
Jeffrey: I wanted to get back to what Ethan said about text sizing, because I agree with everything that Ethan said. We don’t want to cause accessibility problems. A lot of people are stuck with IE6. All that stuff is true. And in those environments where you know you have a lot of users with IE6, then you know that pixel-based text is out of the question. I just want to stand in; I’m all for usability and the user and all that, but I just want to say a word for the designers for a minute. There are limitations in every medium, this is true. What a designer of a book can say, I’m going to have this be 15 point and this be 12 point, and there’s a mathematical relation between them, and it’s very controllable and I know what the user is going to see. And they can control the leading, and the margins, and everything else, so that there’s this beautiful, underlining, horizontal and vertical grid, and the page feels pleasing, it’s pleasing to look at and it’s easy to read. There’s no reason, because I refuse to let pixels be magnified because of a stupid wrong decision that Microsoft made 12 years ago that we have to jump through our own anuses, and still only approximate the results we want to get. I think it’s ludicrous. When there are so many other browsers out there, and when IE itself is transitioning to the same thing. I think that now that’s page zoom is out there, and it’s out there in IE8, it’s out there in IE7, I think it’s okay. There’s only the IE6 user who won’t be able to, and if you’re designing a book site for designers, if we’re designing The Book Apart website, to promote a book that we’re doing for web designers, I think that would be okay to set in pixels. Because in all probability, people are looking at the site in Firefox or Chrome, IE8 or Safari. It’s a question of knowing your audience. I look forward to the day when we can use absolute sizes, the user isn’t limited because the user can still make them bigger or smaller. And artificially, a sort of limited understanding of what CSS meant, that resulted in an arbitrary decision won’t force us to keep doing crazy things and saying “I’ve got this thing that works now, make it 100.1%, and put that on the body. And then the HTML is 100% of the body.” And everyone I work with does these things and it drives me nuts. And I just want to go, you know what, if I need something to be 12 pixels and something else to be 18 pixels, I should be able to do that without hurting anybody. So I think it’s idealism, and remember I’m not just saying well, I’m going to do this because, nyah nyah, I’ve been asking them to change this for 12 years. Can you change this now? Can you change this now? Can you change this now? Like, have you ever seen SpongeBob? SquarePants? Can you change this now? Can you change this now? Can you change this now? That’s me. They finally found a different way to do it. That’s fine. I’m agitating on behalf of the users and designers. Good design is better for users. Right?
Ethan: I will say that, Jeffrey and I have had this sort of scorched earth, back and forth, a couple times now.
Paul: I was going to say, at some point, I’m going to have to stop the two of you, otherwise this could go on forever.
Ethan: Paul, if you could just play marriage counselor today, that would be a huge help. I will say that, it definitely needs to be driven by the constraints of the project. I worked on a fairly large site, New York Mag, which we talk about a little in the book, NYMag.com. It was basically a very large template production job for me. It was very beautifully design, but very encyclopedic module library that they were going to be building. The producers that were going to be inheriting the work wanted to have the flexibility to like, we’re going to nest module A inside of module B. All the typesetting was going to be done in pixels just because, it was going to make the most sense for them. Because, maintaining a stylesheet that was going to handle all of those contingencies was going to be just a nightmare. But that said, I think Jeffrey and I have our respective biases on that front.
Paul: I mean, a lot of these things turn into religious debates really, were you pick a side, but in most cases, the answer is “it depends.” There are always other factors that need considering.
Talking of browser support and IE6 and that kind of thing, Have either of you guys had a chance to root around IE9? What’s your initial impressions so far?
Ethan: That’s a great question. I actually haven’t touched it.
Paul: Ah, well, fair enough.
Jeffrey: Me either. I really happy with everything that I’ve seen, in terms of their improved standards compliance, just in the last few days that they’ve been public. But we’re a Mac shop, you have the virtual PCs and all that. We haven’t started testing in IE9 yet.
Paul: Fair enough. I just thought I’d ask because…
Jeffrey: It’s a good question.
Ethan: I’m installing it right now. Actually no.
Paul: Now out of quilt.
Ethan: We can clean this up in post, right?
Paul: No, no, no, you’re going to be publically shamed. I haven’t looked at it either. I’m sure some clever people have, obviously not us.
Okay, let’s move on to the subject of what’s exciting you the most on the web at the moment. Jeffrey very briefly touched upon web fonts earlier, and it seems to be something that you’re writing a lot about. Is that where your real passion is now, or is there something else that’s grabbing you?
Jeffrey: I’m passionate about the idea of it. And I would love it to work well and easily just with @fontface. I’m thrilled for Typekit, which is a great tool. I’ve tried three tools now, out of which Typekit is the furthest along, and it’s definitely driving adoption, getting people really excited, it really just works. It’s all great stuff. But for the same reason that I want IE to let me size up something in pixels and let it get bigger or smaller, or whether the user needs to do that or not, I think I have issues with the fact that were so close and yet so far. That fonts are looking bad on the screen and all the issues that we have to overcome.
Paul: So what is your approach at Happy Cog when it comes to web fonts? Are you tending to steer away from them or what’s the situation?
Jeffrey: Ethan, with the projects that you are doing, we’re doing different things. It all depends. There’s some pages where we’re still using sFir and Cufon…
Paul: I never know how to say that either…
Jeffrey: We’ve used some @fontface and we’ve used some Typekit, which is @fontface with lots of support. It depends. We’re not delving into it deeply yet. We’re setting headlines more than body text at Happy Cog, so that gives us lots more flexibility. The body textóthe problem is the type, and the type outside of our favorite browsers. When we look at the stuff in our favorite browsers, we want to weep with joy. But when we look at it in Windows, and some older browsers, and some older platforms, the thing with Windows, it’s a many headed beast. The other issue is that Roget Black, a studio mate here in New York City, described it as there’s this health living guy, but he’s dragging these corpses behind him. Here’s IE9, and you’re like “wow, that’s great.” Then here’s IE8 and it’s looking pretty good, but you got all these old versions of Windows, and all these old versions of Clear Type or no Clear Type at all, and these old versions of IE, and Microsoft has to keep supporting them for like another 5 years. So the handsome salesman is walking along with all these corpses tied to his back and it makes it hard, it doesn’t make it seem like a stable platform yet for type.
Paul: Ethan, is that your experience as well?
Ethan: It is. I mean we’ve done a limited @fontface and that is purely because we really let the design drive the requirements. So many foundries have pretty explicit constraints on what you are able to do with their typefaces. Cufon is just right out in a lot of cases. sFir is actually banned on a couple that I know of. Hoefler & Frere-Jones, who do beautiful work, explicitly allow sFir, but any other conversion of their typefaces is right out. We try to have a lot of discussions upfront with a client when we’re reviewing designs saying that if they’re especially wedded to a particular typeface, here are our options for that. And then we just try to talk to them about what kind of maintenance are they interested in having. I think for most of the headline stuff we do, we’re still pretty comfortable working with sFir. It really just depends on the project, and what the clients is willing to take on.
Jeffrey: I will say if you’re going to go with body type, Typekit seems like a very good solution right now, because the fonts are going to keep changing. If you’re trying to brand your body text, by using a font other than Times or Arial or Georgia, in all probability, the type shop that designed it today is going to change the hinting on it or even redesign the font several times over the next few years as the landscape keeps changing. If you go with Typekit, they’ll just make sure that they’ll swap in the new version, they’ll make sure it happens. Some of the font vendors are saying the same thing; that they’ll do that as well. Like I know that Font Bureau is going to host their own fonts. You can buy them, put it on your own server, and link to it with @fontface and your done. Or you can buy it and let them host it for some kind of fee they’re still working out I think. They will swap in new versions as they rehint them.
Paul: So it sounds like you both have some concerns when it comes to web fonts, which is understandable. So what is it then that fires you up these days? What gets you passionate still about the web and what do you see emerging that still excites you?
Ethan: A lot of the stuff that we cover in the third edition is where my head has been at recently, with CSS3. Dan Cederholm talks about this, like a period of great revisiting. We’re looking at the techniques that we have sort of gotten used to using for the past few years and trying to apply these new technologies to them in kind of exciting ways. So that’s one thing. The other thing; a lot of our projects at Happy Cog have been device agnostic. We’ve started having a lot of clients that are asking not just for a rich desktop experience when you’re browsing their sites, but also with the advent of the iPhone and Apple’s got another little toy coming out shortly I hear…
Paul: Apparently, I haven’t heard much about it.
Ethan: I’ll have to check the rumor blogs on the Internet. There’s been a lot more opportunities for just thinking outside the very strict design parameters that we usually work with. Then just thinking about not just designing for any particular device but a particular context. Because even if you are on a mobile phone, if you’re viewing something on a subway in the morning versus in the middle of the office at 10:30, your environment sort of dictates how you want to interface with a particular piece of content. That’s really what’s been firing me up as a long term proponent of flexible designs, letting the user dictate the experience. I sort of see that as the next step, thinking beyond the desktop.
Paul: Yeah, absolutely.
Paul: There’s one last question, we really ought to be wrapping up before very long. As you look now at the web design community that has emerged over the last few years, what do you feel is the biggest lesson that we still have to learn as a community is?
Jeffrey: I would say to respect each other. Respect each other’s choices, respect the client’s wisdom, the user’s wisdom, not to think that we’re the expert.
Paul: I do feel that sometimes we’re impetuous teenagers trying to stamp our authority on the world and say how important we are and how we should be listened to. We possibly need to grow up and relax into our role and not feel the need to prove ourselves constantly by saying we’re right and everyone else is wrong.
Jeffrey: That’s how you get the respect. You get respect by being the grownup in the room.
Paul: Ethan, what about you. What do you think is the big lesson that we’ve got to learn is?
Ethan: I think it’s a corollary to that the first response isn’t necessarily always the right one. I know Jeffrey has been writing a couple of fire inducing blog entries lately, which has been interesting to watch. Obviously, when you’re presented with a crisis of the web, he talked earlier about how the W3C was going to go up in flames a year and a half ago, XHTML2 was dead and we were all going to be working on FrontPage in three weeks. There’s a kneejerk reaction to sort of panic and sort of get your opinion out there. And I do think that a little more research and a little more information can usually yield better results. I think standing back from the crisis for a moment and asking some smart questions can be good sometimes.
Paul: Thank you so much guys. It’s really interesting to hear your perspective on things and get you on the show. All the best of luck with Designing with Web Standards, Third Edition. I’ve no doubt that it’s already broken all records. I hope it continues to do so. Thanks for coming on.
Thanks goes to Dennis Deacon for transcribing this interview.
If you recognise that the mobile web is important and you need help deciding on a strategy, then book a mobile consultancy clinic.
- 5 exercises to engage clients and stop you wireframing alone
- Call to Action: The 10 Most Effective Techniques
- How to tell if you are a design snob