Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Email Design Primer

A handy resource for traditional or print designers looking to know more about the basics of commercial email design. Includes recommendations, tips, and samples. Created by Chris Sietsema at Teach to Fish Digital. See narrated video at http://teachtofishdigital.com/email-design-primer

  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Email Design Primer

  1. 1. Email Design Primer What Designers Need to Know about the Email Medium
  2. 2. What I Will Cover: 2 » How Email Is Different » Email Anatomy » Fonts, Images & CTAs » Mobile Email » Importance of Testing ! » No Code Samples or Technical Stuff @sietsema
  3. 3. 3 WHY IS EMAIL DIFFERENT? Various Email Clients Multiple Screen Sizes Limited Interaction Time Defined Restrictions @sietsema
  4. 4. Look at All the Email Clients! 4 Source: Litmus - August 2015@sietsema
  5. 5. 5 I WASN’T LISTENING. WHAT? Source: National Center for Biotechnology Information - April 2015 Average Attention Span in 2015 8.25SECONDS @sietsema
  6. 6. 6 “I’m just not getting enough email. I’d really like more.” - No One. Ever. @sietsema
  7. 7. 7
  8. 8. Start with the Finish Line 8 Email Landing Page @sietsema
  9. 9. Building in Blocks » HTML » Table Construction » Similar to LEGO Bricks 9 @sietsema
  10. 10. Simple Email Anatomy » Preheader » Main Headline » Evocative Image » Copy (Limited & Legible) » Call to Action » Footer 10 @sietsema
  11. 11. 11 MORE IS MORE Source: Constant Contact - July 2015 Click Rate vs. Number of Links @sietsema
  12. 12. Preferred Fonts & Fallbacks 12 » Courier New » Georgia » Times New Roman » Palatino Linotype ! » Courier » Lucida Console » Arial / Arial Black / Helvetica » Tahoma » Trebuchet » Verdana » Century Gothic » Lucida Grande Serif Fonts Sans-Serif Fonts Monospace Fonts @sietsema
  13. 13. 13 FONT THOUGHTS Recommendations for Fonts in Email 16pt 1.5 LINE HEIGHT BLACK TEXT * Provide a back-up that is web-safe * @sietsema
  14. 14. Image Blocking in Email 14 @sietsema
  15. 15. Images & Spacing 15 » Which of these emails is more appealing to you? @sietsema
  16. 16. CTA = Call To Action 16 » We must make it painfully obvious. » Use a button. @sietsema
  17. 17. 17 “Simplicity is the ultimate sophistication.” - Leonardo da Vinci @sietsema
  18. 18. 18 EMAIL ON THE GO Email Opens by Device Source: Movable Ink - January 2015 49.5% 16.8% 33.7% @sietsema
  19. 19. Responsive Email 19 » Hide » Align » Wrap » Expand / Shrink » Replace ! » Design for Mobile First? @sietsema
  20. 20. More Design Examples 20 » ReallyGoodEmails.com » inspiration.MailChimp.com » HTMLEmailGallery.com ! » Countless ebooks and Pinterest boards @sietsema
  21. 21. 21 DESIGN WITH EMPATHY DELIVER WITH A HYPOTHESIS @sietsema
  22. 22. Chris Sietsema » teachtofishdigital.com » @sietsema » 480.570.1636 22

×