7/25/2019 Mobile Email Design Differences Between Responsive and Mobile Scalable Email Design

1/31

Mobile Email DesignScalable & Responsive

Matthew CaldwellVP Creative & Agency Services

Jack SattaArt Director

Alyson CouttsSenior Designer

7/25/2019 Mobile Email Design Differences Between Responsive and Mobile Scalable Email Design

2/31

Yesmail Confidential 2

1.

Scalable vs. Responsive Design

2. Which Is Right For You? Pros vs. Cons

3.

Responsive Design In Depth

Comments? Questions?Twitter: #yesmail

Agenda

7/25/2019 Mobile Email Design Differences Between Responsive and Mobile Scalable Email Design

3/31

Scalable Email Design

7/25/2019 Mobile Email Design Differences Between Responsive and Mobile Scalable Email Design

4/31

Yesmail Confidential 4

An email layout, that when reduced to half its size(as on a mobile device) is still 100% readable and

100% finger-tip clickable.

Scalable designs utilize:

A single layout for both large and small screens

A grid system for alignment and proportion

A single-column stacked layout, typically

Large scale design elements:

Font size of 14 points or larger

Big, clickable buttons

What is Scalable Email Design?

7/25/2019 Mobile Email Design Differences Between Responsive and Mobile Scalable Email Design

5/31

Yesmail Confidential 5

Scalable Example 1

7/25/2019 Mobile Email Design Differences Between Responsive and Mobile Scalable Email Design

6/31

Yesmail Confidential 6

Scalable Example 2

7/25/2019 Mobile Email Design Differences Between Responsive and Mobile Scalable Email Design

7/31

Yesmail Confidential 7

Scalable Example 3

7/25/2019 Mobile Email Design Differences Between Responsive and Mobile Scalable Email Design

8/31

Responsive Email Design

7/25/2019 Mobile Email Design Differences Between Responsive and Mobile Scalable Email Design

9/31

Yesmail Confidential 9

An email that uses CSS3 @media techniques torender two different layouts depending on where the

email is opened (PC or mobile device).

Responsive designs typically:

Work mainly on iPhone and some Android inboxes

(not the Gmail app)

Require two designs and extensive coding

Do not work in all mobile environments

What is Responsive Email Design?

7/25/2019 Mobile Email Design Differences Between Responsive and Mobile Scalable Email Design

10/31

Yesmail Confidential 10

Responsive Example 1

7/25/2019 Mobile Email Design Differences Between Responsive and Mobile Scalable Email Design

11/31

Yesmail Confidential 11

Responsive Example 2

7/25/2019 Mobile Email Design Differences Between Responsive and Mobile Scalable Email Design

12/31

Yesmail Confidential 12

Responsive Example 3

7/25/2019 Mobile Email Design Differences Between Responsive and Mobile Scalable Email Design

13/31

Yesmail Confidential 13

Responsive Example 4

7/25/2019 Mobile Email Design Differences Between Responsive and Mobile Scalable Email Design

14/31

Scalable vs. Responsive

Which option is right for you?

7/25/2019 Mobile Email Design Differences Between Responsive and Mobile Scalable Email Design

15/31

Yesmail Confidential 15

Scalable

Pro Con

!Works everywhere "Not true mobile design

!Single design

!Easy to code

!Readable and clickablein both environments

7/25/2019 Mobile Email Design Differences Between Responsive and Mobile Scalable Email Design

16/31

Yesmail Confidential 16

Responsive

Pro Con

!True mobile-first design

"

Works mainly on

iPhone and some Androids

"Requires two designs

"Coding is complex

7/25/2019 Mobile Email Design Differences Between Responsive and Mobile Scalable Email Design

17/31

Yesmail Confidential 17

Where do they work?

Scalable Responsive

!Everywhere !iPhone

!Android inbox (sometimes)

"

Android Gmail app

"Windows Mobile

"Blackberry

7/25/2019 Mobile Email Design Differences Between Responsive and Mobile Scalable Email Design

18/31

Responsive Design In Depth

7/25/2019 Mobile Email Design Differences Between Responsive and Mobile Scalable Email Design

19/31

Yesmail Confidential 19

!

Change width of email

! Resize images

! Reformat copy (fonts, colors, sizes, alignment)

!

Turn off images! Turn off copy

Cannot be done: Turn on code

Responsive Design

What can be done?

7/25/2019 Mobile Email Design Differences Between Responsive and Mobile Scalable Email Design

20/31

Yesmail Confidential 20

Actual CSS Code:

@media only screen and (max-device-width: 480px)

If"

your screen width is 480 pixels or lessThen" load a different set of styles

Responsive Design

How does it work?

7/25/2019 Mobile Email Design Differences Between Responsive and Mobile Scalable Email Design

21/31

Yesmail Confidential 21

Image off and switch

Responsive Design

What can be done?

7/25/2019 Mobile Email Design Differences Between Responsive and Mobile Scalable Email Design

22/31

Yesmail Confidential 22

Navigation: 1 row into 2

Responsive Design

What can be done?

7/25/2019 Mobile Email Design Differences Between Responsive and Mobile Scalable Email Design

23/31

Yesmail Confidential 23

3 columns to 1

Responsive Design

What can be done?

i i

7/25/2019 Mobile Email Design Differences Between Responsive and Mobile Scalable Email Design

24/31

Yesmail Confidential 24

2 columns to 1

Image resized

Font color changed

Button resized

Responsive Design

What can be done?

R i D i

7/25/2019 Mobile Email Design Differences Between Responsive and Mobile Scalable Email Design

25/31

Yesmail Confidential 25

iPad and tablet screens are quite large (768 x 1024) For tablets, we recommend the full size version

Responsive Design

What about iPads and tablets?

R i D i

7/25/2019 Mobile Email Design Differences Between Responsive and Mobile Scalable Email Design

26/31

Yesmail Confidential 26

The jury is still out (its early)Several responsive campaigns had same

opens and clicks as their running average

However one campaign saw 12% increasein click-through for mobile openers

The invite to this webinar saw a 28%

increase in mobile clicks compared to ouraverage mobile click rate

Responsive Design

Performance

R i S l bl

7/25/2019 Mobile Email Design Differences Between Responsive and Mobile Scalable Email Design

27/31

Yesmail Confidential 27

BOTHScalable layout that turns Responsive

Follow best practices like large scale,

single-column, HTML-copy, bulletproofbuttons

Then modify it so it can also be Responsive

Responsive vs Scalable

Which one do I use?

R i D i

7/25/2019 Mobile Email Design Differences Between Responsive and Mobile Scalable Email Design

28/31

Yesmail Confidential 28

Not automatic

Not done by mailing system but by code of HTML

May require that you review/redesign PC version

The PC design creates the responsive design butresizing, reformatting and turning items off

Responsive Design

How do I get my emails responsive?

7/25/2019 Mobile Email Design Differences Between Responsive and Mobile Scalable Email Design

29/31

Yesmail Confidential 29

Scalable and responsive are both good options

Scalable design is easier, but not truly mobile

Responsive is truly mobile, but does not work

everywhere and takes extra time to code Use both! PC version designed to be scalable with

a responsive layout

Responsive = reformat, resize, turn off objects

Your PC layout is closely tied to your responsive

Summary

7/25/2019 Mobile Email Design Differences Between Responsive and Mobile Scalable Email Design

30/31

Questions?

Matthew Caldwell

VP Creative & Agency Services

matt.caldwell@yesmail.com

7/25/2019 Mobile Email Design Differences Between Responsive and Mobile Scalable Email Design

31/31

Thanks

Matthew CaldwellVP Creative & Agency Services

matt.caldwell@yesmail.com