A few lessons on HTML in Hotmail

15th December 2009 By Sam Burrows in Email design

Although being one of the most popular email clients, hotmail is one of the more difficult to design for. Hotmail (now Hotmail Live or Live as it is called) does not support some of the attributes that other clients do, so determining how Hotmail will render your HTML is a bit more difficult than other clients.

Instead of listing all HTML attributes that Hotmail does support it would be quicker to list the ones we know Hotmail does not support.

  • border-spacing
  • list-style-image
  • z-index
  • top
  • right
  • left
  • position
  • opacity
  • clip
  • bottom
  • margin
  • and all background properties.
Stacked images

One problem that we have noticed even the big players have when it comes to emails within Hotmail is stacked images. Most people overlook this as this problem appears only to happen in Firefox, however can look very unprofessional especially with emails containing lots of stacking images. In the majority of clients, images stacked would just sit directly above each other without any problems.

<img src="lgo_1.jpg" alt="littlegreenplane" />
<img src="lgo_2.jpg" alt="littlegreenplane" />

However in Hotmail, the images seem to be separated by a small gap.

This problem can be solved with a small bit of code added to the inline css of the image. display: block will eliminate any space added below the image.

<img src="lgo_isend_1.jpg" alt="i.send" style="display: block;" />
<img src="lgo_isend_2.jpg" alt="i.send" style="display: block;" />

The best way to learn about the restrictions of emails in any browsers is to test, test, test! Sign up for a free Hotmail Live account and use little green plane to send as many previews to this address as you wish.

Sam Burrows
About the Author

Sam Burrows

Sam is the lead designer for little green plane. A key driving force within the design team, he ensures any email templates and landing pages designed for you are fresh and engaging, whilst adhering to best practice guidelines and your existing brand collateral.