Code an Email Newsletter from PSD to HTML

2. Creating the Header

Create a table with a width of 600px and style the table with left and right borders with a width of 2px using the color #e6e6e6.

Using the tr and td elements create a new cell and style it according to the design, adding a height 50px and because the CSS has to be inline, a background-color of white (#FFFFFF). This first cell will contain a link so that users can view the email in their web browser.

The text containing the link will be wrapped around span tags. Pretty much all text in this email will be contained inside span tags because our CSS has to be inline. So set the font-family to arial, sans-serif; and the color to black.

Copy and paste the first cell (tr/td), removing the height of 50px and add the header image.

<table style="border-left: 2px solid #e6e6e6; border-right: 2px solid #e6e6e6;" 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;">
Having trouble viewing this email? <a style="font-size: 11px; color: #575757; line-height: 200%; font-family: Arial; text-decoration: none; font-weight: bold;" href="#">View it in your browser.</a></span></td>
</tr>
<tr>
<td style="background-color: #ffffff; border-top: 0px solid #333333; border-bottom: 10px solid #FFFFFF;" align="left" valign="middle">

	<a href="#"><img src="img/header.png" border="0" alt="Monster Chomp Newsletter" align="center" /></a></td>
</tr>
</tbody>
</table>

3. Adding the Banner

Add a new table using a similar structure to the previous table in the document. This time our table will only container 1 row and 1 cell so only one set of <tr> and <td> tags are needed. Insert the image into the cell and wrap it around <center> tags just in case your image isn’t 560px in width.

<table style="border-left: 2px solid #e6e6e6; border-right: 2px solid #e6e6e6;" cellspacing="0" cellpadding="0" width="600">
<tbody>
<tr>
<td style="background-color: #ffffff; border-top: 0px solid #333333; border-bottom: 10px solid #FFFFFF;" align="left" valign="middle">

	<a href="#"><img src="img/freebar.png" border="0" alt="Monster Chomp Newsletter" align="center" /></a></td>
</tr>
</tbody>
</table>

Pages: 1 2 3 4

Live demo View it online Download Take the source files

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
« « A Delightful Showcase of Restaurant Websites
88 Magnificient iPad Wallpapers » »

21 Responses »

  2. Pawel P.
    July 16, 2010 • 15:05

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

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

    Best regards!
    Pawel

    Reply to this comment
  3. Zach S.
    July 16, 2010 • 16:19

    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.

    Reply to this comment
  4. Matthew Leak
    July 20, 2010 • 14:12

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

    Reply to this comment
  6. Matthew Conroy
    July 23, 2010 • 22:49

    Thanks so much just what ive been looking for!

    Reply to this comment
  7. jeff_Drumgod
    July 23, 2010 • 23:17

    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

    Reply to this comment
  8. Eko
    July 24, 2010 • 01:52

    It will be use on my newsletter design, thanks

    Reply to this comment
  9. Luke Marsh
    August 9, 2010 • 16:30

    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.

    Reply to this comment
  10. karthik
    September 9, 2010 • 06:51

    Thank You Very Much I Will Be Use

    Reply to this comment
  12. David
    November 26, 2010 • 22:17

    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

    Reply to this comment
  13. Psd to Html email
    April 13, 2011 • 14:45

    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.

    Reply to this comment
  14. Sascha Franke
    April 23, 2012 • 12:48

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

    Reply to this comment

Trackbacks

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