Table of Contents

Why is email display an issue in email marketing? ...... 2 Expert Email Design ...... 3 Windows PC and Apple Mac desktop email programs ...... 4 Webmail and mobile device email apps ...... 5 Creating your HTML email structure ...... 6 Introduction ...... 6 What to include in your email tag ...... 7 tag ...... 7 Key tags ...... 8 Essential CSS

Why?

These styles ensure that email readers do not impose their own CSS on your layout.

.ReadMsgBody and the .ExternalClass selectors are specifically for Outlook.com and Office 365 webmail to stop the background fill container If no default link collapsing. colour is set, some

email readers will impose their own The td a and div a selectors stop email readers default value imposing their own link colours on your content - copy the link colour value used in the email tag into here.

The img, a img selectors ensure that images display consistently with no borders (e.g. if they have links set on them).

9

The table, th, td, tr selectors ensure that nested tables pick up the text styles set on the next parent element that has an inline style declaration rather than using the browser defaults.

The font-weight:normal ensures that readers don’t impose their own font-weights on text within these table elements.

The th selector overrides any values readers may have to set their own padding and alignment values on content.

The [office365] selectors prevent images from having an unexplained gap appearing underneath them due to Outlook.com and Office 365 email readers treating all images as clickable button elements.

10

CSS Media queries for responsive emails

What to do …

CSS and @media media queries should be used in a