Email Campaigns + Frontend Development

Fixing Two Basic Email Quirks


Nick Stewart

on 3/29/2017

Working with emails is like traveling back in time to when Internet Explorer had the majority market share and tables were still popular for layouts. Unfortunately, email clients are stuck in this time frame (looking at you Outlook) and when developing emails you have to throw out a lot of modern techniques.

Two issues I discovered when working with emails are background images and image width.

Background Image and VML Spacing

Every major email client except Outlook supports background images. However, the great folks over at Campaign Monitor found a way to make background images happen in Outlook and thus created Bulletproof Background Images. This approach uses a VML element wrapped in an IE conditional. From there, you have your content either wrapped in a table or div.

In cases where the background VML is applied to a single cell, Outlook will create a gap (empty paragraph) at the end of the VML. To prevent this ruining your layout, wrap the parent container of the VML with line-height and font-size both set to 0.

Image Width

Outlook does not respect an image’s width unless you add a width attribute with the set width without a unit declared (so no px).

Also, always refer back to the CSS Support Guide for any questions if you can achieve something in an email.

Share to

Related Posts

Email @ 50: Email Development
Email @ 50: Email Development

By: Nick Stewart on 8/6/2021

Email development has always been the bane of a web developer's existence. You have to use outdated methods and don't have access to the full modern web to create a nice looking email that thousands of people will see. It's like asking a Nascar mechanic to create a car using only tools from the 90s - it can be done but its more than a pain.

Read More »
Email @ 50: The Art of Email Design
Email @ 50: The Art of Email Design

By:Morgan Plappert on 8/6/2021

I remember when I first started out as a designer (professionally), having to play Photoshop Tetris with cut up image blocks to piece together a full email layout. As a UX designer, we are taught that nothing is more important than usability and utility … and let’s just say, nothing puts those things to the test quite like Photoshop Tetris. Thankfully we have more sensible solutions now, but email design still comes with its added constraints and limitations. Luckily, I’ve had enough time and practice to be able to share a bit of knowledge, tips & tricks with you fine folks. So, let’s cut it up.

Read More »