ChrisCoyier, 36, embodies strategy and connectivity in his products. For him, with asoft smile and large boots his personality fosters a since of mystery and cleverness when youmeet him. He wasn’t afraid to keep growing each project to their fullest extent, with deepinterest in seeing where it would morph into. CSS-Tricks, Shop Talk and finallyCodePen were all customer powered applications that allowed for teachablemoments.
Coyiergrew up in Verona, a middle class suburb of Madison, Wisconsin. With niceschools and every opportunity there, Chris from the beginning was interested inarts. "I remember our ceramics department in high school was nicer thanmost colleges had. We had a natatorium, a fancy new theater, an excellent gym,and certainly influential to me: multiple computer labs. We had computercourses to go with them, including multiple computer programmingelectives". He took advantage of the circumstances and introduced himselfto both fine arts and the computer early on. "I took and enjoyed ceramicsvery much, but nearly equally as much the computer programming stuff. Mr. Scottwas our teacher and I took to his teaching style very well. I remember beingvery excited about building a Game of Life simulation in Turbo Pascal, and anetworked Battleship game after that".
"Myparents were also very supportive. I always had a nice computer and all of theonline time I wanted back then. This is a pretty clear picture of whatprivilege looks like. We weren't rich. We had rough patches. Things weren'texactly handed to me. I worked hard. But nobody doubted me. Nobody talked downto me. Everyone supported my ideas and encouraged me. I had plenty ofopportunity."
Coyierstarted at Chatman Design as a web designer in 2007 and during this timestarted CSS-Tricks, a portal, blog like, with a brown and orange professionalpresentation with loads of web design tips and tricks such as "CSSIcons", "SVG and Media Queries" and more. Perfect for theintermediate designer, one can travel back in time as they go to the earliestpost. Today it boast a large following and defines many interviews and messagesthat can leave you inspired.
Coyierran "Digging into WordPress" the blog and created "Are My SitesUp" in three months, then soon publishing the book version "Digginginto WordPress" which is a precedent study for many inspiring WordPressenthusiasts creating story specific senarios for how advance the technique.Starting full time at Wufoo and one of the lead designers allowed the formcreation tool to expand on its brand and product. Soon afterwards Wufoo wasaquired by Survey Monkey and the merger fostered Coyier into technical work ata large scale.
Duringthe "ShopTalk Show" days where he interviews hundreds of designersand product makers there was inspiration to start a product of his own.Particularly encouraged by continued inner teachings of web design, csstechniques and frontend masteries Coyier connected with his friends AlexVazquez and Tim Sabat both full stack developers. The three of them, knowingthat they wanted to create a product together before, insisted in 2012 tostart. The first rendition of CodePen defined an early under-ground-ishcommunity where frontend code including HTML, JS, and CSS code and a designpreview could be shared amongst one another. Today it boast over 783K users and9.3 Million Pens (shared designs). "The concept just came out and we thought it was good foreveryone". Coyier placed himself as lead designer full time and togetherthe three of them have grown the team to 8.
Sittingdown with Chris Coyier one can see his humbleness as he runs three productswhile still playing the banjo and guitar on the side.
Do you remember a particular time when you knew thatDesign and contributing to the web was something you wanted to enter or pursue?I do remember early days of poking around learning web design byinstalling WordPress sites and poking around at their design and how they work.That kind of thing was really invigorating. I enjoyed playing with websitesmore than playing video games. That's still true. I like playing video games,but they aren't nearly as fun as the incredible logic puzzle that is design,programming, and business.
As soonas I started playing with websites, I remember having a feeling that this isthe perfect path forward for me. It's creativity, art, and design. It's thenerdy satisfaction of programming. It's business. It's helping people. It's areal career.
You worked at Wufoo which was acquired by SurveyMonkey. Were you there during the transition? How did the design teams merge? It was a pretty clean transition. Everybody at Wufoowas in Tampa, Florida, and we all had to move out to the Bay Area, California.That was pretty fun.
I wasn't at Wufoo for even a full year before thisacquisition happened, so I was still kinda glowing from even having that joband super fired up to keep working on Wufoo with the existing Wufoo team. Wegot the "wewant to learn from you on how to work" pitch.I naively thought we'd all just get a corner all to ourselves where we'd justkeep on keeping on. That didn't really happen, but not so much because we werenow working for a bigger company, but that the Wufoo team itself was interestedin branching out and doing different things. It ended up being pretty good foreveryone I think. The fact that Wufoo is still going strong today is prettyawesome.
You have started a diversity of different projectssuch as “Are My Sites Up”, “CSS-Tricks”, publishing “Digging into WordPress”and “ShopTalk Show” in addition to CodePen. First what was your favorite? Thenwho were you able to work full time while pursuing these endeavors? Therehave been moments where I've been way over my head with commitments. I'm alwaysteetering on that point. It happened even more often when I was also workingfull time. Things got better when I was able to stop working full time forcompanies and work full time for myself. I decided I'm keeping my main projectload to just CodePen, CSS-Tricks, and ShopTalk, and that's what I'm most proudof because of the long term persistence and dedication to them.
When starting CodePen, how did this early project cometo be and why? CodePen was a little tiny side project I wanted to build,in large part for a way to show off demos on CSS-Tricks. There werepre-existing apps that did this kind of thing, like JS Bin, but I wanted totake a crack at building one myself that I could control.
You mentioned that Alex and Tim came on board and youthe three of you decided to pursue CodePen full time. How was this decisionmade and what were the first couple steps? Was it already launched and activebeforehand?
Alex andTim were involved from day one. In fact, we were actively looking for ideas forthings to work on with each other, as we knew like liked working with eachother and all have some entrepreneurial spirit. I proposed the idea of CodePen,kinda selfishly, as it would be useful to me for CSS-Tricks. They were on boardwith the idea, not because they didn't have any ideas themselves, but justbecause it seemed like a small focused idea we could knock out pretty quickly.As we worked on it, it was pretty clear it was an idea worth making into it'sown full-fledged independent project.
I leftSurvey Monkey shortly after we first started working on CodePen. Alex and Timcontinued work there for about another year and worked on CodePen in theevenings and weekends before finally jumping off and coming full time onCodePen.
How did you acquire your first users? What was yourmarketing approach or what social networking sites did you use, if any? Wewere very fortunate in that we didn't have to look very hard to find peoplethat were interested in trying it. That's the benefit of having built anaudience over many years and then building a product that is right up theiralley. A quick tweet at the beginning got us all the beta testers weneeded.
Thesedays, it's still a fortunate situation, because in a sense the people who buildthings on CodePen market it for us. People are proud of the cool things theybuild and share them, and that reaches their audience as well.
Did you craft much of the design and brand forCodePen? I can take credit for some of it, but like I suspect most bigapps, it's quite a mishmash. Sparkbox did a good amount of the current design.We've had contractors like David Desandro do some of the interactions. Ourcurrent employees all have design talent. I tend to art direct and keep thingscohesive.
How did you work with your other co-founders and othernew-hires as CodePen evolved? One big consideration is that we're allremote. No two of us live in the same state. It's a pretty typical setup inwhich we communicate heavily through Slack. We only have one formal meeting perweek, but otherwise keep to short little informal meetings as needed.
We'restill figuring things out. Our goal is to make sure everybody is happy,healthy, and productive. Different people need different things to feel thatway. We try to be as helpful as we can that way, while being full timedevelopers ourselves on the project. We're so small and everyone is socross-disciplinary, fortunately everyone can be little one-person-armies ofgetting stuff done.
Finally, what is next for Chris Coyier? What's nextfor CodePen, is there any new surprises launching? Definitely keep youreye on CodePen. We have, conservatively, years and years of ideas of things wewant to build into CodePen. It's a mix of huge things and little things. We aimfor a pretty steady release of new features and improvements. We have thingswe've been developing for the better part of a year that I hope will be outsoon.
What is your advice in breaking out and building aproduct? My favorite advice is: be persistent. Most projects I've beeninvolved in didn't have a whiff of success for the first few years of work. I (we) kept at it becausethat's the only way things do succeed.
