Code an Email Newsletter from PSD to HTML
6. Adding the ‘complete’ button
Copy and paste the very first content table we created. (the header one) and paste it below the table we just worked on.
In the first cell add the ‘ready’ image that the user will click on when they’ve done the 4 instructions, and below this in a new table just add some more information or another incentive to claim their free bar. In this case I did a ‘Win a lifetime supply of Monsterchomp’ table.
<table style="border-left-width: 2px; border-left-style: solid; border-left-color: #e6e6e6; border-right-width: 2px; border-right-style: solid; border-right-color: #e6e6e6; height: 150px;" cellspacing="0" cellpadding="0" width="600"> <tbody> <tr> <td style="background-color: #ffffff; border-bottom: 10px solid #FFFFFF;" align="left" valign="middle"> <a href="#"><img src="img/ready.png" border="0" alt="Monster Chomp Newsletter" align="center" /></a></td> </tr> </tbody> </table>
7. Win a lifetime supply of Monsterchomp
<table style="border-left: 2px solid #e6e6e6; border-right: 2px solid #e6e6e6;" cellspacing="0" cellpadding="0" width="600"> <tbody> <tr> <td class="win" style="background-color: #ffffff; border-top: 0px solid #333333; border-bottom: 10px solid #FFFFFF;" align="left" valign="middle"> <h2>WIN a lifetime supply of Monsterchomp</h2> All entries made will automatically be added into a draw where the winner will receive a lifetime supply of Monsterchomp. Now there's even more reason to claim your FREE bar of Monsterchomp.</td> </tr> </tbody> </table>
8. Adding an un-subscribe option
It’s important to give users the ability to un-subscribe to your outgoing emails. They could not want to receive them anymore, or they could have received it by mistake so it’s always a good thing to add an un-subscribe option. For this just use a similar table structure to what we have used throughout the email.
<table style="border-left-width: 2px; border-left-style: solid; border-left-color: #e6e6e6; border-right-width: 2px; border-right-style: solid; border-right-color: #e6e6e6; height: 60px;" cellspacing="0" cellpadding="0" width="600"> <tbody> <tr> <td style="background-color: #ffffff; border-top: 0px solid #000000; text-align: center; height: 50px;" align="center"> <span style="font-size: 11px; color: #575757; line-height: 200%; font-family: arial; text-decoration: none;">Think you've received this email by mistake? <a style="font-size: 11px; color: #575757; display: block; line-height: 170%; font-family: arial; text-decoration: none; font-weight: bold;" href="#">Oh.</a></span></td> </tr> </tbody> </table>
Conclusion
Now we’ve got email template ready – what now?
Archive all related HTML and image files into a .zip file and upload it to a web based emailing marketing application. Mailchimp is my marketing campaign application of choice, because not only is it simple to use – it even tests your email with the most popular email clients to make sure that your email is being delivered the way you want it.
This entry was posted on Wednesday, July 14th, 2010 at 17:15 and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Thanks for sharing…very use full
Nice project, but .
I know M$ Outloooks, but …
U see this? http://fixoutlook.org/
Best regards!
Pawel
Do we still need to use display: block; on all the images? I know before that was required for Hotmail to display images correctly but don’t know if we don’t need to anymore.
I still use it now and again, just to be on the safe side.
Thanks Great Post..:)
Thanks so much just what ive been looking for!
Thanks!
My Tip:
Remove all blank spaces are not used between the html tags, and also the “tabulations”. So some problems with various browsers and mail readers are solved.
Here’s an example of a handbag made of html like thiss: http://www.render.com.br/news/227/index.html
It will be use on my newsletter design, thanks
Great post! But which email clients do these methods work in? I build emails for lotus notes, outlook, yahoo, gmail, hotmail etc. I think you should mention that these methods wont work in all clients.
Thank You Very Much I Will Be Use
What a great tutorial, retweeted!
It is to my understanding the the most email clients with ignore
any css rules in the header. So that method of styling is not recommended. If want to take a chance add all your styles within the
body and even it should be used very sparingly.
Good luck
Great tutorial, good thing that every design should know, now the days move to email marketing.
I run psd to html email conversion and email design service http://psdnaaremail.nl for people who don’t have the time
to convert it or to design the email template.
I’ll tweet your tutorial, so more can learn.
Thank you for this tutorial. Helped me a lot by programming my first html-newsletter 🙂