Download as PDF, PPTX
Uploaded byChris Sietsema
Email Design Primer
This document is a primer for designers on email design, covering topics like email anatomy, font recommendations, and the significance of testing and responsive design. It highlights the importance of simplicity and usability in email design, emphasizing that emails should be appealing and tailored for different devices. The presenter, Chris Sietsema, encourages designers to create with empathy and to deliver their designs with a hypothesis in mind.
More Related Content
Email Design Primer
- 1. Email Design Primer WhatDesigners Need to Know about the Email Medium
- 2. What I WillCover: 2 » How Email Is Different » Email Anatomy » Fonts, Images & CTAs » Mobile Email » Importance of Testing ! » No Code Samples or Technical Stuff @sietsema
- 3. 3 WHY IS EMAILDIFFERENT? Various Email Clients Multiple Screen Sizes Limited Interaction Time Defined Restrictions @sietsema
- 4. Look at Allthe Email Clients! 4 Source: Litmus - August 2015@sietsema
- 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 “I’m just notgetting enough email. I’d really like more.” - No One. Ever. @sietsema
- 7.
- 8. Start with theFinish Line 8 Email Landing Page @sietsema
- 9. Building in Blocks »HTML » Table Construction » Similar to LEGO Bricks 9 @sietsema
- 10. Simple Email Anatomy »Preheader » Main Headline » Evocative Image » Copy (Limited & Legible) » Call to Action » Footer 10 @sietsema
- 11. 11 MORE IS MORE Source:Constant Contact - July 2015 Click Rate vs. Number of Links @sietsema
- 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 FONT THOUGHTS Recommendations forFonts in Email 16pt 1.5 LINE HEIGHT BLACK TEXT * Provide a back-up that is web-safe * @sietsema
- 14. Image Blocking inEmail 14 @sietsema
- 15. Images & Spacing 15 »Which of these emails is more appealing to you? @sietsema
- 16. CTA = CallTo Action 16 » We must make it painfully obvious. » Use a button. @sietsema
- 17. 17 “Simplicity is the ultimatesophistication.” - Leonardo da Vinci @sietsema
- 18. 18 EMAIL ON THEGO Email Opens by Device Source: Movable Ink - January 2015 49.5% 16.8% 33.7% @sietsema
- 19. Responsive Email 19 » Hide »Align » Wrap » Expand / Shrink » Replace ! » Design for Mobile First? @sietsema
- 20. More Design Examples 20 »ReallyGoodEmails.com » inspiration.MailChimp.com » HTMLEmailGallery.com ! » Countless ebooks and Pinterest boards @sietsema
- 21. 21 DESIGN WITH EMPATHY DELIVERWITH A HYPOTHESIS @sietsema
- 22. Chris Sietsema » teachtofishdigital.com »@sietsema » 480.570.1636 22