html email trends & best practice
TRANSCRIPT
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 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 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 TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
INTRODUCTION
A5
BEST PRACTICE
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 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.
INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
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.
INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
LIVE TEXT
A9
INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
LIVE TEXT
A10
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
HeaderYOUR HEADLINE
Main image
400x300
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
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
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
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
l inks to your website.
However these should only be
used where necessary.
Does this email look odd to you? Click here
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
link link link link link link
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 cl ickable.
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
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 l ines.
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
INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
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 .
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.
INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
COPY AND CONTENT
A18
INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
MAKE YOUR EMAIL RESPONSIVE
A19
1
INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
MAKE YOUR EMAIL RESPONSIVE
A20
1
23
4
5
6
1
INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
CURATE YOUR CONTENT
A21
2
INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
MAKE YOUR EMAIL MOBILE FRIENDLY
A22
2
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 tel l ing the
customer what to do.
Clear and bold cal l to actions.
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, scrol lable content.
!
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 pal let .
INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
TRENDS
A26
4 - Flat design
Use of f lat colours.
Simplist ic design.
Accessible content.
Mobile optimised.
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 scrol l more nowadays,
especial ly on mobile.
CTA’s for each section.
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 visual isation of where an email
draws cl icks.
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.
I f nothing is present, it wil l display
the name of the image.
TYPES OF EMAIL
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 tai lored l ike any advert.
Try not to think email .
Think advert.
INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
NEWSLETTER
A33
Informative emails , usual ly people
have signed up to.
Lots or separate articles.
Nav bar / content bar.
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.
Wil l at most include a header image,
logo and a footer.
A-B TESTING
35
INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
TEST LAYOUTS
A36
INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
TEST LAYOUTS
A37
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
INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
TEST IMAGES
A39
INFOGRAPHICS
INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
INFOGRAPHICS
A41
INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
INFOGRAPHICS
A42
43
NEW TECHNOLOGY
INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
JAVASCRIPT
A44
INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
VIDEO
A45