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

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
1-888-533-8098