Coding an HTML Email in 3 Easy Steps : Part 1

Awhile back I decided to write out all the processes I go through when I sit down in front of a computer and get ready to code an email from scratch. I think I pretty much have my thought process down to a science now and I think it might be helpful to share it here, so over the next three days I'll post my overviews of each step along with the best practices that I use to ensure that I get the most readable email possible.

Part one is all about the pre-production phase. It really helps to take a look at your creative as whole and go over how exactly you are going to slice that gorgeous design up to get the best reproduction possible in Gmail, Hotmail, Outlook and not Lotus Notes :) It's a short step and doesn't involve any technical knowledge, but I can't stress enough how important this first step is, as everything that happens in your code will come from the decisions you make in phase one.

Let's get right to it then:

FOR COMPATIBILITY
Even the best email campaign designs can fall flat if they are not coded properly. What may look stellar on the drawing board, and come to life further in Photoshop layers, can end up looking like an incoherent mess in the preview pane. With some background knowledge and adherence to best practices you can ensure that email recipients get the most out of our emails.

JPG’S ARE THE LAST RESORT
Sounds simple sure, but a lot of times Account Managers or Project Managers send you, the coder, jpgs. These are generally no good for coding. We need Photoshop Originals for three reasons:

• We need to get the best quality possible for images and the only way to do that is to ensure the source we start from is of the best quality possible.
• We must ensure that we can turn elements “on” and “off” using layer visibility incase there are elements that are obstructed.
• If no copy deck exists, the Photoshop document becomes the source for our copy, and we need to be able to copy-and-paste from it into our HTML code.

Designers - Ensure your layers are grouped relevantly and named appropriately so that they can be easily understood by a coder

SEEING THE BIGGER PICTURE
Again it all sounds very simple, but this is actually the most important step of the three. Give the overall design a once over and try to make at least some general decisions about the following:

• What areas should remain as imagery and what areas can utilize machine text
• Where will your slices work most effectively to reduce the amount actual pixels used in an image
• Are there any straightforward simple lines that could benefit from using CSS borders instead of a stretched 1 pixel image
• Where can you utilize padding so that you don’t include any unnecessary pixels in your slices or use the 90’s old school technique of pixel-spacers

Designers - Try to ensure that any text that can be machine text is, and is not anti-aliased, since generally a client approves a design flat, not a coded flat, and differences in subtleties such as anti-aliasing on text can cause disagreements

That's it for part one. Tomorrow I'll follow-up some graphical examples and we'll get into part 2, which involves cutting up the design and getting ready to code, and then we'll end with part 3... the actual coding!

Cheers