Email design

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?

51% mobilelitmus.com

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/