HTML Email Trends & Best Practice

HTML BEST PRACTICE GUIDE

2

INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D

AGENDA

A3

1. INTRODUCTION

2. BEST PRACTICE

a Technology limitations

b. Live text

c. Design + Layout

d. Mobile

e. Trends

f. Heat maps

g. Alt text

3. TYPES OF EMAILS

a. Registration

b. Adverts

c. Newsletters

d. Formal

4. A-B TESTING

5. INFOGRAPHICS

6. A BRIEF OVERVIEW OF NEW TECHNOLOGY IN EMAIL

7. QUESTIONS AND DISCUSSION


INTRODUCTION

A4

• This presentation will be looking at some new and innovative ways of email marketing in the events B2B and B2C sector from a design perspective.

• It wil l look at the different types of email communications; their purpose

and what design and layout attr ibutes should be consigned to each.

• It wil l also investigate the importance of different aspects of marketing

emails and how they are best uti l ised.


INTRODUCTION

A5

BEST PRACTICE


TECHNOLOGY LIMITATIONS

A7

• Flash and javascript are not supported by almost al l email cl ients.

• Most email cl ients do not support video.

• Avoid gifs.

• We have to use cross-platform fonts such as Arial , Verdana, Georgia and

Times New Roman.

• Most email cl ients do not support background images.


LIVE TEXT

A8

• Assume your images wil l be init ial ly blocked by email cl ients.

• By having “Live text” rather than images your copy wil l always be seen.

• Make sure your main headlines, t it les and cal l to actions use l ive text.

• This does l imit your design, but have no fear - there are clever ways

around this.


LIVE TEXT

A9


LIVE TEXT

A10


PRE-HEADER AND HEADER

A11

The Johnson Box

This is the most valuable area of

an email .

Ensure that the headline or

primary message appear within

this space.

Keep the header below 150px.

Does this email look odd to you? Click here

HeaderYOUR HEADLINE

Main image

400x300


LAYOUT

A12

500px -650px in width.

Vertical layout if possible


HeaderYOUR HEADLINE

Article / story 1 title or main message

Call to action

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor i Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodconsequat. Duis aute irure dolor i


TEXT AND IMAGES SHOULD BE IN THE RIGHT PROPORTIONS

A13

This might differ between B2B

and B2C.

It might be more necessary for

B2C to include larger visuals. Article / story 1 title or main message

Call to action

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dol


Call to action



PROVIDE A NAV BAR IF YOU HAVE MULTIPLE CATEGORIES.

A14

These could be anchor tags or

l inks to your website.

However these should only be

used where necessary.


HeaderYOUR HEADLINE


Call to action

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor i Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodconsequat. Duis aute irure dolor i

link link link link link link


CALL TO ACTIONS SHOULD BE CLEAR AND ENTICING.

A15

All feature headers and images

should also be cl ickable.


Call to action



Call to action



COPY AND CONTENT

A16

Use short sentences and

paragraphs.

Distinguish content using space

and dividing l ines.

Use bold and sub headers to

ensure the email has a clear

hierarchy of information.

14px for body copy.

22px for heading.


Call to action



Call to action

Lorem ipsum dolor !sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dol


COPY AND CONTENT

A17

Include al l your contact detai ls .

Include l inks to al l of the main sections

of your website.

Make it easy to share/forward.

Don’t hide your unsubscribe option.

Tel l people why they have received this

email .


Call to action


What we do:!Event 1 Event 2 Conference 1 Resources

Contact us:!www.website.co.uk +44 222 222 22222 Address, Address, Address, Address, Address

Why are you receiving this email?!Because you signed up to our newsletter or came to one of our shows.

Donʼt want any more from us?!Unsubscribe here.


COPY AND CONTENT

A18


MAKE YOUR EMAIL RESPONSIVE

A19

1


MAKE YOUR EMAIL RESPONSIVE

A20

1

23

4

5

6

1


CURATE YOUR CONTENT

A21

2


MAKE YOUR EMAIL MOBILE FRIENDLY

A22

2


TRENDS

A23

1 - Simplified content

Simpler and short sentences.

Clear instructions tel l ing the

customer what to do.

Clear and bold cal l to actions.


TRENDS

A24

2 - Mobile - again.

Mobile focused design.

Responsive design.

Large, scrol lable content.

!


TRENDS

A25

3 - Colour blocking

Use colours to separate sections of

your email .

Works well on mobile and desktop.

Striking use of your colour pal let .


TRENDS

A26

4 - Flat design

Use of f lat colours.

Simplist ic design.

Accessible content.

Mobile optimised.


TRENDS

A27

5 - Scrolling is OK

Less focus on the “fold”.

People scrol l more nowadays,

especial ly on mobile.

CTA’s for each section.


HEAT MAPS

A28

Most Email Marketing suits have this

function.

A visual isation of where an email

draws cl icks.


ALT TEXT

A29

Make sure you have written Alt text

for your images.

Before they load, email browsers

display this text to give the user an

idea of what the image is of.

I f nothing is present, it wil l display

the name of the image.

TYPES OF EMAIL


ADVERT

A32

These are email asking people to

do things.

Sign up, buy, subscribe.

These need to be tai lored l ike any advert.

Try not to think email .

Think advert.


NEWSLETTER

A33

Informative emails , usual ly people

have signed up to.

Lots or separate articles.

Nav bar / content bar.


FORMAL

A34

A more toned down approach to

convey a serious message.

Wil l at most include a header image,

logo and a footer.

A-B TESTING

35


TEST LAYOUTS

A36


TEST LAYOUTS

A37


TEST CALL TO ACTIONS

A38

CLICK HERE

CLICK HERE

CLICK HERE

CLICK HERE

FIND OUT MORE

FIND OUT MORE

FIND OUT MORE

BOOK NOW


TEST IMAGES

A39

INFOGRAPHICS


INFOGRAPHICS

A41


INFOGRAPHICS

A42

43

NEW TECHNOLOGY


JAVASCRIPT

A44


VIDEO

A45

Date post:	15-Apr-2017
Category:	Marketing
Upload:	oliver
View:	19,852 times
Download:	7 times