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 (
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.
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
- Build Your Own Web Site the Right Way Using HTML and CSS
- Beginning CSS Web Development
- Designing With Web Standards
- Web Standards Solutions
- CSS Mastery: Advanced Web Standard Solutions
- The Zen of CSS Design
- Bulletproof Web Design
Web UI, Usability
- Don’t Make Me Think
- Designing Interfaces: Patterns for Effective Interaction Design
- Defensive Design for the Web
- Information Dashboard Design
- About Face 2.0: The Essentials of Interaction Design
- Making and Breaking the Grid
- The Design of Everyday Things
- Beautiful Evidence
- Getting Real, The Book
- Blink: The Power of Thinking Without Thinking
And if you’re seeking titles for the wee little ones, try What Designers Read to Their Children.
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).
- Roger Johansson
- Khoi Vinh
- Coudal Partners
- Veerle Pieters
- Jeff Croft
- Speak Up
- Design Observer
- Seth Godin
- Guy Kawasaki
- Presentation 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.
A few selected recurring conferences, though there are literally dozens and dozens available worldwide today:
Recommended reading from previous articles on this site:
- Mobile Web Design ~ The Series
- That Wicked Worn Look ~ The Series
- That Formerly Wicked Aqua Look
- How-to: ‘Giving To Hiram’ masthead
- Solving iLife’s ‘puzzling’ imagery
On Finding Inspiration
- Typefaces no one gets fired for using
- The non-typographer’s guide to practical typeface selection
- In Progress: Site Design (National Gazette)
- Full-time freelancing: 10 things learned in 180 days
- Full-time freelancing: 10 more things in 360 days
That’s all, folks.
BookmarkShare some love and add this article to Digg, Del.icio.us, or Ma.gnolia.
Stock photography, type, and killer tees. Genuinely recommended by Authentic Boredom.
Great resource. Thanks for sharing all of this Cameron. I’m going to be forwarding to several friends as a reference.
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!
Thanks for such a comprehensive article. Helped me get the message across to my team easier with this article’s help.
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.
Great advice and links. I’ve forwarded this on to all the colleagues at my work.
Wow, thanks for that, great stuff :)
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!
A good list for those of us just trying to keep our Beginners’ mind.
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.
Thanks for this concise list of valuable resources. Im sure this will help many on their journey for web development bliss.
Yes, bookmark-worthy material. Great sum up of whats lurking in your archive!
Thanks, great stuff. I think I’ll buy that first typography book.
I think you might have missed out an L:
“typography is an incredibly powerful layout too”
Anyway, great article!
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!
Awesome things! Thanks a lot!
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!
thank you for your lists cameron.
i think i should give more time to myself to learning something from your lists.
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!
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!
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.
How could you forget The Web Developer’s Handbook?
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.
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.
btw:some small errors:
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.
Thank you very much!
You’re a great writer. I like your info. This page is definitely bookmark worthy. :-D
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?
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.
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.
Authentic Boredom is the platitudinous web home of Cameron Moll, freelance new media designer, author, and speaker. More…
Full-time and freelance job opportunities. Post a job...
A selection of fine reading, available for a limited time only:
- Jobs home page reorg
- Coming soon: Mobile Web Design, the book
- Dyson ad: Text as more than just words
- Setting sail for Europe
- Review: Sumo Omni bean bag chair
- Dashboard widget for Authentic Jobs
- Limited-time offer: $99 listings
- Nine skills that separate good and great designers
- Fire sale
- Introducing AuthenticJobs.com
CSS Mastery: Advanced Web Standard Solutions A solid round-up of indispensable CSS design techniques by Andy Budd, Simon Collison, and Cameron Moll.
Mobile Web Design A guide to publishing web content beyond the desktop. Tips, methodology, and resources. Now available.
Letterpress Posters The unassuming beauty of a freshly letterpressed print.
That Wicked Worn Look. Techniques for that worn, aged, distressed look.
Mister Retro Machine Wash Filters Turn the dial to “Instaworn” with these filters.
Blinksale Dive in and enjoy shamelessly easy invoicing from Firewheel Design.
Basecamp My preferred web app for internal and client project collaboration.
HOW Conference Austin, June 24–27. Pentagram, Adobe, P&G, et al.
Web Design World Seattle, July 20–22. Practical sessions on web design.
Stimulate Salt Lake City, September 2009. Entrepreneurship and design conference.
1 Enrique ~ 11 September 2006 at 06:38 AM
Geniales consejos. Thanks. Habría que llevarse 1 año leyendo pero bueno ;-)