0
Email Design
Fundamentals
By Randy Oest
What We Will Cover
1. What is Email Design?
2. Where are Email Read?
3. How to Design Email
What is Email Design?

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

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

This process is
challenging.
What is Email Design?
So many clients for testing.
AOL Mail

Lotus Notes 7

Outlook 2007

Apple Mail 5

Lotus Notes
6.5

O...
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...
What is Email Design?
Each has its own rendering
quirks, so we are challenged
to design to the lowest
common denominator.
Where are Email Read?

51% mobile
litmus.com
Where are Email Read?

31% of Americans
use mobile as their
primary method of
accessing the Internet.
Many are mobile-only...
Which is 

Easier to Read?
How to Design Email

Let’s get
into the
nitty-gritty.
How to Design Email
Images should be used
for illustration and
decoration as often as
you can.
How to Design Email
Using images for
typesetting creates a
problem when the user
isn’t shown the images.
Images
This email
uses images
for all the
text.
Images
Many email
clients don’t
show
images.
Images

This email
mixes text
and images.
Images
So a lot of
the text is
readable
without
images.
Images
Using
only 

a
header
image.
How to Design Email

Let’s talk about fonts.
How to Design Email
For email, we are limited
to Web safe fonts.
These are fonts that are
generally on every
computer.
How to Design Email
Web safe fonts
Georgia

Impact

Verdana

Tahoma,
Geneva

Helvetica, Arial
Times New
Roman

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

What size should the
email be?
How to Design Email

600px wide for desktop
320px* wide for mobile
How to Design Email
Responsive layouts are
about three things
1.

Stacking

2.

Font size

3.

Images
How to Design Email
Stacking
How to Design Email
For fonts in responsive
emails, consider the size of
the font in both views.
For mobile, you may want ...
How to Design Email
When including images in a
responsive email, note that
the same image will display in
both views.
So b...
Links
List of email client features: 

http://www.campaignmonitor.com/css/
The Rise of the Mobile Only User:

http://blogs...
Email design
Upcoming SlideShare
Loading in...5
×

Email design

376

Published on

Slideshow for a talk that I presented to the Williams Randall design team on email design.

Published in: Design, Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
376
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Email design"

  1. 1. Email Design Fundamentals By Randy Oest
  2. 2. What We Will Cover 1. What is Email Design? 2. Where are Email Read? 3. How to Design Email
  3. 3. What is Email Design? Email was built for written communications.
  4. 4. What is Email Design? Email has evolved to allow styling and images.
  5. 5. What is Email Design? Email design is the process by which we use color, typography, and images to enhance a message.
  6. 6. What is Email Design? This process is challenging.
  7. 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. 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. 9. What is Email Design? Each has its own rendering quirks, so we are challenged to design to the lowest common denominator.
  10. 10. Where are Email Read? 51% mobile litmus.com
  11. 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. 12. Which is 
 Easier to Read?
  13. 13. How to Design Email Let’s get into the nitty-gritty.
  14. 14. How to Design Email Images should be used for illustration and decoration as often as you can.
  15. 15. How to Design Email Using images for typesetting creates a problem when the user isn’t shown the images.
  16. 16. Images This email uses images for all the text.
  17. 17. Images Many email clients don’t show images.
  18. 18. Images This email mixes text and images.
  19. 19. Images So a lot of the text is readable without images.
  20. 20. Images Using only 
 a header image.
  21. 21. How to Design Email Let’s talk about fonts.
  22. 22. How to Design Email For email, we are limited to Web safe fonts. These are fonts that are generally on every computer.
  23. 23. How to Design Email Web safe fonts Georgia Impact Verdana Tahoma, Geneva Helvetica, Arial Times New Roman Trebuchet MS
  24. 24. How to Design Email When designing using live text, you cannot have a background image behind the text.
  25. 25. How to Design Email What size should the email be?
  26. 26. How to Design Email 600px wide for desktop 320px* wide for mobile
  27. 27. How to Design Email Responsive layouts are about three things 1. Stacking 2. Font size 3. Images
  28. 28. How to Design Email Stacking
  29. 29. 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.
  30. 30. 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.
  31. 31. 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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×