How to Code HTML Email Newsletters

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

Media Queries

n/a

✔

n/a

✔

-

n/a

Colors

HEX

✔

RGB

✔

RGBa

✔

-

✔

-

✔

-

HSL

✔

-

✔

-

HSLa

✔

-

✔

-