Chatting With Chris Coyier

Many of us here at NETTUTS are big fans of Chris Coyier and his work on CSS-Tricks.com. Throughout the years Chris has published many tutorials, websites, and scripts to help designers and developers improve their skills. Today, we will sit down with the man behind these articles, and chat with him about CSS, design, and life in the town of Portland.

Most us are familiar with you and your work thanks to CSS-Tricks.com. For those who don’t know you well, can you tell us a bit about yourself and what you do?

I’m a regular every day web designer. You guys have had some real rockstar designers and developers interviewed on NETTUTS lately. I’m flattered to be asked for an interview, as I’m not even close to their league! What I do is chug through my daily life as a web designer, and then try to share all the cool stuff I learn however I can.

What was the major motivator that got you interested in web design and development?

It’s hard to put my finger on it exactly, but I think it’s basically a desire to create. Some people like to put their fingers in clay and form it into shapes, some people like to press charcoal against paper. It satisfies them creatively. I feel that same sense of satisfaction from creating a website that does what it is supposed to do.

Are you currently working for any design companies or are you freelancing full time now?

I live in Portland, Oregon at the moment but I lived most of my life in Madison, Wisconsin. I still work for a design company in Madison, Chatman Design. We’re a pretty little company, just three guys, and I’m the only web guy. I don’t really freelance, it’s too stressful for me I find and I stay busy enough without it.

When did you launch your website CSS-Tricks? What was the prime motivator for the creation of this site?

It was launched in the Summer of 2007, shortly after I started at Chatman Design. I actually had this idea I was going to start a blog for every single program in the Adobe Creative Suite and provide help, tips and tricks for all of them. CSS-Tricks was a part of that as kind of a weird tag along. It became obvious fairly quickly that this was just stupid. Having many different blogs spread my attention too thin. CSS-Tricks was the one I enjoyed writing for the most, so I gave that my all and let the others die off. I motivated today in the same I was I motivated when I started it, to share all the cool stuff I was learning.

Recently, CSS-Tricks underwent a massive redesign. What were some of the biggest hurdles and most difficult aspects of the redesign?

The goal first and foremost was to create something more visually appealing. This is the first iteration of the design that I am quite attracted to, so that was vital. I also wanted to make sure to use some more modern techniques, so there is some jQuery in there and a little @font-face for fun. The other goal was to get the content more organized on the backend. The screencast homepage and all the individual video pages were all just static pages that I created and updated as needed. Clearly this was not sustainable, so the redesign involved moving all that (and more) into my WordPress backend so that future updates were easier. On top of that, the forums are a big part of the site only they use phpBB to run, so after the design was done I had to create a new skin for phpBB so that that area felt like the rest of the site. I wrote a little more on the redesign here.

Speaking of CSS-Tricks, we have to ask, do you have one favorite CSS-Trick you use frequently?

My favorite CSS tricks are the simple ones. Using simple, reusable styles is big for me. I love using a .button class that makes it easy to turn any link or input into a button. I like using ID’s on the body to set page specific styles. I use CSS image replacement on almost every project I do. I also think absolute positioning is underused in general.

What do you find to be the most frustrating feature, bug, or implementation of CSS?

The most frustrating thing when writing CSS is almost always the cross-browser stuff. I feel like I’m pretty good at avoiding the major pitfalls, yet still in almost every project I do, I end up finding cross-browser problems I need to go back and fix. Just today I had one where I had relative positioning on a wrapper div I was using that had three floated elements inside it. Every browser was fine except IE 7 that was rendering it’s width at 0. I had to go back and add a special width: 100% to fix it. Not a big deal, but just frustrating. There is LOTS of stuff that could be better about CSS. One of my favorite posts ever I asked other designers about just this. Even NETTUTS own Jeffrey Way and Collis Ta’eed respond.

I’ve noticed your an avid music lover. What genre of music would you consider your favorite and why?

I’m a big fan of old time music. Clawhammer banjo and fiddles and guitars. I used to play in an old time band in college and for a few years after, but I don’t play out anymore. I still pick up the banjo almost every day though. I like all kinds of music though, even the new hip stuff the kids like. I’ve been enjoying Fleet Foxes lately.

David Walsh of DavidWalsh.name seems to be someone you colloberate with often. How do you two know each other and when did you decide to work together?

David is also from Madison also, although I didn’t really “meet” him until after I moved to Portland. I think David is a talented programmer. I bug him constantly for help with JavaScript and PHP stuff. Literally, constantly, I’m sure it’s annoying. We were both interested in doing a community-powered link thing at the same time, so it made more sense to collaborate than do independent things. That is where Script & Style came from.

What activities and hobbies do you enjoy when you’re not on the computer designing?

I like playing my instruments and seeing live music. I like taking pictures although I wish I did a lot more of it. I need a new lens! I also like watching the moving pictures with the sound they got down there at the theater now’days.

Tell us a a little more about your Band Website Template and where you got the idea from.

I was literally asked by a band I was working on a site for to build something like this. Not a template per-say, but a system to easily add new shows, edit/delete existing ones, and to automatically remove shows as they pass. I thought that sounded entirely reasonable, and something that any band in the world would want on their website. Unfortunately, I’m not much of a programmer, so I got David to build the backend for me. It only made sense to design a template around it and make it available to anyone. That’s exactly what we did and split the proceeds down the middle. I still think it’s a cool product to this day. I like the idea of templates that offer a little extra in terms of specific functionality.

You created Script and Style, a web development resource website. What framework or CMS (if any) was S&S built upon and what was the experience like developing such a site?

Script & Style is built with WordPress, the TDO Mini Forms plugin, and some custom hack work by David. It was important for us to make sure that direct links were available to the articles no matter what. On the site, through the feeds, or integrated into other sites, that’s the part that took a little hackery. It was fun to build but it’s even more fun to watch grow and help make better. One of the hardest parts about it is making sure that everything we push through is a quality interesting article, and that it’s a nice variety. It’s harder than it sounds, as if you aren’t careful it could turn into a stream of roundup posts. Which then makes it a roundup of roundups which is just getting out of hand. We prefer linking to the real source of quality articles.

What is the most important question you ask when first meeting with a client to discuss a new design or project?

I think that first meeting should be 75% about them. Who they are, what they do, why they do it, who their customers are, what the goals of the project are. That kind of thing. Then 25% about you. Who you are, how you work, what you expect, things you have done in the past that might be relevant. It should be 0% about design, technologies used, or any specifics about what the final product might be. After you get a good feel for each other, then the NEXT discussion can be more focused on a proposal and ideas for a final product.

Obviously, it depends on the current job or project, but do you prefer a certain javascript framework? CMS?

As much as I want to be, I’m really not much of a programmer, so I like sticking to stuff that I know and trying to get as good as I can be at those things. I’ve been using jQuery a lot, I really like it, so that is my favorite framework but I don’t know enough about the others to offer up a fair comparison. I also love me some WordPress. I’ve used it in a ton of different projects with lots of differnet goals and applications and I feel like I can get it to do almost anything I want. But again, I’ve never even used Joomla so I don’t know enough to make a fair comparison.

Have you written any books? If not, do you plan on writing one in the future?

Hush hush! No details yet but their is definitely a book already in the works. All I can say is that I’m wicked pumped about it. The plan is to take as much time as it needs and make it the best of it’s kind. I’ll mention something on CSS-Tricks when the time comes.

Found on ChrisCoyier.net is your personal photo stream. Is photography a passion of yours? Do you feel this helps improve your overall design skills and creativity? What kind of camera do you use?

I wouldn’t call it a passion but I really do enjoy it. It’s the #1 thing I wish I did more of. I’m saving my pennies for a nice Macro lens, as I’m really attracted to that style of photography and I hear they also double as nice portrait lenses which I also enjoy. I have a Canon Rebel XTi.

Do you have any websites or projects you would like to shamelessly plug to over 25,000 subscribers and 1 million readers every month?

Absolutely! I really want people to check out my latest project Are My Sites Up? It’s a website monitoring service I built with my friend Richard. I think it’s a fantastic service for freelance designers and web design agencies to use to keep an eye on their sites so they can react quickly to any problems. There is a free plan as well as an inexpensive feature-packed premium plan.

A very sincere thanks to Chris Coyier for taking the time to chat with us today!

You might also enjoy…

• 

  Chatting with Cameron Moll

  Many of you are familiar with Cameron Moll via his successful books, Mobile Web Design, and CSS Mastery. Today, we’ll be talking with him about everything ranging from rock bands to the future of the web.

  Read Article

• 

  Quick Fire With Jeff Croft

  Some of you may have read his successful books. Others might keep track of him via
  his popular blog. Nevertheless, Jeff Croft is one of the leading advocates of web
  standards today. In this quick fire, Jeff will answer everything from his favorite
  music to his “web development pet peeves”. Enjoy!

  Read Article

• 

  An Interview With Jonathan Snook

  With a wife and kids, Jonathan says, the work day must end precisely at 5:00. Yet somewhow, he still manages to be an accomplished web developer, writer, blogger, freelancer – you name it! One wonders if Jonathan uses a special clock that the rest of us aren’t privy to.

  Read Article

• 

  Checking In With Eric Meyer”

  In this interview, Eric talks about where he sees CSS moving as well as his work
  life after having another baby girl. If you have any additional questions, leave
  a comment and – just maybe – Eric might respond. No promises!

  Read Article

• Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.