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
7/25/2019 Mobile Email Design Differences Between Responsive and Mobile Scalable Email Design
31/31
Thanks
Matthew CaldwellVP Creative & Agency Services
Top Related