HTML Email Trends & Best Practice

transcript

HTML BEST PRACTICE GUIDE

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

AGENDA

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

• 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

BEST PRACTICE

TECHNOLOGY LIMITATIONS

• 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

• 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

PRE-HEADER AND HEADER

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

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

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.

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.

All feature headers and images

should also be cl ickable.

Call to action

COPY AND CONTENT

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

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

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

MAKE YOUR EMAIL RESPONSIVE

CURATE YOUR CONTENT

MAKE YOUR EMAIL MOBILE FRIENDLY

TRENDS

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

2 - Mobile - again.

Mobile focused design.

Responsive design.

Large, scrol lable content.

TRENDS

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

4 - Flat design

Use of f lat colours.

Simplist ic design.

Accessible content.

Mobile optimised.

TRENDS

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

Most Email Marketing suits have this

function.

A visual isation of where an email

draws cl icks.

ALT TEXT

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

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

Informative emails , usual ly people

have signed up to.

Lots or separate articles.

Nav bar / content bar.

FORMAL

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

TEST LAYOUTS

TEST CALL TO ACTIONS

CLICK HERE

FIND OUT MORE

BOOK NOW

TEST IMAGES

INFOGRAPHICS

NEW TECHNOLOGY

JAVASCRIPT