Email Responsive Design

1. About Me
Currently l am working as a software
developer in a startup - Zendrive. I am
very passionate about Web
development, Data structures,
problem solving and algorithms. I also
love to share knowledge.
ABHINAV SHARMA

2. About Zendrive
Zendrive measures driver safety using
smartphone sensors: the accelerometer,
gyroscope, and GPS. This is done by measuring
a wide variety of driving behaviors including
speeding, hard braking, sharp accelerations,
driver phone use, and more.
Zendrive analyzes this behavior and returns
actionable insights, including notifications of
collisions, risk analysis, and a guide to coach
drivers for sustained improvement. Zendrive’s
partners use this to offer new features to their
customers.

3. 3
THE OFT-IGNORED ART OF EMAIL DESIGN

4. 4
EMAIL CLIENTS MARKET SHARE

5. 5
CHALLENGES IN EMAIL DESIGN
We need to be compatible with lots of email clients.
Examples:
1. Gmail does not support style tags in head section. All the styles need to
be inlined.
2. Outlook does not work well with div based layouts and tables need to
be used.

6. <span class="preheader" style="color:#ededed;display:none!important;font-size:1px;line-height:1px;max-height:0;max-width:0;mso-
hide:all!important;opacity:0;overflow:hidden;visibility:hidden"></span>
<table class="body" style="Margin:0;background:#ededed;border-collapse:collapse;border-spacing:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-
weight:400;height:100%;line-height:1.3;margin:0;padding:0;text-align:left;vertical-align:top;width:100%">
<tr style="padding:0;text-align:left;vertical-align:top">
<td class="center" align="center" valign="top" style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-
family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;hyphens:auto;line-height:1.3;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word">
<center data-parsed style="min-width:580px;width:100%">
<table align="center" class="container float-center" style="Margin:0 auto;background:#ededed;border-collapse:collapse;border-spacing:0;float:none;margin:0 auto;padding:0;text-
align:center;vertical-align:top;width:580px">
<tbody>
<tr style="padding:0;text-align:left;vertical-align:top">
<td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-
weight:400;hyphens:auto;line-height:1.3;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word">
<table class="spacer"style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
<tbody>
And the structure continues ….(only approx25% structure is shown here)
6
TABLE BASED DESIGN

7. Before Inlining
<div class="large ">
</div>
.large {
width: 20px;
}
.primary {
color: blue;
} 7
INLINING EXAMPLE
After Inlining
<div class="large primary" style="color:
blue; width: 20px;">
</div>

8. 8
CONSIDERATIONS TO SOLVE THE PROBLEM
● Our team of front-end developers should love to work with it.
● The setup should support reusability.
● The setup should give developers the ability to implement pixel-
perfect designs.

9. Use a BoilerPlate template
● Developer should be aware of quirks
of email formatting.
● Need to manage own set of tools for
inlining styles etc.
9
APPROACHES
Use a framework
● Lot of emails with shared components
● Ideal for pixel-perfect designs.

10. FOUNDATION
● Pre-built templates
● Support for reusability like partials
etc for common footer and header
● Foundation has support to generate a
scaffold
10
FRAMEWORKS
MJML
● Pre-built components
● Reusability is supported through
custom components
● Does not come with a structured set
of folders for content

11. Foundation
<container>
<row>
<columns>
<center>
<button class="large" href="{{ password_reset_link
}}">
Reset Your Password
</button>
</center>
</columns>
</row>
</container>
MJML
<mjml>
<mj-body>
<mj-section>
<mj-column>
<mj-image width="100px" src="/assets/img/logo-small.png"></mj-
image>
<mj-text align="center">
Please click below to reset password
</mj-text>
<mj-divider border-color="#F45E43"></mj-divider>
<mj-button font-family="Helvetica" background-color="#f45e43"
color="white">
Reset Password
</mj-button>
</mj-column>
</mj-section>
</mj-body> 11
EXAMPLES

12. 1) Install foundation-cli using npm
1) Run foundation new --framework <folder name> :
a) The generated folder has following structure of src folder:
Assets : Sass and image files
Layouts: Boilerplate html that wraps emails
Pages: Html files for emails
Partials: Reusable chunks of html that can be injected into
pages
12
SETUP

13. npm start
This will kick off the build process, which includes HTML parsing, Sass, image compression, and a
server.
npm run build
Single command (npm run build) will generate the required templates. This will also do Inlining.
13
DEVELOPMENT

14. 14
PROCESS FLOW

15. <container>
<row>
<columns>
<center>
<button class="large" href="{{ password_reset_link
}}">
Reset Your Password
</button>
</center>
</columns>
</row>
</container>
15
COMPARISON OF HTML STRUCTURE FOR SAMPLE
<span class="preheader" style="color:#ededed;display:none!important;font-size:1px;line-height:1px;max-
height:0;max-width:0;mso-hide:all!important;opacity:0;overflow:hidden;visibility:hidden"></span>
<table class="body" style="Margin:0;background:#ededed;border-collapse:collapse;border-
spacing:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-
weight:400;height:100%;line-height:1.3;margin:0;padding:0;text-align:left;vertical-
align:top;width:100%">
<tr style="padding:0;text-align:left;vertical-align:top">
<td class="center" align="center" valign="top" style="-moz-hyphens:auto;-webkit-
hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-
family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;hyphens:auto;line-
height:1.3;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word">
<center data-parsed style="min-width:580px;width:100%">
<table align="center" class="container float-center" style="Margin:0
auto;background:#ededed;border-collapse:collapse;border-spacing:0;float:none;margin:0
auto;padding:0;text-align:center;vertical-align:top;width:580px">
<tbody>
<tr style="padding:0;text-align:left;vertical-align:top">
<td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-
collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-
weight:400;hyphens:auto;line-height:1.3;margin:0;padding:0;text-align:left;vertical-align:top;word-
wrap:break-word">
<table class="spacer" style="border-collapse:collapse;border-spacing:0;padding:0;text-
align:left;vertical-align:top;width:100%">
<tbody>
And the structure continues ….(only approx 25% structure is shown here)

16. 16
RENDERED EMAIL

17. 17
WHAT’S IN FUTURE ?
Accelerated Mobile Pages

18. 18
FEATURES OF AMP
Increased in-mail capabilities Safe and secure Consistency and scalability
● Always up to date content
● Dynamic and interactive
● AMP content is sent along-
side conventional email
content to support other
email clients
● Designed to prevent
malwares and
phishing
● Domain verification
is a must and emails
are TLS encrypted

19. 19
AMP EXAMPLES: GOOGLE DOCS NOTIFICATION

20. Feedback and Questions
Linkedin:
https://www.linkedin.com/in/abhinav-sharma-
0425854b/
Github:
https://github.com/sharmaabhinav
Medium Blog:
https://medium.com/zendrive-tech/the-oft-
ignored-art-of-email-design-704441aeb9a0
Email:
abhinavsharmambm@gmail.com