How do you build emails?

I finally got my act together and built my first HTML email.

I'm actually really proud of myself as I have virtually no HTML experience but just followed all the rules in the
Campaign Monitor Email Design Guidelines and looked at a few blog and forum posts.

After about 16 hours of tweaking code, I finally got to the stage where everything renders perfectly across all clients in Litmus (except Lotus 6.5/7 and Blackberry HTML) and it all validates with W3.

I wanted to talk you through how I made it and find out if there are any ways I can improve / streamline my process.

1. Save PSD as a flat image
2. Open up the image in Fireworks
3. Create lots of web slices and export slices & HTML (making sure it uses nested tables and no spacers)
4. Open up HTML in Dreamweaver
5. Change images into text / empty cells where relevant e.g. this:

<img name="copymainheadline" src="images/copy-mainheadline.gif" width="272" height="99" border="0" alt=""></td>

into this:

<td width="272" height="99"></td>

6. Continue building the rest of the email until everything works

Any suggestions of improvements to my process? Can I go straight from a PSD into Fireworks without saving a flattened image?

The next thing for me is to understand more how tables actually work because during the process of building I realised I wanted to change a few dimensions and add some cells, but couldn't integrate these into the work I had already done - meaning I started again 3 times! :-(

Thanks
D

roshodgekiss roshodgekiss, 5 years ago

Hi Dizzle, thanks for sharing this and welcome aboard to the forums! Your process here looks pretty good, although I have two suggestions:

- Can you export slices from Photoshop directly, instead of importing into Fireworks? I'm pretty sure this can be done (admittedly I'm a Fireworks gal, myself)
- Be careful with empty cells - they can cause issues. If possible, add a &nbsp; like so: <td width="272" height="99">&nbsp;</td>

Would love to know how you go - I totally agree that you should be very pleased with yourself here! Next, you'll be posting mobile optimizations like a boss :D


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Dizzle, 5 years ago

Hi Rosanne. Thanks for your reply. I can export directly from Photoshop although I couldn't find the option to use nested tables in the HTML like you can in Fireworks. They always came out with rowpan/colspan which I gather you should avoid if possible?

In terms of mobile optimisations, I used the -webkit thing where you tell the iPhone/iPad to avoid auto-resizing fonts to size 12.

Thanks for the tip about empty cells - I'll add that in.

roshodgekiss roshodgekiss, 5 years ago

They always came out with rowpan/colspan which I gather you should avoid if possible?

Generally, it's fine - it may even be faster to refactor the code if you don't like the table layout, then if you need to change the images, just re-export those to your /images folder (or wherever you're saving these files).

Thanks again Dizzle - all the best! :D


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

200,000 companies around the world can't be wrong.

From Australia to Zimbabwe, and everywhere in between, companies count on 
Campaign Monitor for email campaigns that drive real business results.

Get started for free
1-888-533-8098