Best way to code an email


What is your psd2html process for emailing ?

As there are a LOT of compatibility problems, I slice on Photoshop, export for web (HTML with tables + optimized images), then use a empty template (based on emailboilerplate) that I fill with Photoshop tables (often re-cut by hand, to avoid to many cell) and images.

Do you have different way to do ?


Step, 4 years ago

Hi Talvins,

Photoshop does have it uses.  But I wouldn't recommend using it for it's HTML table when creating slices.  Just because it's very static and photoshop likes to add in spacer.gif's building the whole email in one table.  Where your find you have rowspan="12" / colspan ="6" - Crazy stuff...

Keep it simple. It's the best approach! I like to ID my main tables.  So a header would be <table id="header" cellpadding="0" cellspacing="0">,  footer etc..

I create wireframes and plan out what I'm going to do.  Making sure the email serves it purpose while images are turned off as well.  I think it's important the email looks just as nice without images.  I suppose this is one of my pet hates.  Seeing an email where no alt text has been used its poor.

Something I'm working on at the moment Check it out

A email developer obsessed with gym, coding, design, music, and other things he doesn't understand. Twitter -!/stephenho1mes
Alex I., 4 years ago

You ask what our process is.

I make emails 5 days a week, 9 hours a day. And then I do some in my free time too!

This is my process:

1. Receive PSD from design team.
2. Give it a good, long look. Flag up any potential issues with design team.
3. Receive amended PSD.
4. Use the guidelines on Photoshop to grid out how and where I'm going to slice up the email, keeping the least possible images.
5. Build email.
6. Test email.
7. Fix everything I broke when building it (typical!)
8. el finito!

As Step stated above, don't use Photoshop to export HTML. You can use it to slice the images and export multiple images instead of cropping 1 by 1.

Avoid using rowspan as stated above. Photoshop's export HTML tool will use rowspan and that means when it comes to changing anything in your're screwed!

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free