Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML Email Trends & Best Practice

20,205 views

Published on

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.

Published in: Marketing
  • I went from getting $3 surveys to $500 surveys every day!! learn more... ★★★ http://ishbv.com/surveys6/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • How to use "The Scrambler" ot get a girl obsessed with BANGING you... ♣♣♣ https://tinyurl.com/unlockherlegss
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

HTML Email Trends & Best Practice

  1. 1. HTML BEST PRACTICE GUIDE 2
  2. 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
  3. 3. 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.
  4. 4. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D INTRODUCTION A5
  5. 5. BEST PRACTICE
  6. 6. 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.
  7. 7. 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.
  8. 8. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D LIVE TEXT A9
  9. 9. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D LIVE TEXT A10
  10. 10. 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
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. 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.
  17. 17. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D COPY AND CONTENT A18
  18. 18. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D MAKE YOUR EMAIL RESPONSIVE A19 1
  19. 19. 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
  20. 20. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D CURATE YOUR CONTENT A21 2
  21. 21. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D MAKE YOUR EMAIL MOBILE FRIENDLY A22 2
  22. 22. 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.
  23. 23. 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. !
  24. 24. 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.
  25. 25. 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.
  26. 26. 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.
  27. 27. 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.
  28. 28. 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.
  29. 29. TYPES OF EMAIL
  30. 30. 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.
  31. 31. 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.
  32. 32. 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.
  33. 33. A-B TESTING 35
  34. 34. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D TEST LAYOUTS A36
  35. 35. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D TEST LAYOUTS A37
  36. 36. 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
  37. 37. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D TEST IMAGES A39
  38. 38. INFOGRAPHICS
  39. 39. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D INFOGRAPHICS A41
  40. 40. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D INFOGRAPHICS A42
  41. 41. 43 NEW TECHNOLOGY
  42. 42. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D JAVASCRIPT A44
  43. 43. INTRODUCTION BEST PRACTICE TYPES OF EMAIL A-B TESTING INFOGRAPHICS NEW TECHNOLOGY Q&D VIDEO A45

×