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

1. Email Design Primer
What Designers Need to Know
about the Email Medium

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
WHY IS EMAIL DIFFERENT?
Various Email Clients
Multiple Screen Sizes
Limited Interaction Time
Defined Restrictions
@sietsema

4. Look at All the 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 not getting
enough email.
I’d really like more.”
- No One. Ever.
@sietsema

7. 7

8. Start with the Finish 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 for Fonts in Email
16pt
1.5 LINE HEIGHT
BLACK TEXT
* Provide a back-up that is web-safe
*
@sietsema

14. Image Blocking in Email
14 @sietsema

15. Images & Spacing
15
» Which of these
emails is more
appealing to you?
@sietsema

16. CTA = Call To Action
16
» We must make it painfully
obvious.
» Use a button.
@sietsema

17. 17
“Simplicity is the
ultimate sophistication.”
- Leonardo da Vinci
@sietsema

18. 18
EMAIL ON THE GO
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
DELIVER WITH
A HYPOTHESIS
@sietsema

22. Chris Sietsema
» teachtofishdigital.com
» @sietsema
» 480.570.1636
22