Fixing Gaps in HTML Emails for Gmail and Outlook

Posted on Wednesday, July 4th, 2012

Skills

  • Photoshop (Slice tool)
  • HTML/CSS Development
  • Cross-email client compatibility (Outlook, Gmail)

HTML emails are so much more than meets the eye, especially when it comes to complicated designs that require some pretty nasty tables (if you're doing it by hand) to make it look right. I found a nice resource that explains CSS support for various popular email clients out there, which is useful if you're coding emails by hand. It's also useful if you're not, because despite how well Photoshop slices emails, there are a few tweaks that need to be added even after Photoshop automagically generates the HTML for you.

Modify Photoshop Output Settings

The first thing I do when setting up Photoshop to slice emails is change the Output settings. I've taken a screenshot of the two setting screens that I modify: [gallery] These settings were accomplished through a series of trial-and-error. It makes sense that TD widths and heights should always be specified.

Slice Your HTML Email

A cool thing about Photoshop (I have CS6) is you can actually assign a URL to slices of your image before you even output it to code. You can also name certain slices so that if you do have to modify them in the code for whatever reason, you can find them more easily. And finally, though I wouldn't recommend it, you can also choose to output text/HTML instead of an image for a particular slice. So theoretically, if you know your text won't be too long it stretches the table cell and breaks the entire design, you can take care of inputting selectable text content right here in Photoshop. I don't do this because I like to make sure the text size is specified (which takes some experimenting) so that the table cell doesn't stretch and cause gaps in the design. Once you have your image sliced, you should be ready to Save for Web as an HTML file with the correct Photoshop settings.

Make Sure Your Image Is No Longer Than 1790px, or Get Ready to Stack

From reading this article on Outlook gaps, I learned that in order to avoid weird gaps in Outlook, you have to either make sure that your email is no taller than 1790px, or else you'll need to split the PSD into two images that you'll need to slice separately. When you save them, save as two different sets of HTML/images. Then, open the code for both the HTML files generated, and copy and paste the entire table from the second one right beneath the first one. ("Stacking" your tables.)

Find and Replace to Modify the IMG tags

In order to prevent spacing in the Gmail web interface, "display:block" needs to be added to the IMG tags. I did a find and replace in my text editor and replaced all instances of "img" with "img style="display:block;margin:0;padding:0;border:0;" -- I zeroed out those properties just for good measure.

Control your paragraphs

Outlook by default sets some pretty big margins on P tags. When I insert text in the table cells I designated for selectable text, I opt for the SPAN tag to control and style my text. I use these CSS properties: font-family, line-height (especially useful for headers), font-size, font-weight, color. Because SPAN is inherently display:inline, I use
to create line breaks. Padding and margin don't work with SPAN tags, so
tags and line-height is how I control my vertical spacing. This is what my code would look like:

Text

Host Images On Your Own Server

It's good practice and easier to host images on your own server where you know what the path and what the file names are ultimately going to be. What I did is take Photoshop's outputted HTML and did a find/replace for all instances of where "images/" appears (which is the default directory Photoshop saves the sliced images to) with "http://myhostname.com/path/to/images/".

Send Yourself a Test In Multiple Clients

Make sure to use a variety of clients when you're testing your email. These steps have worked for me so far. If anyone has any other tips, I'd love to hear them.

COPYRIGHT © 2019 BY JESSICA CHAN