Techniques For Overcoming Poor CSS Support In Email

Advertisement

Designing and developing emails can be challenging, especially if you start doing it after years of designing and developing websites. Unlike most Web browsers, email clients have not yet united in support of HTML email standards, resulting in poor CSS support for email.

Inconsistent support for images in email clients has thus motivated us to experiment in a code editor and to develop the following techniques.

Technique 1: HTML Gradients

Creating gradients for the Web is very simple with repeating background images and tools that produce cross-browser-compliant code, such as Ultimate CSS Gradient Generator1. A gradient for email requires a much different approach, due to the lack of support for background images in some email clients.

Using gradients in email is possible without repeating background images or CSS3. It can be achieved entirely in HTML with pixel planning, table-cell background colors and appropriate cell widths and heights.

How to Begin an Email Template With Gradients

Because designing and developing for email requires an awareness of the limitations of email clients, as opposed to standards for Web browsers, we should start with a review of CSS support in email2.

Emails are coded using tables, so we have to create design sketches and Photoshop mock-ups with table-based layouts in mind. Keep it simple, and have a clear idea of where to position the gradients and how they will behave (say, if we want a gradient to expand horizontally to fit the viewport’s width).

How Gradients for the Header, Box Shadow And Footer Differ

  1. The header gradient will expand horizontally on either side of the header image according to the browser or device’s width. So, if the viewport’s width is wider than the width of the header image, the gradient will fill the extra space. Using percentage widths of 33%, 34% and 33% for three columns makes this possible.
  2. The box-shadow gradient will have a fixed width and a flexible height depending on the content’s height, which will vary from email to email.
  3. Similar to the header gradient, the footer gradient will also expand horizontally according the browser or device’s width, but it will not have an image in the center.

screenshot

Behaviors of the header, box-shadow and footer gradients.

Plan Pixel by Pixel: Sample Colors, Record Colors and Note Number of Repeating Colors

Colors need to be sampled and recorded to recreate the gradient in HTML. Because the HTML header gradient will appear on either side of the header image, the HTML colors will need to match the colors in the header image. Sample colors from the actual optimized image, not the PSD; optimizing an image for the Web and reducing the file’s size using a tool like ImageOptim3 could change the color values slightly from the PSD.

The header image is the maximum recommended width of the email (600 pixels wide) by 120 pixels high. Open the optimized header image in Photoshop and zoom in 3200%. Use the Eyedropper tool to sample the color values for each pixel from top to bottom. Record the color values in a text editor, and note the number of pixels if color values repeat. Sample colors directly from the PSD for the box-shadow and footer gradients, since they don’t need to match any optimized images. Record the footer gradient colors just as you did the header gradient.

Screenshot

Zoom in, gather and record color values using the Color Picker tool in Photoshop.

Curveball Corners

The box-shadow gradient isn’t all gradient. The gradient lies between the four corners, which can also be recreated in HTML. Use the Color Picker to determine where the gradient ends and the corner begins. Sample and record colors as you did for the gradient portion of the box shadow. Use a spreadsheet for the corner portion of the box shadow to record color values and the pixel position. Sampling and recording only one corner and one side of the gradient is necessary because the color values are the same for all four.

screenshot

Record the pixel position and color values for one corner in a spreadsheet. Use this data to create all corners in HTML by flipping the order of the color values.

Save all files with the color data for later reference when www.

Temporary Tricks to Make Coding Easier

Add temporary cell padding and a width of 100% to the table to make cells easier to select in the design view in Dreamweaver. Add background colors to distinguish corners for easier merging.

screenshot

Left: Temporary colors and padding distinguish corners and cells for easier www. Right: Add color values and merge center cells.

How to Code the HTML Gradients

Copy and paste the recorded color values into the <tr> tags as background colors. Add heights to the <td> tags by referring to the repeating pixel numbers, and then merge the center cells from the end of the gradient up. This merged <td> cell is the place to add the header image.

<tr bgcolor="#525252">
    <td height="2" width="33%"></td>
    <td rowspan="95" width="34%">Header image will go here</td>
    <td width="33%"></td>
  </tr>
  <tr bgcolor="#515151">
    <td height="2"></td>
    <td></td>
  </tr>
  <tr bgcolor="#505151">
    <td height="1"></td>
    <td></td>
  </tr>
  <tr bgcolor="#505050">
    <td height="2"></td>
    <td></td>
  </tr>
  <tr bgcolor="#4f4f4f">
    <td height="2"></td>
    <td></td>
  </tr>

To code the HTML corners, refer back to the spreadsheet for the values of the corner colors. Copy and paste them into the appropriate <tr> tags. The background colors from one corner can be applied to all corners by flipping the order of the color values vertically and/or horizontally.

Fixed heights and widths will keep the cells from expanding. Apply cell heights and widths only to those cells that need defining. For example, in the box-shadow gradient, add heights to the cells of the first column only, excluding the one center cell that represents the gradient. This will allow the gradient to expand vertically depending on the content’s height. Add widths to all cells of the first row only. The middle cell of the first row needs to be wider in order to hold the nested table of content.

Once all heights, widths and colors have been added, remove the temporary cell padding, 100% table width and non-breaking spaces.

screenshot

The design view in Dreamweaver, showing the main table complete with header and footer gradients.

Here are some pros and cons to the HTML gradient technique.

Pros

The results are clear. This technique renders consistently well for the vast majority of email clients without relying on images or background images, which have inconsistent CSS support. This means that more people will be able to view the design as intended, without having to change their email settings to display images. It also gives the designer more creative freedom and makes consistent branding possible where gradients exist. And remember, not all gradients have to be as complex and time-consuming as the header and box-shadow gradients in this article. These are included to show different examples and to demonstrate how they can be accomplished. The footer gradient covered here is fairly quick and easy.

Cons

This technique does have potential drawbacks. It can be labor-intensive and require additional code, which could increase the file’s size; this will depend on the number of colors in the gradient itself and the number of gradients in the email template. HTML gradients might not be practical for everyone; an alternative technique4 that uses background images is worth checking out.

Technique 2: Plan Padding As Rows And Columns

When it comes to padding for email, planning and coding the padding using rows and columns with widths and heights is key. This technique renders better and more consistently in email clients than inline margins, CSS padding or cell padding.

Drag and Count

In Photoshop, make sure to turn on the rulers, which makes adding guides possible. Drag guides vertically and horizontally over the PSD mock-up to define sections for content, images, padding, etc. Once the columns and rows are clearly defined, count them and insert the table accordingly.

screenshot

Use guides in Photoshop to figure out the number of columns and rows for the content table.

Merge With Care and Check Your Wide Load

Use temporary cell padding to make merging easier. Merge cells to create distinct sections as defined by the PSD guides and to eliminate extra code where possible. Keep track of cell widths after each merge so that all cells, merged or not, add up to the total fixed width of the table. Remember to remove the temporary cell padding when the table is complete.

screenshot

Four tables merged, with appropriate cell widths and heights applied.

How to Avoid Unintended Extra Cell Padding

Eliminating white space between <td> tags is important. Some email clients create additional padding from white space, which will ruin the gradient by blowing up the cells’ heights. Non-breaking spaces should also be avoided for similar reasons across all email clients.

Remember to paste only HTML code into the HTML view of a WYSIWYG window. Don’t paste HTML code into the visual view of a WYSIWYG window. The WYSIWYG editor will add unwanted code to HTML, such as non-breaking spaces, which will cause inaccurate results, ruins margins, etc. It can also drive a developer who is trying to debug the code insane.

Tools to Test Email Templates

Check the HTML template throughout the coding process locally in a browser. Another helpful resource is Fractal5, which validates HTML emails across all major clients and fixes known email quirks. The last step is to test for cross-client compatibility. Litmus6 provides email previews across 30+ email clients, spam filter tests and email analytics. I use Carrier Pigeon7, which uses a Litmus rendering feature.

Final Result Among Different Email Clients

HTML gradients and padding render consistently8 across the following email clients and browsers:

  • AOL Mail (Internet Explorer and Firefox);
  • Apple Mail 4;
  • Gmail (Internet Explorer and Firefox);
  • Hotmail (Internet Explorer and Firefox);
  • Lotus Notes (8 and 8.5);
  • Me.com (Firefox);
  • Outlook (2000, 2002/XP, 2003, 2007, 2010);
  • Thunderbird (2.0 and 3.0);
  • Yahoo Mail (Internet Explorer and Firefox).

Lotus Notes (6.5 and 7) is the only email client that does not display gradients correctly.

screenshot

A sample of inbox previews and spam reports.

Resources

(al)

Footnotes

  1. 1 http://www.colorzilla.com/gradient-editor/
  2. 2 http://www.campaignmonitor.com/css/
  3. 3 http://imageoptim.pornel.net/
  4. 4 http://www.campaignmonitor.com/blog/post/3363/updated-applying-a-background-image-to-html-email/
  5. 5 http://getfractal.com/
  6. 6 http://litmus.com/
  7. 7 http://mycarrierpigeon.com/
  8. 8 http://marketer.sendlabs.com/renders/previewReport.php?id=5923754
  9. 9 http://www.email-standards.org/
  10. 10 http://www.campaignmonitor.com/blog/post/3363/updated-applying-a-background-image-to-html-email/
  11. 11 http://www.smashingmagazine.com/2010/01/19/design-and-build-an-email-newsletter-without-losing-your-mind/
  12. 12 http://www.campaignmonitor.com/downloads/documents-tools/campaign-monitor-guide-to-css-in-email-sept-2011.pdf
  13. 13 http://www.sitepoint.com/code-html-email-newsletters/

↑ Back to topShare on Twitter

Lynda Elliott is a front-end developer for Dyn. Despite being near-sighted, she's been focused on improving the visual experience way before film disappeared from pre-press. Her outside visual activities include photography, abstract painting and creating digital art. Although Lynda is not yet a regular tweeter, you can connect with her on Twitter.

Advertising
  1. 1

    Hello Lynda,
    interesting article but… why I have to do that? Isn’t more easier to make all the graphic stuff (gradients too) in PS and then cut it properly thinking about tables, rows and cells?

    I’m asking for that ’cause actually for me this is a crazy work to do… it takes too much time (and in email design many times you have to prepare a new design from the morning for the middle-day without thinking too much “Omg I forgot that px… my agency will kill me!”). Btw I appreciate the study and the research u did about this issue ;-)

    0
    • 2

      while I agree that the above method required too much work, you cannot use background-image so you cannot cut it the same way you would

      0
    • 3

      @Riccardo,

      Sometimes the size of mailing is very important. You should also remember that many people opens e-mails without downloading images.

      0
    • 5

      @Riccardo

      While this is a great deal of work, the essential argument in favor of using CSS gradients and the like versus using tables and images to replicate the effect is that email clients can oftentimes add mystery spacing to rows and cells that wreck havoc on your mosaic image.

      This is an attempt to circumvent that and is best used in template settings that will see multiple uses rather than one off “o hey can u make dis email in a few hours?” type settings.

      0
  2. 6

    Nice CSS tutorial.Thank you.

    0
  3. 7

    For minor drop shadows etc, given that the only major client that will not support background images is Outlook 2007 (9% of email clients), I think it would be far better to use background images for these elements (or images) and simply let to shadows degrade gracefully (they just wont appear and in most cases users wont even know what they were missing and will look perfectly fine with images turned off), it seems crazy to me to attempting to code the shadow using a few dozen table cells!

    Additionally, there’s a few email clients out there that will ignore heights/widths set on empty table cells, so spacer images would also likely need to be added to these dozen cells too.. Seem’s the cons far out weigh the pro’s in my personal opinion.

    0
  4. 8

    lol this is insane. i think this will take up more actual bandwidth than inserting images. interesting though none the less.

    0
  5. 9

    how to create a simple table with colored cells by using javascript while loop?
    plz give a anz…

    0
    • 10

      @koshi — You can’t use JavaScript in emails to render the cells. JavaScript is a security risk and 99.9% (cause I’m not 100% sure) of all ESP (Email Service Providers) will remove your scripts when they process your code before delivering it to their customer’s inbox.

      @Graham – background images can also get striped out. Currently in Outlook 2007 as you noted, plus Gmail and in Android devices. Also, combine cells to avoid spacers. If necessary nest a table inside a td to create the same look – and or add margin/padding where needed to create the spacing.

      Here’s a great resource for what you can and can’t use: http://www.campaignmonitor.com/css/

      My rule of thumb is white space rules! If in doubt if it will render as you designed, use white (or a solid color, which is allowed in 100% of the email readers! Or a graduated background as noted in this article)

      – JP
      web designer/programmer

      0
  6. 11

    Probably the most esoteric technique I’ve ever seen documented… Can’t fathom how this would save anyone time or aggravation implementing even the most complicated gradients, but kudos on the thorough documentation.

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top