Embed Size (px)
Citation preview
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?
AOL Mail
Apple Mail 5
Apple Mail 6
Gmail
Lotus Notes 8.5
Lotus Notes 8
Lotus Notes 7
Lotus Notes 6.5
Thunderbird
Outlook 2013
Outlook 2011 for Mac
Outlook 2010
Outlook 2007
Outlook 2003
Outlook 2002/XP
Outlook 2000
Outlook.com
Yahoo!
So many clients for testing.
What is Email Design?
Android 2.3 & 4.0
iPhone 5 iOS 6
iPhone 4S iOS 6
iPad 2 iOS 6
iPhone 5 iOS 7
iPhone 4S iOS 7
iPad 2 iOS 7
BlackBerry Text & HTML
Symbian S60
Windows Phone 7.5
OS X
Windows XP
Windows 7
Windows 8
So many devices for testing.
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?
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/
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
Georgia
Verdana
Helvetica, Arial
Times New Roman
Impact
Tahoma, Geneva
Trebuchet MS
Web safe fonts
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 to increase the size slightly.
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.
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-the-mobile-only-us/
Places for email design inspiration:http://www.campaignmonitor.com/guides/design/inspiration/
