2008-08-27

Chris Coyier: the man behind CSS- Tricks

We welcome to the hot seat Chris Coyier. He is the designer and writer behind the CSS-Tricks blog. CSS-Tricks discusses new tricks (duh), ideas, and styles in CSS.

Preeti at Web Hosting Search: Let's start with the beginning, how did you decide to apply for a job at Chatman Design without any 'real web' experience?

Chris Coyier: It was a lucky break, really. I head from a friend of a friend they need somebody quickly so I got my resume together and called over there. I was working this crazy job as a Prepress tech at a printing company working three 12 hour shifts from 6pm to 6am. So I had four days off every week and I was spending my time immersed in learning about web design.

So I didn't have any "real" web experience, but I had plenty of "learning on my own" web experience. During my first interview, we popped open a laptop and viewed some of the sites I had been working on. So that's an important tip, definitely have some websites ready to show off if you are trying to get a web design job!

WHS: How was CSS-Tricks born (for those who don't know)?

CC: That first obsession with web design began with this idea to start a bunch of blogs focused around helping people out with design stuff. Most of them were focused on specific Adobe software (like IllustratorHelp.com, now long gone). By far the least successful of these was CSS-Tricks.com, but as it turned out, it was the one that I enjoyed writing for the most. It became my early journal for documenting all the stuff I was learning about web design. I found that if I wrote up what I was learning as a tutorial I learned it myself a lot better. That is basically still what CSS-Tricks is today! Only it's just grown a lot since then and all those other blogs have faded away.

WHS: How do you balance your schedule between the day job and CSS-Tricks?

CC: I work regular day-job hours where I work on day-job stuff. I work on other projects, including CSS-Tricks at night and weekends and when I have free time. It's manageable. CSS-Tricks requires no particular commitments. I plan to keep active at it forever, but if my work schedule got too busy or something unforeseen were to happen, it could take a rest. The day-job is where all the ideas come from anyway, it's like my training for CSS-Tricks.

WHS: You have Band Website Template, any plans for more sites like this?

CC: Yep. That was fun to make! The idea is that its a website template, but not soley just a design. It comes with extra functionality built in that is specific to the type of site it is. In the case of the Band Website Template, it is a secure interface for managing a gig calendar. Something that all band websites need. I help some friends out with a website for their band, and the idea was first built into their site and then re-structured for this template.

When we do a new template, I want it to be the same way. Not just a design, but some context-specific functionality. I want them to so well made and designed that even if you didn't need the template, you could buy it and poke through it as a lesson in web design and development.

WHS: What is your favorite CSS-Trick? Okay maybe you can't choose one, two is fine.

CC: My favorites are really the big classics. CSS sprites are really cool. That is, using one big image which you only display small parts of in certain places. You can drastically reduce the number of server requests using CSS sprites properly and significantly speed up a website. CSS image replacement is a classic too, allowing you to use really clear, semantic, text tags in your HTML and then swapping that out for an image with CSS. This provides the best of all worlds, full design control, high accessibility, and better SEO. Another favorite is the sticky footer, that's a clever bit of CSS right there.

WHS: For those new to web designing, what is CSS and why is it important to use it?

CC: Even if you aren't a web designer, you know what HTML is. It's the language which browsers read to display websites. Every website in the world uses it (or a version of it). Even "Flash" websites are just flash files embedded into HTML. The idea behind CSS is remove anything from the HTML that has to do with the design of the website, leaving behind only the content of the website. Having those two things separate is loaded with positives. Perhaps most importantly, it keeps your code easier for YOU to understand. Updating content becomes a lot easier.

Search engines also have a lot easier time with content not cluttered with irrelevant information. Changing the design down the road becomes a lot easier. The pages are more efficient and load faster. The list goes on and on. With today's internet, any site not using CSS for design/layout is just dumb.

WHS: So I'm trying to make my own website and learn CSS, HTML, etc, but it can be very confusing. What advice do you give to new web designers?

CC: My advice is to start with a template. Download something you like from somewhere, get it up as website, and then start getting creative and changing things to get them how you want them. How I learned was actually installing WordPress and messing with themes. You can learn a lot that way quickly.

Then, once you have your feet wet, go back and start learning some fundamentals. What is the box model and how does that work? If you start with those fundamentals, you will bore yourself to sleep because you don't have something tangible to relate it to first. It's a bit like learning the guitar. Yes, you really need to work on fundamentals. But, it's a heck of a lot funner and you'll stick with it if you learn to play a song first.

Let's talk about you…

WHS: I notice one of your hobbies is photography? What do you like to shoot?

CC: I'm really an amateur, but it is really fun. I'm attracted to all the nerdy things you need to know about like shutter speed and aperture. Portraiture is usually my favorite, I like close up candid shots that happen to capture something really emotional or special. Like I said though, I'm really an amateur and what I really need to do is just take more pictures!

WHS: How do you enjoy Portland, OR compared to Madison, WI? Does cow tipping exist there? Just kidding. :)

CC: HA! When I was in high school in Verona, WI (just outside of Madison), there was definitely some cow-tipping going on. I didn't grow up here in Portland so I don't really know, but I bet some of the rural areas around here have their fair share. The city of Tillamook actually isn't that far from here which is a gigantic cheese manufacturer, so it's not like there isn't any cows around here =).

Madison is awesome though, I certainly didn't leave because I hated it (Go Badgers!). I work from home and so I can work from anywhere and I'm just out here for the change in scenery.

WHS: mmmm. cheese.

WHS: Lastly, you have some pretty cool friends: Chris Spooner, David Walsh, Steven Snell. Do you get to met IRL or is it virtually?

CC: I've actually never met any of those guys in real life, which is too bad really. Even David, who is from Madison, I've never actually met. We became better friends after I had moved out here to Portland. All three of these guys do seriously amazing work though which I really respect on top of them just being nice guys in general.

I'd probably meet folks more often if I actually went to conferences or meetups or anything, I just never seem to make it. I somehow manage to have some friends in real life too, who are also very cool, just aren't techy enough to be on my blogroll =).

Thank you Chris for your time on this interview. We definitely love to hear about the inside view of web designing. If you want to contact Chris, you can do so by visiting his website at www.css-tricks.com . Either way, do visit his website, there's a dearth of good information.

And P.S. we also want to wish him a happy birthday!

Add Your Thoughts

captcha

Gravatar

Commented by: Shashi Kumar, 22 May, 2009

Firstly Thank you for posting this great interview from Chris, I regularlky visit css-tricks and learnt the most valuable things needed in this business from css-tricks, nevr had the time to say thanks to chris there, her I thank you both

Gravatar

Commented by: AskApache, 22 July, 2009

For sure I've been a huge fan of css-tricks.com for years.. Back when I was really learning CSS that was T-H-E place I would go to learn cool stuff... lots of ground-breaking articles etc.. Nice interview!

Gravatar

Commented by: dougS, 7 October, 2009

For sure, Chris is a rock star. No doubt about it. Thanks!

Gravatar

Commented by: Bob, 28 December, 2009

Thank You very much! Now it works. I wish, I had found this document a few hours earlier.
membuat Blog

Gravatar

Commented by: Elune, 4 January, 2010

Thanks for useful CSS tutorials!

Gravatar

Commented by: telecharger sonnerie gratuite, 1 March, 2010

You know, i always have to work with Internet but i have little experience about web. Thanks a lot for your useful article. I wish you would keep on posting more.

Gravatar

Commented by: dog tags for dogs, 1 December, 2010

I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I'll be subscribing to your feed and I hope you post again soon.
<a href="http://dogtagsfordogs.org">dog tags for dogs</a>

  • 2013-10-07

    The Importance of a Great 404 Page

    There are few pages more dreaded in the web design world than the 404 error page, which flashes on the screen when users click on a link that simply cannot be found on the site's web server. It's a page that is almost always equated automatically with failure or a dead end, but it just doesn't have to be that way. In fact, websites that embrace 404 error pages as more of an opportunity than a failure will stand the best chance at capturing "lost" users and turning them into viable clicks.
    error message index
  • increase traffic index
    2013-09-23

    Increase Your Site's Traffic

    Though search engine optimization has only recently gone mainstream among sites of all sizes and backgrounds, it's something that has been developing step-by-step for at least the past decade. Search engine optimization, often abbreviated SEO, is designed to make sure that a page is considered the most relevant result for certain keywords. This is done through any number of approved practices, including the use of certain keywords, the regular posting of new content to a website, or the regular engagement of users with site content or product listings. Though the vast majority of websites fall within the guidelines set by major search engines, many other sites have been known to artificially raise their standings in search results at Google, Yahoo, and Bing by using shady tactics that are often strictly prohibited.
  • html newsletter
    2013-08-16

    Creating an HTML Newsletter: The How and Why of this Critical Business Communication

    When businesses need to increase their conversion rates, or even boost the reputation and authority of their company's blog, there are few tools more effective than an email newsletter. Though it is easily one of the oldest tools in the digital marketing industry, the email-based newsletter still remains one of the most effective ways for businesses to be noticed, to drive traffic to their own content, and to increase their sales through improved customer awareness and client conversions. There are a few key reasons for this, each of which has remained true since the email newsletter's inception several decades ago.
  • squarespace index
    2013-06-12

    Squarespace - Good Guys of Hosting

    They're pushing the hosting industry forward, all while maintaining the highest of quality. It's our pleasure to present to you Squarespace as one of the Good Guys of Hosting.
  • karl zimmerman index
    2013-05-24

    Steadfast, Good Guys of Hosting

    It’s been a while since we handed out the “badge” Good Guys of Web Hosting to anyone, but what better way to start out the series again than with presenting it to Steadfast.
  • content design index
    2013-04-23

    Attracting New Conversions: Content or Web Design?

    When it comes to search engine optimization, there is only one thing that typically matters to major players like Google, Yahoo, and Bing, and that’s the content featured on the website. The goal of search engine optimization, quite simply, is to develop the website's authority through well-written articles that inspire links, mentions, Facebook and Twitter interactions, and similar activities. Authoritative guest posts, another form of written content, are a great way to further boost the reach of a website and give it even more authority at the major search engines. All of this content-centric importance tends to leave design behind in a big way.
  • 2013-04-14

    Web Hosting Code of Conduct

    Our mission is not only to help the end consumer find quality web hosting but also to push the industry forward. We want to make sure that consumers are safe when signing up for a hosting provider. Stating what should be regarded as the proper practices in the web hosting industry is beneficial for both parties – the consumer and the provider – as it leaves no open question marks. Below are ten items with ethical codes that we believe are important to highlight.
    code of conduct listing2
  • hosting features index
    2013-03-20

    The Best Add-Ons and Features

    By: David Walsh

    Finding the right web host requires a great deal of information, not only about pricing tiers and included features, but also about the extra features that can be added to an account when needed. The best web hosting companies online are the ones that offer the largest amount of add-on features to their customers, ranging from commerce to security and IP addresses. While some might view these add-ons as "hidden charges," the truth is that they're most often to be features that the majority of consumers don't need. Web hosting companies do their best to avoid charging customers for unneeded features, focusing more on value and a la carte pricing for their products.
  • 2013-02-15

    Why Your Business Needs an Online Presence

    In days gone by, marketing was more “physical materials” and less “online presence.” Today, the world of marketing is completely different. What once worked doesn’t work anymore; what doesn’t exist in the past has cornered the marketing industry now. Plus, since marketing is primarily done online, it’s changing all the time, which makes it extremely difficult to keep up with the latest and greatest in promoting your business. However, having an online presence is not just important but integral to your business’ success.
    online presence index
  • web hosting predictions 2013 index
    2013-01-02

    Web Hosting in 2013: Key Trends and Predictions for the Industry

    With all of the talk concerning trends in mobile computing, web design, and a wide range of other high-tech industries, the web hosting sector often gets forgotten by those who forecast trends and predictions for the tech economy. Even so, web hosting and cloud services both remain two of the fastest-growing and most dynamic industries around the world. Their importance continues to grow exponentially with each passing year, especially now that a large number of consumers tote mobile powerhouses in their pockets or bags, largely in the form of smartphones and tablet computing devices.

List all related articles..

Overall Best Web Hosts

1. $1.99Review
Visit Lowest Price Guarantee
2. $2.95Review
3. $4.95Review
4. $3.99Review
5. $3.49Review
Visit Lowest Price Guarantee

Get hosting confidently - When signing up for one of the tagged hosting plans above you can be confident that you are getting the lowest price available for that plan.

Buying Guide

Can't decide what hosting is right for you? Answer 2-5 questions and get your perfect hosting match!

To Questions

User Reviews

Make your voice heard. Review your web hosting provider - good or bad.

  •  
  •  
  •  
  •  
Everything has been very stabile and I was very impressed with all the features and extras that were included in the plan.

Bill about iPage

Read iPage Review