Best Practices for Email Coding

A newsletter template that displays perfectly for every subscriber - is it possible? Of course it is and we make it easier to achieve. Take a look at this report prepared by FreshMail’s experts which describes the 40 most used email clients. Over seventy pages of insightful and useful knowledge ready to be put to use in your next newsletter!

Raport CSS

In the report you will find

  • Examination of the properties of CSS technology in email
  • Test results
  • Practical advice for email designers and developers regarding responsive email design
  • Examples of ideal coding
  • The recipe for the perfect newsletter
  • Useful links
Raport CSS

Download the report for free

Download PDF

Summary table of test results

Take a look at our analysis of CSS properties for 16 of the most popular email applications. To learn more, download the full report....

CSS properties / email clients Apple Mail Android 4.3 (Native) Outlook '07 / '10 / '13 Outlook 2011 iPhone / iPad (Native) iPhone / iPad (Gmail) Windows Live Mail 2012 AOL Gmail Office 365 Outlook.com Yahoo! Mail
preheader Yes Yes Yes No Yes Yes No Yes Yes Yes No Yes
Background (color and images): background - body
background-image Yes Yes No Yes Yes No Yes No Yes No No No
background-repeat Yes Yes No Yes Yes Yes Yes No Yes No No No
background-position Yes Yes No Yes Yes No Yes No No No No No
background-size (px) Yes Yes No Yes Yes No Yes No No No No No
background-size (%) Yes Yes No Yes Yes No Yes No No No No No
background-size: cover Yes Yes No Yes Yes No Yes No No No No No
background-size: contain Yes Yes No Yes Yes No Yes No No No No No
Background (color and images): background - table
background-color Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
background-image Yes Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yes
background-repeat Yes Yes No Yes Yes Yes Yes Yes Yes No No Yes
background-position Yes Yes No Yes Yes Yes Yes Yes No No Yes Yes
background-size (px) Yes Yes No Yes Yes No Yes Yes No No Yes No
background-size (%) Yes Yes No Yes Yes No Yes Yes No No Yes No
background-size: cover Yes Yes No Yes Yes No Yes Yes No No Yes No
background-size: contain Yes Yes No Yes Yes No Yes Yes No No Yes No
Background - td
background-color Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
background-image Yes Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yes
background-repeat Yes Yes No Yes Yes Yes Yes Yes Yes No Yes Yes
background-position Yes Yes No Yes Yes Yes Yes Yes No No Yes Yes
background-size (px) Yes Yes No Yes Yes No Yes Yes No No Yes No
background-size (%) Yes Yes No Yes Yes No Yes Yes No No Yes No
background-size: cover Yes Yes No Yes Yes No Yes Yes No No Yes No
background-size: contain Yes Yes No Yes Yes No Yes Yes No No Yes No
display: block Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
display: inline Yes Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yes
display: inline-block Yes Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yes
display: none Yes Yes Yes (txt) Yes Yes Yes Yes Yes No No Yes Yes
Style element
<style></style> tag in section <head> Yes Yes Yes Yes Yes No Yes No No Yes Yes No
<style></style> tag in section <body> Yes Yes Yes Yes Yes No Yes No No Yes Yes Yes
Link tag
<style></style> tag in section <head> Yes Yes No Yes Yes No Yes No No No No No
<style></style> tag in section <body> Yes Yes No Yes Yes No Yes No No No No No
Web fonts
external font -> link Yes Yes No Yes Yes No No No No No No No
external font -> @import in head Yes Yes No Yes Yes No No No No No No No
external font -> @import in body Yes Yes No Yes Yes No No No No No No No
@Font-Face Yes Yes No Yes Yes No No No No No No No
Selectors
e Yes Yes Yes Yes Yes No Yes No Yes Yes Yes Yes
* Yes Yes No Yes Yes No Yes No Yes Yes Yes No
e > f Yes Yes No Yes Yes No Yes No Yes Yes Yes Yes
e:link Yes Yes Yes Yes Yes No Yes No No No Yes Yes
e:active Yes No No Yes No No Yes No No No No Yes
e:hover No Yes No Yes Yes No Yes No No No Yes Yes
e:focus Yes No No Yes Yes No Yes No No No No Yes
e+f Yes Yes No Yes Yes No Yes No Yes No No No
e[foo] Yes Yes Yes Yes Yes No Yes No No Yes Yes Yes
e.className Yes Yes Yes Yes Yes No Yes No No Yes Yes Yes
e#id Yes Yes Yes Yes Yes No Yes No No Yes Yes Yes
e:first-line Yes No No Yes Yes No Yes No No No Yes Yes
e:first-letter Yes No No Yes Yes No Yes No No No Yes Yes
Border properties
border Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
border-color Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
border-collapse Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
border-spacing Yes Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yes
border-style Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
border-width Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
Lists
list-style-position Yes Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yes
list-style-type Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
Fonts
font-family Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
font-size Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
font-style Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
font-variant Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
font-weight Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
Margin and padding
margin (works only with block elemements) No No No No No No No No No No No No
padding Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
Text properties
color Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
direction Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
letter-spacing Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
line-height Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
text-align Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
text-decoration Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
text-indent Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
text-transform (uppercase) Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
word-spacing Yes Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yes
white-space Yes No Yes Yes Yes No Yes Yes Yes No Yes Yes
Positioning
bottom Yes Yes No Yes Yes No Yes Yes No Yes No No
clear Yes Yes No Yes Yes No Yes Yes No Yes Yes No
clip Yes Yes No Yes Yes No Yes Yes No No No No
float Yes Yes No Yes Yes Yes Yes Yes Yes Yes No Yes
left Yes Yes No Yes Yes No Yes Yes No Yes Yes No
position Yes Yes No Yes Yes No Yes Yes No Yes No No
right Yes Yes No Yes Yes No Yes Yes No Yes No No
top Yes Yes No Yes Yes No Yes Yes No Yes No No
vertical-align Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
z-index Yes Yes No Yes Yes No Yes Yes No Yes No No
Dimensions
height Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
width Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
min-height (works only with block elemements) Yes Yes No Yes Yes Yes Yes No Yes (block) Yes Yes (block) Yes
min-width Yes Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yes
Other properties
cursor Yes No No Yes No No Yes Yes No No Yes Yes
empty-cells Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
opacity Yes Yes No Yes Yes No Yes Yes No No Yes No
outline Yes Yes No Yes Yes Yes Yes Yes Yes No No Yes
overflow No Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yes
box resize Yes No No Yes No No No Yes No No No No
visibility Yes Yes No Yes Yes No Yes Yes No Yes Yes Yes
Gradients
gradient - email background Yes Yes No Yes Yes Yes Yes Yes Yes No Yes No
gradient - button Yes Yes No Yes Yes Yes Yes Yes Yes No Yes No
CSS 3 and HTML 5
<canvas> Yes No No No No No Yes No No No Yes No
border-radius Yes Yes No Yes Yes Yes Yes Yes Yes No Yes No
box-shadow Yes Yes Yes Yes Yes No Yes Yes No No Yes No
box sizing (border-box;) Yes No No Yes Yes No Yes Yes No No Yes No
multiple background Images Yes Yes No Yes Yes Yes Yes Yes Yes No No No
transition Yes Yes No Yes No No Yes Yes No No Yes No
multiple Columns Yes Yes No No No No Yes Yes No No No No
<svg> Yes Yes No Yes Yes No Yes No No No Yes No
text-shadow Yes Yes No Yes Yes No Yes Yes No No Yes Yes
<video> No No Yes Yes Yes No No No No No No No
Animation
Animated gif Yes Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yes
Responsive
RED n/a Yes n/a Yes Yes No n/a n/a n/a n/a n/a n/a
Media Queries n/a Yes n/a Yes Yes No n/a n/a n/a n/a n/a n/a
Colors
HEX Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
RGB Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
RGBa Yes Yes No Yes Yes Yes Yes Yes Yes No Yes No
HSL Yes Yes No Yes Yes Yes Yes Yes Yes No No No
HSLa Yes Yes No Yes Yes Yes Yes Yes Yes No No No