The document discusses email design fundamentals. It covers what email design is, which is using color, typography and images to enhance messages. It notes email is challenging to design for due to the many email clients and devices it must be viewed on. It provides tips on email design such as using images sparingly, limiting fonts to web safe ones, making emails responsive for mobile and ensuring text remains readable without images.

1. Email Design
Fundamentals
By Randy Oest

2. What We Will Cover
1. What is Email Design?
2. Where are Email Read?
3. How to Design Email

3. What is Email Design?
Email was built for
written communications.

4. What is Email Design?
Email has evolved to
allow styling and images.

5. What is Email Design?
Email design is the
process by which we use
color, typography, and
images to enhance a
message.

6. What is Email Design?
This process is
challenging.

7. What is Email Design?
So many clients for testing.
AOL Mail
Lotus Notes 7
Outlook 2007
Apple Mail 5
Lotus Notes
6.5
Outlook 2003
Apple Mail 6
Gmail
Lotus Notes
8.5
Lotus Notes 8
Thunderbird
Outlook 2002/
XP
Outlook 2013
Outlook 2000
Outlook 2011
for Mac
Outlook.com
Outlook 2010
Yahoo!

8. What is Email Design?
So many devices for testing.
Android 2.3 &
4.0
iPad 2 iOS 7
Windows XP
iPhone 5 iOS 6
BlackBerry Text
& HTML
Windows 7
iPhone 4S iOS 6
Symbian S60
iPad 2 iOS 6
Windows Phone
7.5
iPhone 5 iOS 7
iPhone 4S iOS 7
OS X
Windows 8

9. What is Email Design?
Each has its own rendering
quirks, so we are challenged
to design to the lowest
common denominator.

10. Where are Email Read?
51% mobile
litmus.com

11. Where are Email Read?
31% of Americans
use mobile as their
primary method of
accessing the Internet.
Many are mobile-only.
http://blogs.hbr.org/2013/05/the-rise-of-the-mobile-only-us/

12. Which is
Easier to Read?

13. How to Design Email
Let’s get
into the
nitty-gritty.

14. How to Design Email
Images should be used
for illustration and
decoration as often as
you can.

15. How to Design Email
Using images for
typesetting creates a
problem when the user
isn’t shown the images.

16. Images
This email
uses images
for all the
text.

17. Images
Many email
clients don’t
show
images.

18. Images
This email
mixes text
and images.

19. Images
So a lot of
the text is
readable
without
images.

20. Images
Using
only
a
header
image.

21. How to Design Email
Let’s talk about fonts.

22. How to Design Email
For email, we are limited
to Web safe fonts.
These are fonts that are
generally on every
computer.

23. How to Design Email
Web safe fonts
Georgia
Impact
Verdana
Tahoma,
Geneva
Helvetica, Arial
Times New
Roman
Trebuchet MS

24. How to Design Email
When designing using
live text, you cannot have
a background image
behind the text.

26. How to Design Email
What size should the
email be?

27. How to Design Email
600px wide for desktop
320px* wide for mobile

28. How to Design Email
Responsive layouts are
about three things
1.
Stacking
2.
Font size
3.
Images

29. How to Design Email
Stacking

30. How to Design Email
For fonts in responsive
emails, consider the size of
the font in both views.
For mobile, you may want to
increase the size slightly.

31. How to Design Email
When including images in a
responsive email, note that
the same image will display in
both views.
So be careful with extremely
short but wide images.

32. Links
List of email client features:
http://www.campaignmonitor.com/css/
The Rise of the Mobile Only User:
http://blogs.hbr.org/2013/05/the-rise-of-themobile-only-us/
Places for email design inspiration:
http://www.campaignmonitor.com/guides/design/
inspiration/