Let’s say you’ve decided on 11px type with 18px line height. All of your type line heights and margin-bottoms should then be multiples of 18px to keep the rhythm. Here’s an example of my typography style sheet, using those settings. (Everything has already been cleared by a reset style sheet.)

body { background: #fff url(../images/grids/grid-18px.gif); color: #; font: 70%/1.63em
Verdana, Arial, sans-serif; } /* font size and line height here is for IE6 */
html>body { font-size: 11px; line-height: 18px; } /* font size and line height for
everyone else */

h1 { font-size: 32px; font-weight: bold; line-height: 36px; margin-bottom: 18px; }
h2 { font-size: 26px; font-weight: bold; line-height: 36px; margin-bottom: 18px; }
h3 { font-size: 18px; font-weight: bold; line-height: 18px; margin-bottom: 18px; }
h4 { font-size: 18px; line-height: 18px; }
h5 { font-size: 13px; font-weight: bold; line-height: 18px; }
h6 { font-size: 10px; line-height: 18px; }

p,ol,ul { margin-bottom: 18px; } /* set to same as line height */

As you can see, the body element has a background image, which creates a lined paper effect at 18px hight. This is merely for testing purposes so I can be sure that all my type flows and interacts with each other as it should.

All the type elements have line heights and margin-bottoms that are multiples of 18. This ensures that all type will stay within those 18px grid lines. Although those grid lines won’t be visible on the real site, that vertical rhythm will help give your site a more cohesive feel. I would even take that number and use it to space vertical elements on your page–boxes, graphics, etc. All of this will hopefully lead to a more pleasant experience for your visitors, albeit for a reason they won’t even be aware of.

#ie-root #news li { float: expression(this.previousSibling==null?'right':'none') }

Since I use a conditional that wraps the whole site in an extra div called “ie-root” if the browser is IE6, this rule targets that first list item IE6 only.

I know this trick has been out there for a while but I haven’t seen it in too many places–especially considering how powerful pseudo-classes can be.

Staying Current

One of my pet peeves when starting a new job is opening up a previous employee’s ‘final’ PS file and having it be different from the actual site. I understand the evolving nature of websites, but I’m talking about different colors or a different masthead. In an effort to avoid sticking someone else with that problem, I always try to keep the PS files up-to-date. Has the masthead changed since launching the site? Make the change in the ‘final’ PS file and keep the old version in a different folder. I like to group my revisions into folders called “Round 1”, “Round 2”, etc. Not only does this tell you what the latest version is, but it also allows you to jump back when the marketing guy decides he actually liked the version from two weeks ago better.

Make Use of Notes

Get to know the note tool in Photoshop—it can be really handy when you know others will be accessing the file. Not only can you document areas that have changed, but you can add reminders to yourself about what was changed and why.

Keep a Central Log of Stock Photos

If you use any stock photos on your sites, create a log that holds the filename, copyright info, where it was downloaded, and what it will be used for. This can be invaluable for a future designer who needs to know where to find similar images or has to produce copyright information.

Write a Site User Manual

At my current job, we use a proprietary, ever-evolving CMS tool. As with any CMS, there are oftentimes a few different ways to achieve the same result. Although it may seem obvious to you why something was done a certain way, for someone else down the road, it might not be as apparent. Why not, as you’re building pages, write a quick explanation of how sections work and why it was done that way. Include how to update along with any filenames that are related. A document like this can come in handy for both content managers and future designers.

Convention

Use the same folder struture for all projects. This is mine:

We all know how difficult it can be starting a new job, but with a little extra time and preparation, you can make a fellow designer’s start much smoother and enjoyable.

These days, with the proliferation of software, tools, and tutorial sites, it seems like having an art school degree is not as important for web design as it once was. Web designers can live and die by their portfolios, not their resume. However, I still think it’s important to learn those fundamentals so you can have a solid foundation and philosophy that guides all your projects.

As an English major turned web designer, these are some of the guiding principles I’ve found most helpful over the years. They may seem elementary to some, but oftentimes they’re too easily overlooked.

Be Overly Attentive to Detail

At one place I worked, when doing PS comps, if a single apostrophe in the middle of paragraphs of copy was missing, I’d have the comp returned to me. It used to drive me crazy but it forced me to check, double-check, and triple-check my work before passing it on. The last thing you want to do is give a client any reason to doubt your abilities. Showing the proper respect for their content inspires confidence and avoids having the design review sidetracked by small, easily avoidable mistakes.

Speaking of Copy…Learn Your Grammar

We all find ourselves in the position of having to write copy on the fly. You’re in the middle of designing a page and realize you need copy for that button or for that box, and so you stick something in there. Keeping with the theme from above of inspiring confidence, make sure your copy is correct. Know the difference between it’s and its; their, there, and they’re; etc. No matter how killer your design may be, simple grammar mistakes show poor attention to detail.

Pay Attention to the Big Picture

Instead of coming out of the gate full speed, with thoughts of totally unique layouts and flashy graphics in your head, look at the content first. Digest the content. Throw all the content on the page and find a way for it to work together in terms of overall shapes and contrast. In fact, why not do everything in black and white first, so you’re forced to concentrate on layout rather than design. Once you have your black and white layout to where you want it, zoom way out and make sure it works as a coherent page. While it’s zoomed out, squint your eyes for a better view of how the page works as a whole.

Check Your Contrast

Be sure not to overlook those people who have trouble with their vision. It’s our job as web designers to ensure that text is always readable. A good test for this is to change your color PS document to black and white. Does all the text still have good contrast with its background color? Alternately, you can use this great tool to figure out whether your contrast is sufficient according to Web Content Accessibility Guidelines.

Impress With Vocabulary

Learn design vocabulary. Know what hue, saturation, and value mean. Know the difference between serif and sans-serif fonts. Make sure you can explain at the drop of a hat the difference between a blog, RSS, and a podcast—all terms that are thrown around and misused too often in corporate settings. Being able to explain your designs with the proper vocabulary will help sell them.

Learn the Grid

Grid-based design has been getting a lot of attention on the web lately, and for good reason. Grids can empower your design and help give it cohesiveness. When starting a new project, creating the right grid is my first step. I take my time with it and often go through a few iterations. There are a lot of resources out there about the grid, but I’ve found Khoi Vinh’s explanation about grids, along with the book Making and Breaking the Grid most helpful.

These are just some of the over-arching guidelines I try to follow as a web designer. It may not be a full list, and they may not be advanced techniques, but I think they’re important in helping to be seen a professional.

Separation

I use one import.css file, which in turn imports all the other CSS files. I like the simplicity of this one link in the and it provides a nice index of what your CSS files are.

After the import file, I break everything up into separate style sheets according to their function. Here’s what I usually end up with:

• Reset
• Layout
• Type
• Widgets
• Forms
• Ads

Reset is all-important, but you know that already. I use a pretty basic one, but it does the trick. Layout is where I define all major structural elements—everything that gives the site its form. Type is where I define all body, paragraph, heading, and span tags. I put global definitions of those tags at the top, and then use inheritance when drilling down into section-specific type. Widgets is for all images, buttons, and box styles. Forms houses not only form styles, but the type styles that go along with forms as well. And finally, Ads. If you’re lucky enough to work on sites where there aren’t a lot of ads, right on. For large media companies, this is still the main source of income, so there are typically a lot of ads, and the corresponding styles are enough that they should have their own file.

Annotation

I think I picked this one up from smashing magazine, and thought it was a great idea. At the top of every style sheet I include something like the following:

/******************************
[type.css]

Last updated: 8/21/08, 3:13 PM
Last updated by: Patrick
Last updated: Latest news

#3f3f3f - type: dark gray
#3a68a3 - links: blue
#a5a5a5 - all caps: light gray
******************************/

Along with a summary up top, I try to comment on as many rules as possible, or as many that make sense. Not only does it help your fellow designers understand or explain why you coded it that way, it can also help yourself when you have to go back in three month’s later and make adjustments.

Style

How I write my CSS rules depends on the scope of the project. Although I’m not a huge fan of doing it, when I’m working on a large project, I usually write all the rules on one line.

h1 { font-size: 2.7em; line-height: 1em; font-weight: bold; } /* article titles */

Using one line per tag allows for quick scanning of the page, which can really help as your file grows longer (and longer).

Once you start getting into <div>s containing <div>s, I also think it’s really helpful to indent contained elements. We indent html, so why not CSS?

Maintenance

Take ownership and strive for consistency. Every now and then, devote a few minutes to tidying up those CSS files and making sure everything is in its proper place. Check to make sure type declarations are in type and haven’t bled over to layout. Keep it neat and you’ll impress everyone with your ability to handle requests quickly and without complaint.