Chris Coyer is best know for his work on CSS-Tricks a ever growing web design community. However, as you will discover in this interview it isn’t just limited to CSS.

Paul: Joining me today is Chris Coyier. Good to have you on the show, Chris.

Chris: It’s good to be here. Long time listener, first time caller, as it were.

Paul: And vice versa. I’ve really enjoyed the stuff you put out, and it helps me pretend that I’m still a web designer when I’m not, really.

Chris: Thanks.

Paul: I think that’s a compliment. I’m not quite sure. You do some really cool stuff. But just in case people haven’t heard about you, tell us a little bit about yourself, your background, and the kind of stuff you’re up to.

Chris: Sure, my 2-second background is that I started out in print design after college, and then realized the web is where it’s at and what I wanted to get into. I ended up convincing a small design company to hire me. It was trial by fire, super-quick, better learn the web. About that same time, I’m like, I’m learning so much, maybe I’ll write it down and blog about it. That was the birth of CSS-Tricks. If anybody knows me, it’s generally because of that. It ended up over the years becoming more popular than my wildest dreams, as it were.

Paul: It’s amazingly popular, isn’t it? You have a huge following on Twitter, and you’ve got some brilliant content there. How did that come about? Just because you were trying to record what you were learning?

Chris: That’s how it started. What it evolved into… Well, maybe it’s not too far away from where it started. If there’s some web anything that’s particularly interesting to me at the time, I write about it. If I don’t have time to write about it, I make a list. Quite literally make a list, and then go back and write about it later. So, it’s very personal to me. It’s not really a group blog, it’s just my blog.

Paul: In some ways, it’s very similar to Boagworld, because that’s how we started…

Chris: Very similar.

Paul: It’s primarily me. Increasingly, there’s other people involved with it, but you have a forum, you have articles, you have screencasts. You’ve got some really cool stuff on there. You give away loads of freebie stuff, you’ve got snippets and things going on. It’s a real wealth of activity.

Chris: Yeah, I call it a web design community up top, because it incorporates forums. I’m proud of the comment threads that happen, because they’re usually above and beyond the intelligence level I find in other random blogs. I’m not naming any names. I don’t really care, but I have some smart people that write comments here. That’s fabulous.

Paul: It’s disturbing when your commenters are smarter than you are. That always upsets me.

Chris: (laughs) I like that part.

Paul: Okay, I just don’t like to be the thickey in the class. Sometimes you just need to accept it. The other thing that really strikes me about CSS-Tricks is that it’s not just about CSS, is it?

Chris: Oh, no. It’s quite unfortunately named, isn’t it? It’s been a long time, and I don’t know, maybe the right thing to do would be to start adjusting its branding. But then, it’s just throwing away so much branding work to rename a site like that. I just decided to not care. I make it clear that this is about the web, not about CSS. CSS is still my favorite language, but I don’t write exclusively about CSS. Once in a while, I get somebody who’s just… Just last week, I got a guy who was really quite mad at me for writing about things other than CSS. It was a JQuery article.

Paul: Well, that’s as good as CSS, pretty much, isn’t it? It couldn’t be much more like it.

Chris: It’s got selectors!

Paul: Exactly, that’s got to count, I think. So, how long has CSS-Tricks been going now?

Chris: I guess it’s third birthday would be the Fourth of July of this year. So it was 2007 when it started. Three years, which is not a long time compared to some of the other folks in the industry. Even you, probably, I’m sure.

Paul: Yeah. We’ve been going for a lot longer. It just shows how incredibly popular the site is. It’s grown so quickly in such a short length of time. That’s brilliant. So, after saying that CSS-Tricks isn’t all about CSS, I want to talk about CSS, if that’s alright.

Chris: (laughs) Yeah, absolutely. It’s my favorite.

Paul: Obviously, there’s been loads of talk at the moment about CSS3, and I’m really interested… You’re obviously a guy that really keeps up-to-date on what’s going on at the moment. What is it that excites you the most about the CSS3 specification, if you can get excited about specification?

Chris: Oh, you can!

Paul: Oh, okay! Perhaps you’ve got to be a certain type of person.

Chris: (laughs) A nerd? Is that what you’re saying?

Paul: I’m not making any comments at all. So what is it that excites you, then?

Chris: Oh, I guess the whole bucket. The big conversation is "Can I start using it now?" That’s the classic thing. And of course, the classic answer to that is "Yes, absolutely. Progressive enhancement and all that…" That should be echoed here, as long as we’re talking about it.

Paul: Absolutely.

Chris: Everybody is absolutely dead-on about that. And the quintessential example is that the corners are rounded in Webkit, but they’re square in IE. And who cares? That’s a really good example. There are all these things we can do to improve the look of our websites in that way.

Paul: It’s really funny, because I’m working on a site at the moment, and I’ve literally just today been explaining that to a client, that your rounded corners and drop-shadows aren’t going to appear in IE. And actually, they quite like that, because…

Chris: Do they?

Paul: Yes! The reason they like it is that they perceive the IE audience as being much more conservative and wanting something much simpler in this particular case. So they like the fact that you can give something a little bit more to those who have fancier browsers and keep it nice and simple for those who are still using IE. I think it’s quite an interesting perspective on it, really.

Chris: That’s pretty amazing for a client. You probably have spectacularly good clients.

Paul: He is a very good client, a very knowledgeable client. I like those.

Chris: Good. I’m interested in how you approached it. How did you sell it to this guy? Was it your amazingly good personality that pushed him that way?

Paul: (laughs) Yes, it’s my wonderful personality! That’s one of the advantages of blogging quite a lot. A lot of clients follow my blog, so they’ve learned about this stuff over time. They’ve wrapped their heads around progressive enhancement because of various articles, and so there wasn’t alot of selling to do. Basically, I showed him what it looks like in Safari and got all excited about that. Then I showed him that in IE, it’s going to look a bit simpler. In fact, I think I said it to him first, and he said "Oh, I need to see that." Then I showed him, and because it still looked neat and tidy and looked really nice still, he was fine with it. I only use CSS3 for those little extras, rather than the main stuff.

Chris: Well, there’s very little of it that isn’t just little extras, so that’s what’s kind of cool. When you talk CSS3, generally, it’s just extras. Animations and corners and transitions and all that.

Paul: Have you been doing much with the animations and transitions? I’ve done the corners and the drop-shadowey stuff and that kind of thing, but I haven’t done much with that kind of stuff, animations and transitions.

Chris: Just in that, I think I get it now. But not really, especially on a live site. No, I haven’t rolled anything out for a client. I’ve done enough that I’ve got this figured out. I can do a little nudge, and I can replicate some JQuery or JavaScript library-type of animations with it. But a couple of weeks ago, Andy Clark posted a link on Flickr of an example of what he’s going to be using for his new book that was killer. You resize the browser window, and it would 3D animate this cover of a book. It’s very hard for me to describe with words here, but I was jaw-dropped. I thought it’s about time for me to start looking into this.

Paul: It sounds really good. It’s interesting, isn’t it? If you’re going to be nerdy, as we said earlier, how much of this stuff actually should be in JavaScript rather than CSS? Is it not more behavior stuff than design? I don’t know.

Chris: I don’t think so at all. I think it’s design. When I think of JavaScript and behavior, I think of events, like clicks and double-clicks and stuff like that. That’s JavaScript territory. But if it’s something like rotating something, which is CSS3, that’s very much design to me, not behavior. There’s probably arguments either way, but I really feel like the transitions and the transforms are very much CSS territory. If we could keep that to CSS, that would be ideal.

Paul: I can see that. If you take that logic, then things like :hover in CSS properly should be in JavaScript instead. (laughs)

Chris: Yeah, that’s funny. That’s the one event you get in CSS. Maybe it should be. Oh god, I can’t imagine the outcry if CSS4 removes :hover.

Paul: It does make me a bit twitchy, this kind of animation. I’ve got images of flaming, rotating logos coming back into fashion.

Chris: (laughs) Yeah, certainly, especially because you can do things with transition and transform, like literally make an animation that repeats. You could quite literally make a flaming, infinitely rotating logo.

Paul: Like all these things, it’s what you do with it, more than actually…

Chris: Absolutely. Have you heard arguments from people that say, regarding fonts, (we could do ten podcasts just about that) "now we can use any web font!" And people arguing against that. And "can you imagine the terrible things designers are going to do with that?" That’s not an argument. Removing and imposing restrictions because it might be misused? It’s unacceptable.

Paul: I look back to the early days of desktop publishing when it came along, and it is true that when you first gave the ability to do desktop publishing to anybody and everybody, for a long time, the quality was appalling. There are still appalling examples out there, but it’s equally enabled designers to do incredible things. It’s just the same, isn’t it?

Chris: It really is just the same. All of a sudden, Photoshop has bevel and emboss, so now everything is beveled. It’s the same thing, sure. Same argument. We’ll probably have it again in a few years.

Paul: Yes. With these transitions, you mentioned you can do rotation. What other stuff can you do?

Chris: I guess there’s rotation and sizing, or scaling, I guess you would call it. Gosh, what else is there? I wish I had the specs sitting in front of me.

Paul: That’s always the way, isn’t it? I’ve asked you a question and you haven’t got the answer too instantly.

Chris: (laughs)

Paul: And you call yourself an expert, Chris? (laughs)

Chris: (laughs) No, I wouldn’t on this particular thing. You can declare a color, and then another color, and transform between those two colors. It does an incredibly good job at it too, you know? So, anything that you can think of that you would use the animate function in JQuery to do… You can animate the padding on this element from five pixels to ten pixels, and you can do this in CSS too now. Just declare the regular state as having a padding of five pixels, and the :hover state as having a padding of ten pixels. On the regular state, give it that CSS property of transition, and you can tell it to do a transition on the padding property. And it will do it. I think there’s some CSS properties that it works for, and some that it doesn’t. But quite a few that it does- margin, padding, color, size, scale, rotation.

Paul: That’s really exciting, some of the potential for that. It does always leave you this vague feeling that now I need to wrap my head around what I can do with that that isn’t gimmicky that’s actually cool to do.

Chris: Exactly.

Paul: What’s the kind of support for it, do you know?

Chris: That’s a good question. When I originally started thinking of these… Well, they’re all prefaced by these browser prefixes, so if you want to use it, it’s -webkit-transition and -webkit-transform. Mozilla has them too.

Paul: Oh that’s good.

Chris: They were out, and we were using them as examples when Firefox 3.5 was around, and I think 3.6 is out now, and it works better, so…

Paul: Really?

Chris: Firefox 3.6 brought along a lot of that stuff with it. I think there’s some stuff… I mean, Webkit is absolutely leading the pack. That’s no question. If you want to be playing around with this stuff, it’s all about Chrome and Safari.

Paul: That’s good stuff. That’s interesting if basically you’ve started to use things like rounded corners and drop-shadows, there’s no reason why you can’t be playing around with transitions too, which is good. Excellent. Let’s talk a little bit about how it’s very easy to get caught up in CSS3 and all the cool, new things that you can do. One of the things that really struck me from looking through your own site, CSS-Tricks, was how much you can actually do that’s really done with CSS2 and the kinds of things that are available to us right now, pretty much universally across most browsers. Is there stuff that particularly jumps out at you where you’ve seen sites and think they’re really using CSS in an original way there?

Chris: Yeah. The things I write about, the things that interest me the most, and probably to a wider audience, isn’t just the technology of CSS necessarily, because CSS is a pretty simple language, really. It’s nothing compared to pretty much any other web language you can write in. HTML is also very simple. It’s just a descriptive language, and when you compare that to something like PHP, it just blows my mind. It’s much more complicated. It’s more interesting what people do design-wise, and then get it done with CSS.

Paul: Yes, absolutely.

Chris: And that will never get old. That’s why blogging about web design and tutorial sites like mine really just has an unlimited amount of content that can be written. "Look at this cool site. This is what they did with CSS to make it happen." And that’s just ubiquitously interesting, I think.

Paul: Yes. That’s the thing that attracted me as I was looking through the site. The times where you’ve found something really cool, and then you’ve taken it apart and told us how it was done. I remember seeing one which was… I can’t remember the site. It’s a well-known site where you scroll down and there are robots in the background that change into zombies when you get to the bottom.

Chris: Oh yeah, that was so awesome. It’s that e-commerce site where they have all kinds of awesome stuff to buy.

Paul: I can’t remember.

Chris: Think Geek.

Paul: Think Geek! That was it. It’s such a nice effect, so well thought through. And like you say in your screencast where you talk through it, it’s not that difficult to do. It’s having the imagination to think of the things you can do.

Chris: It’s the idea.

Paul: Are there any other examples like that where you’ve thought "I love that. I wish I had thought of that?"

Chris: Oh sure. When you talk about dissecting someone else’s idea and presenting it, one time I did that was on the date display technique from learningjquery.com. Karl Swedberg. It’s really neat. The way the date looks is really nice on that site. The text is rotated ninety degrees. It’s clearly using a font that isn’t available. I wonder how they did that? It turns out that how they did it was using a single image, using a CSS sprite, which is a technique that’s been around forever and ever. What a simple technique, easily doable with just CSS2. And the idea of a sprite, if there are people listening who don’t know what it is, it’s a single graphic that has lots of little graphics within it. In the case of this date sprite, there was a number for one through thirty-one; and there was January through December; and there was one through twelve for the months. When it needs to display a date, it would show three little boxes on the website, and only show the little region of that large CSS sprite that had those months. So, dynamically, they could still output a date, but it had some programming stuff in the background that showed you just the little bits that you needed to display the date in that cool way. What a simple technique, and what a really cool end result.

Paul: Yes, brilliant. I’ve literally just found the blog post you’ve written about it. Yeah, you would presume that’s using some kind of rotate thing in CSS3, but it’s such a simple little way of doing it. Brilliant. Love it.

Chris: So, the day after that was published, Jonathan Snook wrote a follow-up article that showed exactly that. Yeah, that’s cool, but you can do that in CSS3. It’s a good example of where progressive enhancement can step in.

Paul: Absolutely. The other thing that I wanted to touch on is the fact that in CSS-Tricks, you talk a lot about JQuery as well. I take you’re a massive fan of JQuery.

Chris: Yes, that’s really all it is. When I was first learning JavaScript, I ended up getting a book on JQuery. I had heard a lot about it and heard that a lot of other designers liked it. I read Karl Swedberg’s book, Learning JQuery, pretty much on a plane. I was glued to it. I thought, "This is so cool, it uses CSS selectors." I just started writing and creating my own examples, so it was a pretty organic process of learning. I’m a front-end guy. I’m not much of a programmer, necessarily. Now that I’ve learned JQuery, it’s a little hard for me to… I don’t know much MooTools. I can’t write Prototype. I stick with what I know, so as it turns out, I just got back a few weeks ago from the JQuery conference. I got to meet some of the creators of JQuery and the guys on that team. It was just amazing.

Paul: You’ve just described yourself, you’re a front-end guy. Did you find JQuery easy to pick up?

Chris: Yes, that’s the real strength of it. That for one. I said this in talks before, it’s like choosing the guitar, because if you do a Google search for guitar chords on a certain song, you’ll get a million hits. But if you look up "banjo tab," you’ll get a lot fewer hits. It’s like that with JQuery and JQuery libraries. There’s just so much more out there for JQuery. The community is bigger. It’s easier to find support for it. It’s easier to find beginner tutorials for it. It’s a good choice that way. Also, maybe I’m a little biased, maybe not the best guy to ask about this thing, but it may be the best one, too. The brains behind it. And the continuing development is so strong that I have a good feeling that it’s the best one.

Paul: Yes, and it looks like it’s got a dedicated team really working to develop it long-term. It doesn’t look like it’s going away anytime soon. And from a designer’s point of view, it’s such a pleasure to work with. Because as we said earlier, it’s like using CSS. It’s beautiful.

Chris: It reads like the English language. Target a div with a class of thing and hide it. If you’ve never seen JavaScript in your life, but you did have a little bit of CSS knowledge, you could read that sentence and see that clearly they’re hiding that div. There’s no doubt about it.

Paul: It’s great as well for picking up on other people’s code. If you work as a team, which obviously we do at Headscape, so that works well.

Chris: You guys use it at Headscape?

Paul: Oh yes. We use it all the time. It’s quick as well, is the other thing I love about it. You can turn stuff around so quickly with it, in comparison to writing JavaScript from the ground up. There’s very little reason not to. I do think it’s good to have an understanding of, a good grasp on JavaScript before you start relying on something like JQuery, but you know…

Chris: That’s a whole conversation to itself.

Paul: That would start a good, old argument. We had Dustin Diaz on the podcast recently, who is now working at Twitter, and he…

Chris: Oh really? Is he?

Paul: Yes, and he was brewing JQuery, but I think mainly, simply because of the size and scale they’ve reached, it’s not a problem I think most of us will ever have.

Chris: Really? Is that one released yet? I guess…

Paul: It will be by the time this one goes out. It’s going out next week, as of the time we’re recording this. It’s very confusing, isn’t it?

Chris: I look forward to it. It’s very rare that you hear someone on any other side of JQuery other than gushing…

Paul: He’s not… He’s very pragmatic about it, I think he quite likes JQuery, and he’s not criticizing it. He’s just saying that it’s reached its limitations for them, which is entirely understandable, I guess.

Chris: Absolutely.

Paul: Talking of controversial subjects, I want to pick your brain over this subject of Flash versus CSS and HTML. Increasingly, there are people saying that you don’t really need Flash much these days. CSS and HTML can do most of the stuff you want to do, especially now with HTML5, native video support and that kind of thing. What’s your take on Flash? As a front-end designer, is it technology you use very much? Do you think it’s going away? What’s your opinion?

Chris: It’s just another huge bag of monkeys.

Paul: (laughs) That’s why I brought it up!

Chris: I think there’s big ad agencies out there… My roommate works at an ad agency, and Sprint is one of their clients. A huge, huge client here in the States to have. They have a whole team of Flash developers. They’re really good at Flash. They make Flash-based sites, and it’s not unusual. There are a lot of people out there who are really good at Flash, that’s what their training was in, and they’re going to keep writing Flash. It has such a huge… It’s on something like 98% of browsers. It’s going to be around for a long time. However, with all this controversy and stuff happening right now and how it’s not available on the iPad or iPhone… According to Steve Jobs’ comments, it’s not going to be any time soon. If you’re brand new or going to school or maybe just learning on the side, development, specifically mobile device development, are you going to pick Flash today? Probably not. That’s my opinion on it. As they get older and better and start entering the workforce, they’re not going to be using Flash. They’re going to be using these new technologies, hence the long death of Flash.

Paul: So you do think there will be a long death of it. You don’t think that this is a blip we’re seeing at the moment?

Chris: No, I think long, as in long, long. Five years. Ten years. I agree, though. I’m on the anti-Flash side, to be clear. I guess I didn’t sound pro-Flash, but…

Paul: If you run a website called CSS-Tricks, we’re going to presume that you’re not very excited about Flash.

Chris: And one of the reasons is that I just don’t know it, so I don’t write about it.

Paul: Did you ever know it? Was it a technology you used to use back in the day?

Chris: I did. In college, actually, it’s almost all we did. Pretty much when I got my degree, which is a Bachelor of Arts in Multimedia Communications, that’s all we did. We used Macromedia Flash, it was at the time, and we also used Director, which is like Flash, also frame-based. But I was never particularly good at it. You get your degree in it, and you made three sites that were for fake clients and ultimately garbage. It’s not like I ever really embraced the Flash thing.

Paul: It’s a sad reflection that when I was at university, they didn’t have multimedia courses, because there was no such thing as multimedia. (laughs)

Chris: (laughs) What about Headscape? Do you guys touch it in any way?

Paul: Yes, we do use it occasionally, mainly for video-related stuff. We’ve used it for some mapping stuff in the past, which is quite specific kinds of things that don’t work well with Google maps or the clients have specific requirements that are outside of using Google’s license. But no, we don’t use it heavily. We’ve got one guy who knows his way around it pretty well. We keep him with it, is the best way of putting it. I, on the other hand, haven’t got a flipping clue. I gave up at ActionScript 1, as soon as you could stop dragging things around, I lost interest.

Chris: Absolutely. And I feel like the tools available for Flash are still way, way stronger, to sit there and make a frame-based animation of stuff flying around is something cool. At least I don’t know about them yet, a program on your computer you can fire up and create something like that and have the output be HTML5 and JavaScript with canvas. I just don’t think those tools are around yet.

Paul: No. So, just to wrap this up as we come to the end, I’m quite interested in you, really, and your career and CSS-Tricks. How do you see that? You said it started off as very much a way of documenting your thoughts, but obviously it’s grown to be a lot more than that. Is it a personal brand tool for you? Is it a winning-work tool? How do you use it? You must sink a huge number of hours into it.

Chris: Yes, it’s maybe less than you might think. I get emails from people saying "how do you possibly manage your time and do all the stuff that you do?" I don’t have any crazy "I use Getting Things Done." I don’t have any super secrets to it. I just work on stuff. And once the site is designed, I fire up WordPress. It’s a WordPress site, of course, and I type a little article, hit publish, and it’s not an all-consuming, ten hours a day thing. I probably do spend a couple of hours, because there are things that need to be done, like approving comments and keeping spam off the forums and stuff like that. But it’s not all-consuming. I keep a full-time job. I’m leaving this job now, so the past three years, like I said, the place where I started. I started CSS-Tricks while I was starting this new job. I’ve been there for a long time. It’s been a great job, but since CSS-Tricks has done well, and since I put out a book about WordPress and that did pretty well, I’ve just been blessed in that way of having projects I’ve done go well. I think I’m going to move on from this job and do my own thing for a little while and let CSS-Tricks support me. That was my plan, to maybe at least take the summer off and bum around. I was looking forward to that. I was approached by Wufoo.com. I told you a little about it before we started here. I might mention that. I’ve been a huge fan of Wufoo. If people don’t know it, it’s an online form-builder, making forms, from simple to extremely complicated and what would take a long time to code. I’ve been a big fan of them for a long time, and anybody who comes to me saying "I’m trying to use a form and need help," I just say to use Wufoo, please. It’s saved me an unbelievable amount of time. I think they were aware that I had become an evangelist for them, in a way, and I got to know them after meeting them at a few conferences. They offered me a job, and I accepted it. I’ll be starting at Wufoo, so that’s going to be a big change in my career that I’m very much looking forward to.

Paul: That’s really interesting. You basically tried to go to a kind of freelance or use CSS-Tricks more as a money-earner for you, and you got snatched up before you had the chance to get going in it.

Chris: Yep, that’s how it was. I was all prepared to say no to jobs. I was going to publicly say that I’m going on my own. I’m not a fan of freelance. I’m not built for that.

Paul: That’s interesting. Why not?

Chris: I find it very stressful, to be honest. I find dealing directly with clients, the emails at all hours, the responsibility of billing and all that stuff to be more than my little head can handle. It’s much easier writing a little article and hitting publish and making no promises.

Paul: The plan was to make money off the back of CSS-Tricks, then.

Chris: And maybe to do another book in my spare time.

Paul: That makes sense. Well, it will be interesting to see what happens then. Wufoo.

Chris: Yeah, I don’t know yet. We’ve talked a little bit. I don’t start until June 8th, but I couldn’t be more excited. They’re such great guys, and the job seems so great.

Paul: Excellent! Well it’s really good to talk to you, Chris! We haven’t had a chance to catch up in the past, and I was keen to get you on the show. Obviously, you’re producing some excellent work out there and sharing stuff that’s really useful to people. I wanted a chance to introduce you to the Boagworld audience. They can go and check out what you’re doing.

Chris: I couldn’t be more honored to be on the show. Like I said, we’ve been fans of each other, I guess, for a while.

Paul: Mutual appreciation. That’s always the way to go.

Chris: Thanks for having me.

Paul: Check out Chris at css-tricks.com, and hopefully we will get you back on the show in the future, Chris, maybe about something more specific next time around. Thanks for coming on!

Chris: Okay.

Thanks goes to Traci Brigham 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.

Book a consultancy clinic or contact Rob about a more in-depth review.