Turn Your PSD into a Solid HTML Email

Turning a Photoshop file into a living web page is a common task for web designers. We all have our own processes for extracting visual elements, grabbing colors, and building layouts in lovely, standards-compliant HTML and CSS.

HTML email is a different—and darker—story. Modern web standards apply to only a few of the most popular email clients. If you are planning on sending your email to a list of confirmed Apple Mail users, any layout that works in Webkit will probably be fine, but otherwise, a different approach is needed.

In this tutorial, we’ll step through the process of taking a PSD mockup from a designer, and turning that into a dependable HTML email that renders well in today’s most popular email clients. Warning: there will be tables.

Meet the Client

You’ve probably seen the devastating photos of the flooding that has overwhelmed a huge area of Queensland, Australia recently. As an enormous rebuilding operation starts up, we were approached by Volunteering Queensland for assistance with emailing the huge number of people who’d put their hands up to help.

We offered to help with the sending itself, and also by creating a simple HTML email template the organization could use for their email campaigns. Volunteering Queensland already had a design and provided us with the Photoshop file.

Here’s the original layout as an image:

fig1

Our job was to take that PSD and turn it into a template that worked well within the limitations and incompatibilities of the email client world. The task was taken up by Stephen Jesson, one of our excellent support team members who has created many email designs in his time.

Plan the Basic Structure

The unfortunate reality of email design is that table-based layouts are still the best option in most cases. Email clients like Outlook 2007/2010 don’t support floats, so CSS positioning is unreliable.

Instead, we’ll rely on old-school HTML tables to create a structure that will hold together almost everywhere. At this point, we need to make a philosophical decision: aim for an email layout that’s as close as possible to the original design, or aim for markup that’s as modern and clean as possible.

While both approaches are valid—depending on your ultimate goal—as a general rule, less markup is better because the point of email is the content. HTML is just a way of presenting that content.

Sometimes matching a design as closely as possible is important, and it’s useful to know the tricks and hacks that help us achieve that. So in this tutorial we’ll explore those dirty little secrets of email design.

Here’s our basic top-level table structure:

This table will hold the whole design, and it will be centered inside the <body>; using an align=center parameter. That’s the most reliable way to center a table, and it works just about everywhere.

The body of our email uses margin=0 and padding=0 to reset everything, and we’ll set the font size and the font family on both the body tag and the <td> table cells to make sure they are applied.

Setting a fixed pixel width on the outer table makes everything much simpler, and 600px is about as wide as you’d want to go for an email. If you accept that your layout may change quite a bit in different email clients, you could set a percentage width, but that would make it much harder to keep the columns a consistent width.

Set Explicit Margins and Padding on Your Paragraphs

Padding and margins are the bane of an email designer’s existence, because they’re so inconsistently supported across the major email clients. Most notably, Yahoo! Mail removes all spacing from the default <p> tag, so you should define it yourself to prevent your paragraphs squishing together like commuters on a Japanese subway.

Returning to the PSD, we can measure the widths of individual columns and the spacing between content elements. Whereas a modern web design would use divs and margins to create that layout, we’ll be using a combination of tables and table cells.

Tables All the Way Down

Our original design has some nice column gutters that we want to match. Unfortunately, Lotus and Outlook give us particular trouble when we try to create consistent spacing around content.

Rather than leave each client to apply its own interpretation of the padding and margins, we’ll measure up the column sizes and gutters, and nest a table inside each column.

In this case, the left and right gutters are, conveniently, the same size, so the calculation becomes:

Total column width of Npx – (left gutter of 20px + right gutter of 20px) = nested table width

By nested tables, I’m talking about a whole table contained inside a <td> element. So, inside the left column, we’d place a nested table of Npx and add an align=center attribute to it. Now we have a container for our content that sits in the middle of the column, and the centering creates the gutters on either side.

This nesting technique will be used in the right column too, and in the footer. Any time you want to maintain consistent spacing around a block or element, you can eliminate a lot of the possible variations by nesting tables.

“Empty” table cells can be used for spacing, too. For example, look at the spacing around the line of text at the top of our design here:

fig3

You do end up with a lot more HTML code than you may be used to, but if the occasion calls for a bulletproof layout, tables are your friends.

Sometimes you can avoid relying on the rendering engine for spacing by including the required space on your image. Including the space around the logo and photos in the image file means you can rely on it being there, and fit your table cell to known dimensions.

If your production process prevents you from easily adding the space to the image, consider a CSS or HTML border instead. They work just about everywhere.

Finishing Touches

With a solid table structure in place, we can safely add content without blowing the layout apart in an email client. Here’s a screen grab of the final layout in Dreamweaver, so you can easily see the tables.

fig4

You’ll notice that even the footer items are contained in separate cells. This might be excessive in many cases, because a simple paragraph might display well enough. In this case, however, we’ve gone all out just to show what’s required for maximum consistency in spacing and item height.

List bullets can behave oddly in email clients, so use inline images instead. Again, the spacing between the bullet image and the item is built into the image itself, and there’s no need to try to match them up.

The dividing lines use images of a defined size, but they also specify a background color in case the images are blocked.

At this point, the bulk of the coding is done. We have an HTML file that will hold together for as many major email clients as we can hope for. To confirm that, you could add some content and run your file through an email testing service like Litmus—or one that your email service provider offers.

Here’s how our template looks in the notoriously picky Lotus Notes 8 client.

fig5

Job done! If you hand your work over to the content editors at this point, be sure to test again before you send the email, in case they’ve added formatting that may cause problems. The process we went through mitigates most of those problems, but they could still arise.

Top 10 Tips for Bullet Proof HTML Emails

  • Use tables with fixed pixel widths for a solid structure.
  • Use the align=center parameter to center your main table, if required.
  • Define your font-stack in the body, and in your table cells.
  • Use inline CSS to avoid it being stripped out.
  • Remember to set border:0; on the image tags.
  • Set margins and padding explicitly on your paragraphs.
  • Include spacing inside your images where you can.
  • A border in the background color can also act like a margin, but renders more consistently.
  • Use nested tables for consistent spacing elsewhere.
  • Think about what happens if your images fail to load, or if a cell is rendered at the incorrect height or width, and code a backup option.

Extra Resources for Email Building

Over on the Campaign Monitor site, we have general design guidelines and CSS support charts, or you can read my SitePoint book for more on HTML email design.

If you’re a graphic designer, and this all sounds a bit painful, I can recommend Brian Thies as an expert in the field. He’s a magician at turning graphic designs into rock-solid HTML emails and he also provides help in the email design forums.

Next time you need to go from PSD to HTML email, and you want to avoid stopping off at Hair Pulling and Silent Despair City, I hope this tutorial does the trick for you.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Windee

    WOAH! How did you know this was my project for tomorrow? Excellent timing. Thank you.

    • http://www.mathewpatterson.com Mathew Patterson

      It’s the mind reading technology we’ve been working on ;) I’m glad you found it useful.

  • stonedeft

    Thanks, I didn’t know you can do a preview of your email. Jeez! I hope dreamweaver can do that

    • http://www.mathewpatterson.com Mathew Patterson

      You’ll likely need to use an external service like Litmus to run a design test, it’s not built in to Dreamweaver.

  • thedebolavirus

    You gotta love that Japanese commuter link.

  • http://www.kingjason.co.uk jasonking

    A really nice job you’ve done on that. I’ve got to design a couple of nonprofits’ email newsletters soon and was casting around for examples, do I’m grateful that you shared these tips. Thanks!

  • JBiz227

    Mathew, was excited to see you post! There are some typos after the “basic top-level table structure” image I believe adding=padding and <body&gt…

    Otherwise keep it coming, loved your book and look forward to seeing future articles on html e-mail in the future.

    • http://www.onsman.com Ricky Onsman

      Typos fixed.

  • Bill

    Seriously, HTML standards in email clients both software and webmail is a joke. It isn’t getting any better eg. Outlook 2010 vs 2007. HTML emails that render properly for all users is a pipe dream and a waste of time! Matt, you are only pushing this because you work for Campaign Monitor?!?

    • Louis Simoneau

      Just because standards support is weak or non-existent doesn’t mean it’s a waste of time to build HTML emails. All our newsletters at SitePoint are HTML layouts that render pretty much the same in all clients, allow us to make the content more readable, include links and images, and format code samples differently from the body text. While text-only might be good for simple transactional emails like order confirmations, anything more complicated can benefit from a bit more design freedom.

      Look at the “X is now following you” emails from Twitter. Even though the content is very simple, I think they benefit hugely from being able to include avatars and links in a simple design.

      • Bill

        I wasn’t suggesting not creating HTML email or using plain text emails. I agree that Twitter emails in HTML look better. However, the notion that you can create “advanced” layouts (in a similar manner to a brochure) is rubbish. The new Yahoo Webmail is worse then their old webmail when it comes to rendering HTML code. More pressure should be put on the makers of email programs and webmail for compatibility rather then putting the pressure on designers to make it work.

        Until the HTML standard improves and allows something like the ability to embed an iframe (or portion of the page) that can call/render using a separate css file than the rest of the page used by the webmail interface, we are stuffed.

  • Dwayne Paisley-Marshall

    I would not use Dreamweaver for anything for me its just as old as HTML emails are. if you know what your doing Coda or text mate (not used before) will prob be 100 times better!

    • Mathew Patterson

      Actually, I mention Dreamweaver specifically because the visual design view makes it way quicker to work with complex tables to find the right spot in the code.

      You can do the same thing though with the DOM exploring models in Firebug and Web Inspector type tools in your browser.

  • Nidhi

    I have created a newsletter (HTML page in tables) as per the above article. Is there any other way to test html email? I mean other than litmus.

    • JBiz227

      I use Email on Acid (emailonacid.com), it’s a pretty nifty tool as well.

  • Scott

    Dreamweaver is the way to go for HTML emails . . .

  • Ansel Taft

    While I found this overview helpful, and a good refresher, I prefer VerticalResponse and MailChimp’s HTML EMail for Designers PDF’s. Between those three resources, you should be set to go.

    Ansel

  • michal rock

    I think this is really good that make PSD into full functional HTML email which is accessible and readable in email client and also in web browser. New developer take lots of time to convert the photoshop image into HTML webpage so there is few company which can do PSD to HTML work for you only very low price.