What’s working right now in email marketing? As email is opened more and more frequently on mobile, campaigns should focus on more than just responsive designs. Here are the current best practices for email, along with 5 key trends we're seeing in email campaigns right now.

2. HTML BEST
PRACTICE
GUIDE
2

3. 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

4. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
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 will look at the different types of email communications; their purpose
and what design and layout attributes should be consigned to each.
• It will also investigate the importance of different aspects of marketing
emails and how they are best utilised.

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

6. BEST PRACTICE

7. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
TECHNOLOGY LIMITATIONS
A7
• Flash and javascript are not supported by almost all
email clients.
• Most email clients do not support video.
• Avoid gifs.
• We have to use cross-platform fonts such as Arial, Verdana, Georgia and
Times New Roman.
• Most email clients do not support
background images.

8. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
LIVE TEXT
A8
• Assume your images will be initially blocked by email clients.
• By having “Live text” rather than images your copy will always be seen.
• Make sure your main headlines, titles and call to actions use live text.
• This does limit your design, but have no fear - there are clever ways
around this.

9. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
LIVE TEXT
A9

10. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
LIVE TEXT
A10

11. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
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
Header
YOUR HEADLINE
Main
image
400x300

12. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
LAYOUT
A12
500px -650px in width.
Vertical layout if possible
Does this email look odd to you? Click here
Header
YOUR 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

13. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
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
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

14. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
PROVIDE A NAV BAR IF YOU
HAVE MULTIPLE CATEGORIES.
A14
These could be anchor tags or
links to your website.
However these should only be
used where necessary.
Does this email look odd to you? Click here
Header
YOUR 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
link link link link link link

15. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
CALL TO ACTIONS SHOULD BE
CLEAR AND ENTICING.
A15
All feature headers and images
should also be clickable.
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
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

16. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
COPY AND CONTENT
A16
Use short sentences and
paragraphs.
Distinguish content using space
and dividing lines.
Use bold and sub headers to
ensure the email has a clear
hierarchy of information.
14px for body copy.
22px for heading.
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
Article / story 1 title or main message
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

17. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
COPY AND CONTENT
A17
Include all your contact details.
Include links to all of the main sections
of your website.
Make it easy to share/forward.
Don’t hide your unsubscribe option.
Tell people why they have received this
email.
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
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.

18. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
COPY AND CONTENT
A18

19. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
MAKE YOUR EMAIL
RESPONSIVE
A19
1

20. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
MAKE YOUR EMAIL
RESPONSIVE
A20
1
2
3
4
5
6
1

21. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
CURATE YOUR CONTENT
A21
2

22. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
MAKE YOUR EMAIL MOBILE
FRIENDLY
A22
2

23. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
TRENDS
A23
1 - Simplified content
Simpler and short sentences.
Clear instructions telling the
customer what to do.
Clear and bold call to actions.

24. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
TRENDS
A24
2 - Mobile - again.
Mobile focused design.
Responsive design.
Large, scrollable content.
!

25. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
TRENDS
A25
3 - Colour blocking
Use colours to separate sections of
your email.
Works well on mobile and desktop.
Striking use of your colour pallet.

26. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
TRENDS
A26
4 - Flat design
Use of flat colours.
Simplistic design.
Accessible content.
Mobile optimised.

27. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
TRENDS
A27
5 - Scrolling is OK
Less focus on the “fold”.
People scroll more nowadays,
especially on mobile.
CTA’s for each section.

28. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
HEAT MAPS
A28
Most Email Marketing suits have this
function.
A visualisation of where an email
draws clicks.

29. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
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.
If nothing is present, it will display
the name of the image.

30. TYPES
OF
EMAIL

31. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
ADVERT
A32
These are email asking people to
do things.
Sign up, buy, subscribe.
These need to be tailored like
any advert.
Try not to think email.
Think advert.

32. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
NEWSLETTER
A33
Informative emails, usually people
have signed up to.
Lots or separate articles.
Nav bar / content bar.

33. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
FORMAL
A34
A more toned down approach to
convey a serious message.
Will at most include a header image,
logo and a footer.

34. A-B
TESTING
35

35. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
TEST LAYOUTS
A36

36. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
TEST LAYOUTS
A37

37. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
TEST CALL TO ACTIONS
A38
CLICK HERE
CLICK HERE
CLICK HERE
CLICK HERE
FIND OUT MORE
FIND OUT MORE
FIND OUT MORE
BOOK
NOW

38. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
TEST IMAGES
A39

39. INFOGRAPHICS

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

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

42. 43
NEW
TECHNOLOGY

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

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