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:
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.
Stock photography, type, and killer tees. Genuinely recommended by Authentic Boredom.
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.