CSS: styling emails

Almost a year ago I made some tests with CSS and emails for a personal project involving the creation of HTML templates to be used with email messages. Here are some of my remarks on this subject.

Don't use inline styles

Inline styles are redundant and led to a poor maintainability. You should always use external style sheets to accomplish this task. Just create a CSS file for your email templates and use it through the link element.

Test your layout dimensions

You should always make sure to test the dimensions given to your layout elements. As a rule of thumb, fixed-width layouts work always fine, although you can even use elastic and fluid layouts. The problem here is that the rendering engine of an email client sometimes differs greatly from a browser's rendering engine.

Be careful with font sizing

Generally most developers use fixed font sizing on emails. This is fine, but it poses some accessibility problems if the email client doesn't allow a user to resize fonts when their dimensions are expressed in pixel. I didn't test this extensively, so be careful.

Background images

Most email clients pose some limitations to the use of background images (and images in general). For example, I noticed that Thunderbird didn't show a background image set via CSS, while Outlook did. This is another feature that needs to be tested very carefully.

Positioning schemes

This is another thing that I didn't test extensively. Web developers generally tend to use tables in order to create a cross-device pagination for their emails. Theoretically speaking, it should be possible to use floats and positioning on emails, although these features should be carefully tested.

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.