The ability to influence the web design community generally comes via two very different paths. One is to create compelling content that helps others level up their skills by introducing and reinforcing concepts. The other is through creating tools that allow people to utilize and further hone those skills. Chris Coyier is the rare person who has done both.
It all started with CSS-Tricks, the blog/community that helps us learn to do amazing things with style sheets. Then CodePen came along and provided us a venue for putting our design and development techniques to the test – not to mention learn a thing or two from its vast user base. Chris, of course, is responsible (partially so, in the case of CodePen) for bringing both of these indispensable resources online.
I had the opportunity to chat with him via email regarding the origins of those famous projects, the future of CSS, his thoughts on Gutenberg and more. Here’s our conversation – enjoy!
You are, of course, one of the most well-known voices in web design. Yet, according to your timeline, you started out working in software testing and print. You didn’t enter the web industry full-time until 2007. What sparked your interest in moving to web design? Was there a particular moment that inspired the change?
I was 27 in 2007. It was just a few years after graduating college (took me a while). That was my first job where anybody paid me to work on websites. I had built a handful of websites before that, but just for fun. Typical story: “the band needed a website”, wanting a personal site, and ultimately inventing excuses to build more of them.
I really credit WordPress for getting into web design and development more than anything else. After you’ve bought a domain name, hosting, and managed to get the site online with an easy way to update it (that was Coda for me at the time), that’s extremely empowering. It’s all I wanted to do after that. And I knew it was all about content. Making it all work was very fun, but the important part was the content.
Later that same year, you launched CSS-Tricks. What were your goals for the site back then?
At (the) time I had spun up a half dozen WordPress blogs with the idea of filling them up with half decent referential content, slapping Google Ads on them, and crossing my fingers it covered costs + beer money. That’s about how it worked out, which ultimately wasn’t worth it and most of them didn’t work out. The only one I kept online was the weird one, the one about CSS, that I actually liked writing for, because I was so into the subject. I was totally oblivious to the larger web design community, just writing whatever I wanted that seemed helpful. It was all awful, of course, but so is everyone when they first start out in anything.
In your opinion, what has been the key to the growth CSS-Tricks has attained over the years?
The biggest factor is consistency. We’ve published new articles at CSS-Tricks, usually several a day, for over a decade. As a non-genius, that’s the only path toward growth and success that’s ever worked for me.
One thing that stands out is the overall quality of the tutorials and information. How much of a challenge has it been to maintain that high standard?
I think the bar is pretty low for technical blogging these days. By having an editor, making working demos, and basically checking that what we’re writing is true and working helps us stand out a little, I like to think.
I also think we should probably work on raising the bar a little. I feel some pressure to keep the content train rolling (it’s good for everyone), which means sometimes stuff just has to go and that becomes part of the culture of the site. Sometimes I think: what if we only published one article a week, and put 10x the effort into that post? Would we ultimately get more attention and engagement, or less? Hard to pull off a directional change like that, but it’s food for thought.
CodePen came on the scene in 2012 and has also achieved massive success. Can you talk a little bit about the genesis of that project?
Those early days of CodePen were largely in service of CSS-Tricks. I wanted embeddable demos in blog posts, like mini JSBins or JSFiddles, because those sites were amazing for front end code demos. I just wanted to take a crack at doing it myself, with the help of some very smart friends, and now co-founders.
I think it’s very smart. I was glad to see it shoved out the door. It was an absolutely huge project I’m sure, and to ship such a giant change to the largest software install base in the world… that makes me sweat. A lesser team might never have shipped it.
That’s not to brush aside all the UX and accessibility concerns, I understand all the perspectives there. I’m no accessibility expert, so I can’t speak to that, but I still feel like the UX has a couple of rounds of polish to go to be good.
And yet, I like it. It’s a nice authoring experience. It’s the way that online editors are going and what users expect from an editor. So in a way, I think of it more as catching up with expectations rather than being innovative. In other ways, it is rather innovative. Right out of the gate they opened up the ability to create custom blocks, and that’s where we’ll see the most creative power come from.
One thing that’s a big deal is how fast everything is moving right now. Standards move fast. Browsers move fast.
It sure sounds like you have a busy life. How do you like to unwind?
I like doing stuff outside. It’s early summer right now so it’s mountain biking season here in Bend, Oregon! I also play clawhammer banjo and like playing music with my old-time music friends. But of course, I also love just hanging out with my little family, my wife Miranda and my daughter Ruby is just turning 20 months old and is a lot of fun.
Not too much! Years ago I decided a way to manage stress for myself was not to work on too many different things, so I decided I’ll only work on CodePen, CSS-Tricks, and (the) ShopTalk show. I’ve stuck to that. So if I’m working on something, it’s either directly on those things or something in service to them.
Many thanks to Chris Coyier for taking time out to share his story! If you’d like to learn more about Chris, check out his personal website. And, if you’re a CodePen user, be sure to take a look all the goodies included with their PRO offerings.