Email Design

With all of the different email clients out there it can be difficult to account for all of their quirks. You expect that your email will look slightly different in Gmail than it does in Hotmail, but did you know that the browser you use can affect the display as well? Hotmail, in particular, behaves differently in Internet Explorer than it does in Firefox.

When using Hotmail in IE, properly coded HTML will display as expected, but some issues appear when using Hotmail in Firefox. If you’ve ever noticed extra space underneath your images like the screen shot below you are not alone. The Hotmail / Firefox combination results in about an extra 10 pixels of space being added below your images. This can wreak havoc with your design especially when you are expecting image elements to line up flush with one another.



Thankfully there is an easy fix to take care of this issue. By adding some inline CSS to each of your image tags your email will look they way you want it to. Setting the “display” property to “block” ensures that your image is treated as a block-level element with a line break before and after it.

<img alt="" src=”image.jpg” width=”60” height=”10” style=”display: block;”>

Once this code is in place it should fix the display issue you are seeing. Make sure to test your email again once you’ve made this change to confirm that it is working properly in Hotmail as well as other email clients.

This email client / browser quirk is a good reminder about how important it is to thoroughly test the display of your email in as many environments as possible. When testing the display of an email you want to pay attention not only to different email clients, but how the same web-based email client functions in different browsers.


Tim Siukola
Manager, Campaign Solutions
ExactTarget Campaign Solutions Team