With more than 50% of all emails being opened on mobile devices, it's vital to ensure that your email campaigns are mobile-friendly. In this presentation, Yesmail Interactive highlights the principles behind mobile-responsive and mobile-scalable email design, and how marketers can design bulletproof mobile-friendly email marketing
4. Scalable Email Design
A email layout, that when reduced to half it’s size
(on the phone) 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
Yesmail Confidential 4
9. What is Responsive Email Design?
An email that uses CSS3 @media techniques to
render two different layouts (PC + mobile) depending
on where the email is opened (PC or mobile).
Responsive designs typically:
• Works mainly on iPhone and some Android inboxes (not gmail
app)
• Requires 2 designs, extensive coding
• Does not work in all mobile environments
Yesmail Confidential 9
15. Scalable
Pro Con
✔ Works Everywhere ✗Not “true” mobile design
✔ One design
✔ Easy to code
✔ Readable & Clickable
in both environments
Yesmail Confidential 15
16. Responsive
Pro Con
✔True Mobile-first design ✗Works mainly in iPhone
and some Androids
✗Requires 2 designs
✗Coding is complex
Yesmail Confidential 16
17. Where do they work?
Scalable Responsive
✔ Everywhere 24/7 ✔ iPhone
✔ Android default Inbox
✗ Android Gmail App
✗ Windows Mobile
✗ Blackberry
Yesmail Confidential 17
19. Responsive Design
What can be done?
Change width of email
Resize images
Reformat copy – fonts, colors, sizes, alignment
Turn off images
Turn off copy
Cannot be done:
• Turn on code
Yesmail Confidential 19
20. Responsive Design
How does it work?
Actual CSS Code:
@media only screen and (max-device-width: 480px) {
mobile specific CSS
}
- if your screen width is 480 pixels or less
- then load a different set of styles
Yesmail Confidential 20
24. Responsive Design
What can be done?
• 2 columns to 1
• Image resized
• Font color change
• Button resized
Yesmail Confidential 24
25. Responsive Design
What about iPad & tablets?
- iPad & tablet screens are quite large (768 x 1024)
- For tablets, we recommend the full size version
Yesmail Confidential 25
26. Responsive Design
Performance?
- The jury is still out, it’s still early
- Several responsive campaigns had same
opens and clicks as their running average
- However one campaign saw 12% increase
in click through for mobile openers
- The invite to this webinar saw a 28%
increase in mobile-clicks compared to our
average mobile-click rate
Yesmail Confidential 26
27. Responsive vs. Scalable
Which one do I use?
• BOTH
• Scalable layout that turns responsive
• Follow best practices like large scale, single-
column, HTML-copy, and bulletproof buttons
• Then modify it so it can also be responsive
Yesmail Confidential 27
28. Responsive Design
How do I get my emails responsive?
- Not “automatic”
- Not done by mailing system but by code of html
- Requires that you review / redesign pc version
- The PC design creates the responsive design but
resizing, reformatting and turning items off
Yesmail Confidential 28
29. Summary
• 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
Yesmail Confidential 29
30. Want more guidance?
Check out the accompanying webinar for more
detailed explanations and the Q&A session:
http://www.yesmail.com/resources/webinar/mobile-
email-design-differences-between-responsive-and-
mobile-scalable-email
Yesmail Confidential 30