Thought Leader Thursday – Chris Coyier

Posted by Wildfire Marketing Group | June 4th, 2009

Hi, it looks like you're new here...be sure and subscribe to our RSS feed. Thanks for visiting and we hope you come back soon!

Thanks for taking the time to share your knowledge with us today Chris. For those outside the design community who may not know, you are pretty much at the top of the food chain when it comes to CSS. Let’s start off with the standard “how did you get started” question?

Thanks for the compliment. Although I’m not sure there is a food chain, we’re all in this thing together!  I think I “got started” in about middle school. Since then, through all of the twists and turns of life, I have been a computer nerd. That has manifested itself in a number of different ways, from hardcore gamer to programmer to designer. When I do anything, I try to dig really deeply into it and get seriously involved. I always knew I loved web design, but college didn’t quite prepare me with the skills I needed to get into it. I ended up working in the printing industry out of college, all the while tinkering with web design and wishing that’s what I was doing. Eventually I managed to get an interview with a design company losing their web guy and squeezed my way into that job and that’s where I’ve been ever since.

CSS is a double edged sword for most designers. It can be tough to learn, but once you master it, you can get a hell of a lot more done in less time, and editing a CSS-based website takes less time and effort. Some people still cling to old, outdated methods to design websites, such as using tables and frames. What advice to do have to help get them over the hump and start using CSS?

I think CSS gets a reputation for being difficult to learn because of the position people are in when they begin. CSS is one of the very first things you need to learn when first starting out in web design. So those people are coming from a “never coded anything before” angle, so of course it’s going to feel difficult at first to understand the strange and abstract concepts at play. CSS might also be learned as an afterthought for already experienced programmers. The syntax of the language itself is trivially easy for them, but they just aren’t designers at heart, so it feels difficult to accomplish designs that look very nice.

If someone is coming from the angle of having being designing websites with tables for years and years and “it works for them”, I’d tell them to consider all the very tangible benefits of CSS layout. Sexy, clean, semantic markup, for one thing. Accessibility, lighter weight pages, better SEO, non source-order-dependent markup, flexibility… Between all that stuff, they should be excited to get to work trying it. And the fact is, it’s just not that difficult. Someone working on the web for years should have no trouble adapting a little to start building pure CSS layouts.
 
 A lot of search engine optimization professionals are starting to see the power of CSS in terms of organizing their code to present content in the most efficient and effective manner to both search engines and visitors. What are some of the most critical opportunities you think they should be taking advantage of with this, and what could they do that might potentially cause problems?

The source-order-independence of CSS layouts is a big one for SEO. In a table-based layout, if you have a left sidebar with ancillary content, that is certainly going to come first in the markup and thus seem to be of higher value and importance to a search bot. A left sidebar in a CSS layout can easily come after the right-side main content, and avoid that problem. Likewise, an excessively large menu system could be placed at the bottom of a page in the markup, but visually in the header.

The biggest SEO advantage of CSS layouts is how slim and trim your HTML becomes. If you are doing it right, nearly every tag in the HTML purely exists to describe the content it contains. This makes quick work for search bots, who will understand the content and hierarchy of your page very clearly.
 
 
Internet Explorer 6 seems to be breathing it’s last few breaths, making many work-arounds obsolete, while CSS itself has undergone a number of changes that give if far more flexibility than ever before. In your opinion, what are some of the coolest, most useful things people can do with CSS today?

It does feel like IE6 is dying more and more these days. I’d say in a years time we’ll see a large percentage of designers just ignoring it like we do with Netscape (for example) now. One of the biggest limitations of IE 6 was the weird hacks we had to use for alpha transparent PNGs, which never seemed to work quite perfectly. It has been a problem for so long for us current-generation designers that many of us just don’t even bother using them anymore. Next generation designers will never have known that pain and the cool possibilities of transparent graphics will be in play more.

@font-face is also very real and as soon as Firefox 3.1 is out and widespread I think we’ll see a ton of this. Magazine style sites are going to get a lot prettier!
 
 
On the other side of that coin, what are some of the biggest weaknesses of CSS today and what can designers do to work around them?

CSS has plenty of weaknesses. Grid-like layouts are way harder than they need to be, which always fuels the flames in the tables vs. CSS wars. Obviously font usage is kind of a mess, but beyond that web typography is severely limited. Kerning is far too difficult, we can’t have type follow a certain path, we can’t have type knock out backgrounds or have backgrounds of it’s own easily. Unfortunately the answer for a lot of this isn’t “add a bunch of new stuff to CSS3″. Some of it is root/fundamental problems that will likely need a root/fundamental rewriting of the language. If you think CSS3 is going to take a long time…

Some of the really simple shortcomings are solvable via JavaScript. Think of the lack of support for nth-child selectors, which make zebra striping a table trivially easy. Doesn’t work in IE of course, but jQuery has an :odd selector that makes it incredible easy to implement that DOES work in IE.
 
Your website, CSS Tricks, is loaded with tutorials along with one of the most active CSS forums I’ve found. You already had a full-time job when you started it; what was the motivation behind it?

The day it started it was a part of a network of sites I had going intending to be sort of help/resource sites. CSS-Tricks was there specifically because we didn’t have anything web related yet and all the stuff I was learning from building all these other sites had me reeling with ideas. So now I had this outlet to be writing about the cool stuff I was learning about web design. Turns out that is what I enjoyed the most and so when the other fizzled out, CSS-Tricks kept going strong. It has always been a combination of wanting to help people and share ideas, a record keeping mechanism for myself, and the desire to make a buck or two on running a successful site.

Related posts:

1. Thought Leader Thursday – Chris Brogan - Thanks for taking the time to share your knowledge with us today Chris. You’ve helped thousands of companies to improves...
2. Thought Leader Thursday – Rae Hoffman - Thanks for taking the time to share your knowledge with us today Rae. In the Internet marketing community, you’re well...
3. Thought Leader Thursday – Rand Fishkin - Thanks for taking the time to share your knowledge with us today Rand. Most people involved in search engine optimization...

Post a Comment »

Leave a Reply

Name (required)

Mail (will not be published) (required)

Website