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>
<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! :-(
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 like so: <td width="272" height="99"> </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
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.
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