Interview with Chris Coyier: Creating Tutorials

Quick Background: What do you do? What blogs do you author? What do you do for fun?

My longest running blog is CSS-Tricks, which is basically just me writing about whatever web design stuff I find interesting. The name is a little unfortunate that way, but CSS is still my favorite language for sure. More recently I wrote about about WordPress. Theasd asd asd book and blog are both named Digging Into WordPress.


My main hobby outside of computer nerdery is music. I play a variety of stringed instruments with various levels of intermediate ability. I like me some acoustic old timey music; playing it, and seeing it live as much as I can.

How are you typically inspired to create a tutorial? Is it from a matter of interest? Or do you find situations in your client work that you feel would be beneficial to share?

Yeah I’d say it’s just a reaction to things I found interesting somewhat recently. Sometimes ideas sit for a while so it might be something I found interesting like a month or two ago, but recent enough that I still have the desire to write about it. Client work is a big part of it. Clients are always throwing curveballs at you and reacting to that stuff inspires article ideas. But ideas also come from conversations with other web folks, be it in person or on Twitter or in my forums or whatever. Community breeds no shortage of ideas. I probably have 50 things in my Things list of ideas for articles or screencasts.

Before planning and producing your tutorials, how much consideration do you give to your audience? Do you ever target certain skill levels? Or do you shoot to produce a tutorial that will offer insight into new techniques regardless of skill level?

I really don’t, but I feel like I probably should. I tend to take one of two approaches.

    1. I’ll write an article (or do a screencast), like I was basically talking to myself. I’ll explain things in such a way like I just learned them and found it interesting and now I’m re-explaining it to a contemporary. These tend to be more “intermediate” level. I’m not really capable of doing an “advanced” tutorial partly because I’m not that smart and partly because the subjects I talk about, generally HTML and CSS, just aren’t that complicated of languages.
    2. Sometimes, when I want to cover a single specific topic very in-depth, I’ll go super beginner style and pretend like I’m talking to someone who is just getting to grasp with HTML and CSS. For example, if I’m writing an article about how floats work, you can’t really assume that people already know how floats work, otherwise that would be a pretty short article!
      One thing NetTuts recently started doing is placing skill level / difficulty ratings right at the top of articles. I think that’s a pretty smart move.

We know in web design there are many ways to achieve a certain design goal. When planning your tutorials, is there any avenue you prefer to reach your goals? (i.e. Least amount of code, most SEO friendly, fastest solution, most scalable)

I’d like to think I take all that stuff into consideration but that’s probably not true every single time. In general, I’ll start with some kind of cool idea or problem to solve and then just figure out a way to do it. Then I’ll revisit it later and see if there is any way to make it better at all those things you mentioned. If there is a way to have it be less lines of JavaScript, or not repeat some code or something, I’ll update it. One thing that sometimes bites me is accessibility. When doing fancy JavaScript stuff, it’s really easy to just ignore accessibility. Partly because sometimes building in accessibility is just as difficult as the technique itself. But I do think it’s important and ultimately makes for a better concept and ultimately a better tutorial. Generally I feel better accessibility is good SEO, so that’s a bonus.

It is often easier to picture one’s thoughts then to articulate them. Do you ever struggle with insuring that your tutorials are clear and understandable?

Sometimes. I feel like a reader of my site could probably answer better than myself, but personally I feel like I’ve gotten better at it over time. The less words you can say something in, the better. My general forumula: here is the goal, here is why I think it’s interesting, here is how you accomplish it step by step, check out the demo and download. If something is boring, I’ll skip it. I don’t need to teach how to center a website in every single demo I do.

Digging Into WordPress

What kind of tutorial do you enjoy creating the most? Is there any you like seeing from others?

I’ll always love a good CSS tutorial, but they are less and less of them around these days, on my own site and others. I think it’s kinda of because, as I said before, CSS is just kind of a simple language and there is a saturation point where you have said just about all you have to say about CSS. There is a bit of a resurgence due to all the CSS3 hype, which is well deserved. What will really make CSS tutorials live on, is approaching tutorials more from a design perspective. Here is a cool design, here is how it was done in CSS. That is limitless to me.

I love JavaScript tutorials almost the most, because the language is more complex and I have more to learn there. A great JavaScript tutorial these days can be pretty eye opening. Like, wow, I didn’t even know that was possible.

Between all the fancy animation stuff now becoming available with JavaScript libraries and CSS3, and new features and interesting stuff with HTML5, there is enough fodder for tutorials forever!

Finally, do you ever revisit your old tutorials and say, “man I wish I had done this or that differently”?

Of course. A lot of my stuff from years ago I look back on and basically consider it garbage. But then I’ll get a note from someone regarding one of them and how much it helped them, so I just kinda leave them alone. If there is one that I look back on and go “man that was a cool idea but it’s done poorly”, I’ll go ahead and update it and repost it. Nothing wrong with that, in fact I think people like it, since it shows that the site is maintained and kept up to date.

Thanks to Chris Coyier

DesignLint would like to thank Chris Coyier for taking the time to answer the questions above. If you haven’t already, take the time to visit his sites CSSTricks, Digging Into WordPress and Are My Sites Up.

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: