Beginner’s guide from a seasoned CSS designer

~ 11 September 2006 ~

For many of you this will come as a tired review of a tiresome subject; knowledge you’ve held in your command for some time now.

However, for the remainder of you — those hoping to refine web design and development skills — I hope this comes as bookmark-worthy material. I’m surprised at how many emails I still get each month from readers wanting to know how I got started in design and how they can do the same. I can’t answer all of their humble inquiries, and when I do I’m repeating myself.

So bear with me as I self-indulge, if merely to prepare a substantial archived list of resources for the beginning CSS designer that I can use for my replies.

As for how I got started? I was first exposed to web standards and CSS — much like many others — after hearing a presentation by Jeffrey Zeldman at Web Design World in 2001. I returned, presented a summary to my team (then 10 designers), and regrettably shelved the valuable information without doing much with it.

I returned the following year, same conference, same speaker, and again returned to present the findings to my team. Though by this time the dotcom boom had bust, and there were just four of us. This time around, however, Zeldman’s words didn’t fall on deaf ears. While by then I understood the importance of standards, it wasn’t until Blake Scarbrough (my assistant creative director at the time) took it upon himself to create the company’s first standards-compliant website the following year.

And the rest, as they say, is history. That was all it took for all of us to dive head-first into CSS, XHTML, and web standards. I’ve been coding sites as such ever since.

Six Tips for Starters

Some time ago I exposed eight things I wish I’d known when I started, which was subsequently made available as a print version. Summarized here are six of those principles, as I feel the advice is still timely for those of you just starting in design/CSS.

1. Details a great designer maketh. If there’s one thing I’ve repeated over the course of my career more than anything else, it’s this simple philosophy: If you have time and talent to care for the smaller details, it almost always means you’ve already cared for the bigger details. If you have time and talent to readjust the logo positioning 1px to the left, it likely means you’ve already solidified usability, cross-browser compatibility, and so on.

2. There’s a point at which quality becomes too costly. Find that point with every project. Having expounded on the importance of details, allow me to counterbalance with this: If the cost of additional quality (e.g. details) is both too expensive and unnoticeable by the client and its audience, it’s time to stop and move on.

3. Those who code XHTML/CSS as well as they design will always have an edge over those who only design. You’re able to foresee potential layout and coding issues while the comp is still being designed. The benefits of such are rarely overrated, as time and money is saved and frustration is minimized.

4. Communicate, don’t decorate. The sooner you learn to communicate with your designs using only what’s necessary and relevant, rather than decorate for the mere purpose of decorating, the sooner you’ll find your designs touch the consumer’s heart, rather than just satisfy the designer’s eye.

5. When debugging your CSS, strip down to the base element (div, p, etc) and work up. I’ve found it extremely useful over the course of my career to comment out everything except the element that you think is the cause of the problem. Once I’m positive that element displays properly (or isn’t the problem), I uncomment in the next containing element. Once that element is working properly in tandem with the previous element, I uncomment the next element. And so on. A simple technique, no doubt, but often a useful one.

6. Know thy type. Typography can make or break a piece. Coupled with CSS, typography is an incredibly powerful layout too, and not just something reserved for body copy. Need some help with type? See some of the links below.

And on that note, following is an abundance of resources for the novice designer.

Books

You’re fooling yourself if you think you can rely solely on digital sources. Books are excellent for in-depth study, an afternoon read, or as a handy resource as problems arise. I own nearly every one of these and therefore can vouch for their usefulness.

XHTML, CSS, Web Standards

Web UI, Usability

Typography

Miscellany

And if you’re seeking titles for the wee little ones, try What Designers Read to Their Children.

Blogs

Well over two years ago I proposed 80/20 and the design blogosphere, suggesting you could frequent just 20 individuals’ sites and be keen on latest trends, new software, and so on. Not surprisingly, many of those sites are still relevant.

Today I couldn’t possibly link to all the sites I read, track, or have grown fond of since. However, presented here are just a few that weren’t part of the original list but are important resources for designers and developers, regardless of skill level, and even regardless of industry (Seth, Guy, Pres. Zen).

You might also consider aggregators if you’d like a snapshot of what’s being discussed in the industry. A few for starters:

And if you’re seeking gallery sites, they come in the form of Beauty, Import, Mania, and Remix, among many others.

Conferences

A few selected recurring conferences, though there are literally dozens and dozens available worldwide today:

Previous Writings

Recommended reading from previous articles on this site:

How-To’s

On Finding Inspiration

Typography

Freelancing Advice

Off-site

That’s all, folks.

Bookmark

Share some love and add this article to Digg, Del.icio.us, or Ma.gnolia.

32 Comments

Veer: Visual Elements for Creatives.
Stock photography, type, and killer tees. Genuinely recommended by Authentic Boredom.

1 Enrique ~ 11 September 2006 at 06:38 AM

Geniales consejos. Thanks. Habría que llevarse 1 año leyendo pero bueno ;-)

2 Chris Harrison ~ 11 September 2006 at 06:47 AM

Great resource. Thanks for sharing all of this Cameron. I’m going to be forwarding to several friends as a reference.

3 Rob Maurizi ~ 11 September 2006 at 07:39 AM

Here here! Great lists all around. And just in time for my transition from the hollow halls of academia to a commercial shop.

I will also dutifully share with colleagues who are stuck working with people who, and I quote, “can’t spell CSS”.

Thanks a ton!

4 Brajeshwar ~ 11 September 2006 at 08:14 AM

Thanks for such a comprehensive article. Helped me get the message across to my team easier with this article’s help.

5 Quest ~ 11 September 2006 at 08:28 AM

Hey Cameron,

Awesome! I have purchased and read many of the suggested books, along with the articles you suggested. I really want to get to some of those conferences, as well as, visit some of the other suggested sites. Based on this information I am off and running to study and practice these techniques to become a skilled designer/developer. Thanks so much for taking the time to provide this wonderful insight and as always your knowledge and experience have been invaluable to me as a designer/developer. Keep up the great work. God bless.

Quest

6 Ian Fieldhouse ~ 11 September 2006 at 09:04 AM

Great advice and links. I’ve forwarded this on to all the colleagues at my work.

Thanks.

7 Duncan ~ 11 September 2006 at 09:11 AM

Wow, thanks for that, great stuff :)

8 J Phill ~ 11 September 2006 at 10:03 AM

Good stuff! Although I don’t think I’m a beginner anymore, It’s always nice to go back and look at old articles for a refresher. You never know what new ideas might come up!

9 Baxter ~ 11 September 2006 at 10:12 AM

A good list for those of us just trying to keep our Beginners’ mind.
Thanks, Cameron!

10 Marius Ooms ~ 11 September 2006 at 10:20 AM

Thanks Cameron…beyond the great resources you are sharing here it also shows how relevant and useful your site is. Your article on, eight things I wish I’d known when I started, is plugged on my office wall for some time now and a good reminder on the simple things.

Keep it up…I never find a dull moment reading your site.

11 (edited) ~ 11 September 2006 at 01:13 PM

(spam)

12 Nate K ~ 11 September 2006 at 02:58 PM

Cameron,
Thanks for this concise list of valuable resources. Im sure this will help many on their journey for web development bliss.

Peace,
Nate

13 Marc ~ 11 September 2006 at 02:59 PM

Yes, bookmark-worthy material. Great sum up of whats lurking in your archive!

14 Olav ~ 11 September 2006 at 03:32 PM

Thanks, great stuff. I think I’ll buy that first typography book.

15 Matt Williams ~ 11 September 2006 at 03:41 PM

I think you might have missed out an L:

“typography is an incredibly powerful layout too”

Anyway, great article!

16 Kevin ~ 11 September 2006 at 03:42 PM

The link to Jeff Croft has an extra dot: http://.jeffcroft.com/

Also, when reading your article via RSS in Bloglines, some of the links to pages on your site are incomplete, leading to things like http://www.bloglines.com/archives/000849.html

Looks like #11 sneaked in some comment spam.

Great post though!

17 Anton Dubina ~ 11 September 2006 at 05:55 PM

Awesome things! Thanks a lot!

18 liz ~ 11 September 2006 at 07:10 PM

As an aspiring web designer, I take your wisdom to heart. As a student, I find myself hungry and obsessed for knowledge. So thank you, from my soul, for your article!

19 didats ~ 11 September 2006 at 11:51 PM

thank you for your lists cameron.
i think i should give more time to myself to learning something from your lists.

20 Katie ~ 12 September 2006 at 07:30 AM

Thanks for the tips/lists, Cameron! I’ve been in the industry for over 3 years now, but I’m still learning much about standards-based design at this point. Always a pleasure reading your blog because there’s always something new to learn!

21 Adam ~ 12 September 2006 at 09:41 AM

Thanks Cameron. I’m relatively new to web design (especially with standards) and I just started looking for other people’s recommended reads. Perfect timing!

22 Damien ~ 12 September 2006 at 10:22 AM

Wow! Thank you so much for sharing this great info for all of us “not yet there” designers. I visit your site everyday and learn something new each time. Your site is worth the daily visit on many levels, but even just your linkage would keep me coming back.
Thanks again.

23 Victor ~ 12 September 2006 at 12:28 PM

How could you forget The Web Developer’s Handbook?

24 Leonardo Melendez ~ 12 September 2006 at 09:05 PM

Excellent piece! While good type, code, and detail are things to have a keen eye for, as a beginner, Tip number 4 (Communicate…), seems to wrap it all up.

Thanks Cameron.

25 David ~ 13 September 2006 at 11:29 AM

Cameron, Thanks for the awesome information. I’ve always admired your design skills and was one of those that had emailed you wondering how you got into this. It’s great to read this and finally say “oh…that’s how it’s done!” Thanks a million.

26 Daniel ~ 14 September 2006 at 11:43 AM

Nice article!

btw:some small errors:
http://validator.w3.org/check?verbose=1&uri=http%3A//www.cameronmoll.com/archives/001211.html

27 Kristof ~ 15 September 2006 at 04:04 AM

Nice article Cameron! I’m sure I’ll visit this post a lot in next few weeks.

I do have one tiny remark. You say “Those who code XHTML/CSS as well as they design will always have an edge over those who only design”. While this is true, I think it is more important to say “Those who code XHTML/CSS as well as they design will always have an edge over those who only code XHTML/CSS”

Let me explain this. I work as a web developer for a small company in Belgium. All I do is code XHTML, CSS and ASP.NET. I don’t design. We get our designs from freelance designers we work with. Unfortunately, these designers don’t code XHTML or CSS, so they just make designs without keeping certain limitations or difficulties in mind. I often (actually, almost all the time) get designs that are very very hard to translate into valid XHTML/CSS, especially because I have deadlines.

My point is, if I could design the websites as well, I could keep certain XHTML/CSS stuff in mind while designing. That’s why I believe that people who only do the coding have a much harder job than people who can code the designs they have made themselves.

Of course, this is from a coder’s perspective, while your experiences are maybe more from a designer’s perspective.

28 Andreas ~ 18 September 2006 at 09:17 AM

Thank you very much!

29 Jeremy Kirk ~ 23 September 2006 at 02:21 PM

You’re a great writer. I like your info. This page is definitely bookmark worthy. :-D

30 alextronic ~ 26 September 2006 at 01:53 AM

Thank you, I mean, really thank you, but my bookmarx on CSS are over thousands by now. I really think there is not an organized way to learn since the system is not structured 100% in itself.
Anyway I also like KIFNVzdZEJ’s opinion in his last comment. How to get rid of the spam?

31 georgivar ~ 05 October 2006 at 07:20 AM

And what is the value of this article to the ordinary guy who is just stating with css? None.

6 pretty abstract tips and 50+ links to vague resources of information like amazon and personal blogs. This information is of no use of any beginning css coder.

I’ve seen, tryed to help and teach css to many html coders and most of them would start to ask you pretty specific things and when you give them abstract and general explanations, they tend to ignore you and continue to td,tr,td,tr things.

The best way of introducing beginners to this matter is to show them simple and effective tricks and techniques that’ll save them time and work.

Big, abstract and complex explanations - 6 months later.

Pardon my english.

32 Cameron Moll ~ 06 October 2006 at 06:38 AM

georgivar - You completely missed the point. I get where you’re going, but my point was not to hand-hold beginners. There are plenty of sites and tutorials for that. My point was to suggest how one could begin to be immersed in CSS. The tutorials and hand-holding will inevitably follow, but without solid resources to support all that, it has little effect.