Code an Email Newsletter from PSD to HTML

Last week we learned how to go about designing HTML emails. This week we’re going to turn the PSD into a functional HTML email. To code a HTML newsletter you can either code it from scratch, or use an already existing template. I personally like to use an existing template, especially the ones supplied by Mailchimp simply because they have been tried and tested and they don’t ‘break’. Whichever way you decide to go about coding HTML emails you need to remember the following:

1. Use inline CSS to control presentation, such as background colors and fonts. eg:

2. You have to use Tables to control the designs layout – Pure CSS Layouts just won’t cut it i’m afraid. (I hate them too) It’s recommended that you know about HTML tables before following this tutorial as I am not going to be covering the basics of creating tables.

1. Setting up the Document

Open the PSD containing the email design and slice and export any images that are going to be used in the email. Create a new HTML file in your IDE of choice and copy and paste the following code into the document.

<!-- -->
<table cellspacing="0" cellpadding="0" width="100%" bgcolor="#ebebeb">
<tbody>
<tr>
<td align="center" valign="top"></td>
</tr>
</tbody>
</table>

All extra styling will be placed inside <style></style> and the email content will be placed between <td></td>

 

Pages: 1 2 3 4

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.

Matthew Leak is a freelance Web Designer and Developer from Manchester in the UK with an avid interest for new and exciting web technologies and trends. Follow Matthew’s updates on Twitter and be sure to check out his blog.

About the author Published by Matthew Leak

21 Responses »

  1. Nice project, but .
    I know M$ Outloooks, but …

    U see this? http://fixoutlook.org/

    Best regards!
    Pawel

  2. 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.

  3. I still use it now and again, just to be on the safe side.

  4. Thanks so much just what ive been looking for!

  5. 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

  6. It will be use on my newsletter design, thanks

  7. 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.

  8. Thank You Very Much I Will Be Use

  9. 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

  10. 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.

  11. Thank you for this tutorial. Helped me a lot by programming my first html-newsletter 🙂

Trackbacks

  1. Code an Email Newsletter from PSD to HTML | Speckyboy Design Magazine