Quantcast
Channel: Ruben Canton » Web standards
Viewing all articles
Browse latest Browse all 18

HTML Email tricks

$
0
0

Tips to write HTML Emails that I’ve found. Note this post can be bsolete as email readers are constantly changing and evolving.

Background images

It is just not possible to add an image as a background at the moment. While most readers will accept it Outlook Office seems to have issues and Hotmail/LiveMSN just doesn’t support it. So unless you don’t mind some of your users not getting the image at all this doesn’t look like a good idea.

As a tip: None of the big companies I checked use background images on their emails, this included Amazon, Google, Ebay, HSBC, Channel4, BBC, … that should give you a hint.

Solutions

You can use plain colors on the background using a table’s BGColor property or the CSS property. Instead of using background images, use real image elements. To make it as “part of the background” you can always create some design with a visual effect that makes an image fuse with the background in a cool way. More job for the designers this time!!

Space gap below images

As email readers get closer to standards they have started considering images “inline” elements which means they are expected to have a default margin below them to allow some space for text (as some letters need to paint below the bottom, like “j” or “q”).

Solutions

To avoid this happening you can try several solutions, one of the quickest ones is to set “display:block” on the image element, if your image doesn’t need to behave as an inline element that saves the day.

Another is to set the “line-height:0″ to its parent container, if there is no text in the same container that will get rid of the margin easily.


Viewing all articles
Browse latest Browse all 18

Trending Articles