For whatever reasons, I do a lot of development without ever having the opportunity to contribute to design. By the time it hits my desk, it’s too late to change anything — the client has already signed off on the design so what I produce must look exactly like it, even if there are flaws and even if it means unnecessarily wasting money. With any luck, there will come a day when more designers see the importance of involving a developer in the design process at an earlier stage (or perhaps establish a workflow where change is part of the process), but in the meantime I can offer some tips on designing for developers.

1. Know Where Your Fonts Are Coming From
   In this silver age of web typography technology, there are few excuses for a design where a significant amount of text comes in the form of images. However, licensing and distribution for web fonts is fairly complex, so you need to make knowing how the typefaces you choose are going to make it into the product a top priority. If you begin by selecting fonts from the same sources your developer’s going to look to, things will go much smoother — you’ll be able to tell them where to get the fonts, you’ll know what if anything implemention is going to cost and you’ll know exactly what to expect in terms of quality of display at various sizes/weights.
2. Don’t Use Fractions of Pixels
   In non-web mediums fractions of pixels are quite useful, but online the pixel is our lowest common denominator and that’s all there is to it. If you specify an area of copy to be 10.5px in font-size, a good developer’s going to do everything in their power to make it look like you wanted it, but it will simply not be ten and a half pixels in size. Design in whole pixels and you’ll get the kind of snap to design you want, plus you won’t have to have any heated discussions with frustrated developers. Note: Flash is an exception as it does support fractions of pixels, however this deserves a discussion of its own so I’ve slated this topic for a future post.
3. Don’t Use Kerning or Tracking
   First, there is nothing to facilitate kerning of browser-rendered text, so don’t specify kerning in your design. As for tracking, there is a letter-spacing property, but (surprise!) it only works in whole pixels (where 1px is equal to 10 units of tracking in Photoshop) and it doesn’t degrade gracefully; the difference in display between a browser that supports it and one that doesn’t is striking. Leave kerning and tracking for text that comes in the form of images.
4. Don’t Put Too Much Faith in Guide Lines
   I generally don’t use guides in Photoshop (in favor of fills on guide layers), but I can tell you they don’t always work the way you expect them to. As an example, you create a rectangle and give it a stroke treatment, then snap it to guide lines; the rectangle itself is on the right side of the guides, but the stroking is not, and this is likely to give your developer a headache. I won’t say “don’t use guide lines”, but I strongly suggest manually aligning all objects.
5. Don’t Forget the Math
   I know, “…but we hate math” — we all hate math sometimes.  Despite it, please consider the following: you’ve designed a row of callouts that are each the same size and spaced evenly across the row. …but they’re not all the same size (column B’s 1px wider and taller) and they’re not spaced evenly (17px between columns A and B, 24px between columns B and C). Your developer now has to make several exceptions to what could otherwise be common rules and they have no good explanation for why they’re doing it. This is a waste of time and money and produces an imperfect design. Your developer is counting pixels and you should be too.