HTML Fails: What No One Tells You About HTML

(1)

HTML Fails: What No One

Tells You About Email HTML

(2)

| 2

Today’s Webinar Presenter

Kate McDonough

Campaign Manager at PostUp

•

Worked with various ESPs:

Constant Contact, Campaign Monitor,

ExactTarget, Distribion

•

Questions from today’s webinar will

be held at the end.

(3)

| 3

Today’s Agenda

Some basic tips and pitfalls to avoid:

•

The Anatomy of an Email

•

DOCTYPES

•

Table Properties

•

Tags and Capitalization

•

Alt Text & Which Clients Display Images by Default

•

Misuse of <center> and <br> Tags

(4)

| 4

(5)

| 5

•

All emails have a basic skeletal structure

•

Ignoring the structure and misplacing the ‘bones’

can lead to rendering problems

•

Not all elements of the skeleton must be used, but

they should be in the same order

(6)

| 6

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>This is the title of your document, when viewed as a webpage some browsers will show this</title>

(7)

| 7

The Anatomy of an Email

<head>

(8)

| 8

The Anatomy of an Email

<head>

(9)

| 9

The Anatomy of an Email

<head>

(10)

| 10

The Anatomy of an Email

<head>

(11)

| 11

The Anatomy of an Email

<head>

(12)

| 12

The Anatomy of an Email

<head>

(13)

| 13

The Anatomy of an Email

<head>

(14)

| 14

(15)

| 15

Why Use a DOCTYPE?

•

DOCTYPES should be used in all emails and be

placed before the <html> tag

•

Some web clients will strip out the DOCTYPES

•

Subtle differences in how email clients render

HTML emails with different DOCTYPES

(16)

| 16

The Best DOCTYPE for Email

•

XHTML 1.0 transitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

(17)

| 17

Effects of Not Having a DOCTYPE

•

No DOCTYPES = no paragraph margin

•

This can be seen in clients like:

–

Gmail

–

Apple Mail

–

iPad

–

iPhone

(18)

| 18

Effects of Not Having a DOCTYPE

•

No DOCTYPES =

–

Some special characters not supported

–

Problems in IE browsers with rendering margins and

(19)

| 19

(20)

| 20

Not Setting Table Properties

•

Specifically “cellpadding” and “cellspacing”

•

Why this matters:

–

Affects the alignment of your email

–

“Breaks” with multiple tables

–

If not set to “0” Outlook will add 2 pixels of padding

(21)

| 21

Not Setting Table Properties

(22)

| 22

(23)

| 23

(24)

| 24

Capitalizing Tags

•

Emails are in XHTML format

•

Case sensitive, requires all tags to be lowercase

•

Capitalized tags should be kept to web design

only

(25)

| 25

(26)

| 26

Not Including Alt Text

•

Spam filters & scoring

•

Alt text can function as

CTAs for emails that

are image heavy

(27)

| 27

(28)

| 28

(29)

| 29

(30)

| 30

(31)

| 31

Using the Tag <center> to Center-Align

•

Commonly used to center

align text

•

<center> can display

differently in certain browsers

•

Purely presentational rather

than structural

(32)

| 32

(33)

| 33

Using the Tag <center> to Center-Align

BEFORE

AFTER

<table border="0" cellpadding="0"

cellspacing="0" bgcolor="#EBEBEB">

<tr>

<table>

…content…

</table>

</td>

</tr>

</table>

</center>

<table border="0" cellpadding="0"

cellspacing="0" bgcolor="#EBEBEB“

align="center">

<tr>

<table>

…content…

</table>

</td>

</tr>

</table>

(34)

| 34

Misuse of the Break <br /> Tag

•

Written multiple ways:

–

<br>

–

<br/>

–

<br />

•

Preferred variation is <br />. If your doctype is

specified using HTML you can use the <br> tag. In

XHTML, you must close the tag with a final slash (e.g.

<br />)

•

Most emails use XHTML

Using break tags;

–

in place of rows with fixed heights

(35)

| 35

(36)

| 36

Copying & Pasting from a Microsoft

Product

•

Never keep your HTML in a

Word doc

•

Never copy and paste from

a Microsoft Product

•

Copying and pasting from a

Microsoft program can

cause damage

•

Microsoft products embed

unseen code

(37)

| 37

Copying & Pasting from a Microsoft

Product

(38)

| 38

(39)

| 39

Thank You!

[email protected]

Find me on twitter @PostUpKate

[email protected]