For those of you who don’t know him, he is the guy behind css-tricks.com, where he teaches us all the tricks he keeps under the sleeve. Today we have the opportunity to interview him and ask him some questions regarding his approach to the tricky world of CSS.

*Rec sign blinking*
mao: Chris thanks for accepting this interview, it is a pleasure to have you here.

Chris: Thanks for inviting me, mao.

mao: Please introduce yourself.

Chris: My name is Chris Coyier. I am from Madison, Wisconsin but I’m currently living out in the beautiful Portland, Oregon. I am a work-at-home web designer which I really love. I blog about CSS and web design at CSS-Tricks.com. I am fortunate enough to get to work on a large variety of sites and often work “from the ground up”, meaning I get lots of opportunities to start with a fresh slate and go through the design process from start to finish. Every time I do that, I usually end up saturated with ideas for CSS-Tricks, which is nice.

mao: From your css-guru perspective, tell us your can’t-live-without css-tricks?

Chris: The best CSS is semantic HTML. Ha! How’s that for a twist answer? But I am quite serious, if you write clean, semantically sound HTML, I find the CSS just falls into place. That being said, the CSS “tricks” I find myself using the most are simple image replacement and variations on the sprites technique. Also, utilizing other technologies in conjunction with CSS is pretty “tricky” and can have some awesome results. For example, I think there is going to be a post soon on how to change the look of your site when its raining outside, by pulling some weather information from RSS and conditionally changing class names. That kind of stuff amazes me.

mao: When and why did you start to make tableless layouts? How was your transition?

Chris: I did start my designing life designing with tables, but it didn’t last very long. I actually remember the very first design idea I had that frustrated me away from tables. I had this grungy looking frame that I wanted to use right in the middle of the browser window, and then put text inside of it. I knew how to make a table and put image slices into it, but I couldn’t figure out how to put text on top of those images. I ultimately figured out how I could make a div on the page, and then make it as big as I wanted and apply a background image with CSS, then then the text I put inside would appear on top of the frame. Very obvious now, of course, and I also now realize I could have done the same thing with the table. But oh well, I never looked back.

mao: For me, particularly, it’s still difficult to make tableless designs – it still takes me some time make them and a lot more debugging them (God I hate those IE hacks and stuff). What do you recommend for designers like me in order to speed up and optimize the process?

Chris: I think you might just need to force yourself into it. I am definitely at the point where I can’t imagine approaching a layout with tables. To me, tables are scary, especially in the updating cycle. As in, you need to add a table cell here, which squishes this weird, or pushes something else out of the way, or un-aligns some graphics… just not good. Even if you save time up front because you know tables better, I think it’s common to lose time later when updating. With a good CSS design, you get the chance to think right up front: “this area will need to be expandable vertically”, “these menu options may change at a moments notice”, “this color will change seasonally”.

I think if you start with the fundamentals of CSS, and really understand and digest them, it becomes the obvious choice for layout. Fundamentals meaning the box model and positioning, primarily. As far as IE hacks, yes, they are a pain in the butt and we all hate IE, but it’s usually nothing to freak out about. I usually just kinda “code around” them, but there are also ways to declare IE specific stylesheets if it comes to that.

mao: What do you think are the common mistakes when coding css?

Chris: The most common mistake I see is “divitus”. There are some people, especially in their early CSS coding days, that use div’s for EVERYTHING. This isn’t a mistake per say, but it is unclean code and contradictory to the spirit of CSS. This comes back to the semantic code thing. Other mistakes I see fairly often are setting static widths and heights when not necessary, getting too specific with their declarations, being too broad with their declarations, or declaring things that don’t need to be declared. Like setting your header tags to be bold, unnecessary.

mao: When there are complex grids, for tabbing data for example, I still use tables because it’s easier and more accurate imo. What do you do in those situations?

Chris: Tables. Tables are for tabular data, they are brilliant for that. Trying to force some CSS positioning thing around tabular data would be just as egregious as using tables for page layout.

mao: There are still lots of ppl that haven’t done the jump to css layouts yet. What would say to them? What would you recommend for them to do the jump? Where to start? How?

Chris: I would say to them, the time is now. Fortunately for them, I am working on starting to shoot some screencasts for CSS-Tricks covering this very subject. As far as where to start, I think where ever you can get your hands in the dirt is the best place. Download yourself a CSS template somewhere, open up the HTML file in your web browser and the CSS file in your text editor, make changes to the CSS, refresh the page in your browser and see what it does. I learned a lot by installing WordPress years and years ago and poked around trying to create a custom blog template.

mao: There are a lot of resources like the Yahoo! UI Library and naturally css-tricks out there; what other useful resources would you suggest?

Chris: Well, I probably read an unhealthy number of design-related RSS feeds so I can’t list them all. But one of my favorites recently has been Posh CSS, which really tastefully links to cool CSS techniques that I often times miss otherwise. A List Apart is a long time favorite for high quality articles. Of course snap2objects is a must-read =)

mao: How is your coding process? Any recommendations?

Chris: The coding process is just one step in the larger design process, which goes a little something like this:

1. Look at and read as much of the content you will be designing for. Look at and read content of related subjects. Think about who the content is for. Think about how the content will be used. Mix all that together in your mind and sleep on it.
2. Sketch and mockup ideas. Starting on paper is ideal because it frees you from thinking about tools and lets you focus on concept.
3. Convert the best of your mockups into a working site. This is the technical part I write about the most, which I really love but is only one of the steps in the design process.
4. Test the design as throughly as possible. Not only technical does-it-look-right-in-all-browsers testing, but have your friends tell you what they think. Watch your mom try to use the site. You will absolutely find things you can improve doing this.
5. Release the design upon the world and see how it goes. Ask for user feedback. Make changes. Tighten things up. In print design, once your design hit’s the press it’s all over. Web design isn’t like that. It’s fluid. Things can (and should) be constantly changing for the better.

mao: There are lots of css showcases with great sites beautifully crafted. What are the best sites you consider to sport not only beautiful design but also beautiful html (as you famous post say)?

Chris: Actually, I just recently created a roundup of lots and lots of different showcases. There are so many nice ones and I don’t wanna play favorites, but I can say that I tend to like the galleries that themselves have good design, that aren’t over the top with advertisements, and are with search that works well.

mao: Thanks, Chris, for giving this interview (^ ^)/~

Chris: Just to thank you very much for the opportunity to be interviewed! Also, if anyone has any questions about me or CSS or anything else, feel free to contact me through my contact form.

Feel free to ask any questions to Chris. He promised to keep track of the interview and do follow up questions 🙂