Content

How to Code HTML Email Newsletters

29 views April 4, 2019 0

Coding an HTML email is a fun, practical problem for programmers to solve. Unlike coding a web page, HTML emails need to display well on old email software — think Outlook or Mac Mail, as well as adapt to phone and tablet screens. Below you can find information on how to create HTML emails that display well on any device, plus ideas to adapt your current HTML email code to display on phones and tablets.

Take a look at our analysis of CSS properties for 12 of the most popular email applications.

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