html email trends & best practice
TRANSCRIPT
![Page 1: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/1.jpg)
![Page 2: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/2.jpg)
HTML BEST PRACTICE GUIDE
2
![Page 3: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/3.jpg)
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
![Page 4: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/4.jpg)
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.
![Page 5: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/5.jpg)
INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
INTRODUCTION
A5
![Page 6: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/6.jpg)
BEST PRACTICE
![Page 7: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/7.jpg)
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.
![Page 8: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/8.jpg)
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.
![Page 9: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/9.jpg)
INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
LIVE TEXT
A9
![Page 10: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/10.jpg)
INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
LIVE TEXT
A10
![Page 11: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/11.jpg)
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
![Page 12: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/12.jpg)
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
![Page 13: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/13.jpg)
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
![Page 14: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/14.jpg)
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
![Page 15: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/15.jpg)
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
![Page 16: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/16.jpg)
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
![Page 17: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/17.jpg)
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.
![Page 18: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/18.jpg)
INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
COPY AND CONTENT
A18
![Page 19: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/19.jpg)
INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
MAKE YOUR EMAIL RESPONSIVE
A19
1
![Page 20: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/20.jpg)
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
![Page 21: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/21.jpg)
INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
CURATE YOUR CONTENT
A21
2
![Page 22: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/22.jpg)
INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
MAKE YOUR EMAIL MOBILE FRIENDLY
A22
2
![Page 23: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/23.jpg)
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.
![Page 24: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/24.jpg)
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.
!
![Page 25: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/25.jpg)
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 .
![Page 26: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/26.jpg)
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.
![Page 27: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/27.jpg)
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.
![Page 28: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/28.jpg)
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.
![Page 29: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/29.jpg)
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.
![Page 30: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/30.jpg)
TYPES OF EMAIL
![Page 31: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/31.jpg)
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.
![Page 32: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/32.jpg)
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.
![Page 33: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/33.jpg)
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.
![Page 34: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/34.jpg)
A-B TESTING
35
![Page 35: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/35.jpg)
INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
TEST LAYOUTS
A36
![Page 36: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/36.jpg)
INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
TEST LAYOUTS
A37
![Page 37: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/37.jpg)
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
![Page 38: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/38.jpg)
INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
TEST IMAGES
A39
![Page 39: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/39.jpg)
INFOGRAPHICS
![Page 40: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/40.jpg)
INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
INFOGRAPHICS
A41
![Page 41: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/41.jpg)
INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
INFOGRAPHICS
A42
![Page 42: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/42.jpg)
43
NEW TECHNOLOGY
![Page 43: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/43.jpg)
INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
JAVASCRIPT
A44
![Page 44: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/44.jpg)
INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D
VIDEO
A45
![Page 45: HTML Email Trends & Best Practice](https://reader034.vdocuments.mx/reader034/viewer/2022042619/587aaa551a28abed218b534b/html5/thumbnails/45.jpg)