INTRODUCTION
An overlooked career option in the world wide web is email development. A possible reason that email development is overlooked could be because it has remained stubborn in its ways. Email development has not followed along with the changes that have occurred in web development. While the world wide web has flourished with the advent and evolution of JavaScript, email development is supported almost exclusively by HTML. One of the main hurdles email developers face is creating an HTML structure and CSS styling that caters to numerous email clients. CSS can play an important role in email development, but HTML functions as the necessary foundation. While email development hasn’t followed the evolutionary arc of web applications, many frameworks exist to make a developer’s job less tedious. There are also a variety of testing options available to ensure html emails are functional for the multitude of email clients available.
JAVASCRIPT
Unfortunately, JavaScript doesn’t play a role in email development. Email clients do no support JavaScript. Developers have the option of using Accelerated Mobile Pages (AMP) which allows the incorporation of JavaScript, but it comes with limited email client support. Email developers must construct their emails with HTML and CSS.
EMAIL CLIENTS
In order to create an effective email campaign, developers must gain an understanding of what type of email client their audience uses. There are many email clients that each render HTML and CSS differently. Campaign Monitor shows that Gmail and the iPhone account for over 50% of email clients used. Data according to Litmus shows that nearly 50% of these email clients are accessed through mobile.
IMAGES
When implementing images, developers must exercise caution. Some email clients disable images so developers have to be careful when choosing how much of the email will feature an image. If developers choose to use images, relative references should be avoided. This means that a developer should not store images in a folder and use that as a source for the images. Images should have absolute references. This means the image should be hosted somewhere on the web, and the full link to the image should be used. As with web development, it is best practice to have an alt tag describing the image.
CSS
CSS plays in integral role in email development. Like images, developers must be careful when implementing CSS. Not all browsers support HTML5 and CSS3. Developers must be conscious of which tags and stylings are used as not all email clients may be able to render the email properly. Additionally, some email clients strip the head section of an HTML document so media query and styling placed in the head will not render. As the head section of an HTML email is not reliable, it is best practice to use inline CSS.
HTML TABLES
The star of the show for email development is HTML. However; email development follows a very specific path: tables. The reason email development can be tedious is because the structure of an HTML email is composed of nested tables. Litmus suggests to only use three tags for tables: table, tr, and td. Tables in HTML are intuitive broken down into rows and columns. The <tr> tag signifies table rows, and the <td> tag signifies table cells which function as columns.
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td style="padding: 0 24px;">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td style="width:138;">1</td>
<td style="width:138;">2</td>
<td style="width:138;">3</td>
<td style="width:138;">4</td>
</tr>
</table>
</td>
</tr>
</table>The code above produces a one row with four columns. The table can become very confusing for a developer new to HTML tables. Attention to detail is very important as it is very easy to miss a closing tag.
FRAMEWORKS
Although email development hasn’t evolved along with web development, many frameworks exist to simplify the development process. An article by Vitaly Friedman categorizes frameworks into various groups. There are frameworks that function as markup languages. There are frameworks based on different CSS tools such as Tailwind. There are frameworks that simply offer a boilerplate leaving much of the power in the developer’s hands. Whichever option a developer chooses, email frameworks exist to make the development process less tedious.
MJML
MJML (Mailjet Markup Language) takes the crown as the most popular email framework based on github stars according to an article by Andriy Zapisotskui. Reading the MJML documentation, MJML is described as a markup language designed to create responsive emails. Developers using MJML do not need to create html table tags. Instead, developers use tags such as <mj-body>, <mj-section>, and <mj-column>. The MJML documentation provides excellent documentation on unique inline stylings available to each tag. There is also an <mj-head> tag which can contain more CSS styling.
<mjml>
<mj-head>
<mj-attributes>
<mj-text padding="0" />
<mj-class name="blue" color="blue" />
<mj-class name="big" font-size="20px" />
<mj-all font-family="Arial" />
</mj-attributes>
</mj-head>
<mj-body>
<mj-section>
<mj-column>
<mj-text mj-class="blue big">
Hello World!
</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>MJML will take the above code and produce a separate HTML file after running some command line inputs. The HTML equivalent of the code above is shown below.
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>
</title>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#outlook a {
padding: 0;
}
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
p {
display: block;
margin: 13px 0;
}
</style>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.mj-outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<style type="text/css">
@media only screen and (min-width:480px) {
.mj-column-per-100 {
width: 100% !important;
max-width: 100%;
}
}
</style>
<style media="screen and (min-width:480px)">
.moz-text-html .mj-column-per-100 {
width: 100% !important;
max-width: 100%;
}
</style>
<style type="text/css">
</style>
<style type="text/css">
</style>
</head>
<body style="word-spacing:normal;">
<div style="">
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:0;word-break:break-word;">
<div style="font-family:Arial;font-size:20px;line-height:1;text-align:left;color:blue;">Hello World!</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</div>
</body>
</html>
If necessary, the above output HTML can be adjusted before testing and sending.
FOUNDATION
Another framework that functions as a markup language is Foundation. Foundation uses a markup language called Inky. Like MJML, Foundation implements unique tags which are later converted into HTML when the markup is complete and the email is ready for production. Foundation uses <wrapper>, <container>, <row>, and <columns> tags. Foundation isn’t as simple to use as MJML. A few extra steps on the command line and the use of a layout page are differences that make Foundation slightly more difficult to learn. A developer will construct and design an HTML in the ‘template’ folder which will be transferred into the body section of the HTML file in the ‘layout’ folder.
---
subject: My Basic Email Template Subject
---
<wrapper class="header">
<container>
<row class="collapse">
<columns small="6">
<img src="http://placehold.it/200x50/663399">
</columns>
<columns small="6">
<p class="text-right">BASIC</p>
</columns>
</row>
</container>
</wrapper>
<container>
<spacer size="16"></spacer>
<row>
<columns small="12">
<h1>Hi, Susan Calvin</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, iste, amet consequatur a veniam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut optio nulla et, fugiat. Maiores accusantium nostrum asperiores provident, quam modi ex inventore dolores id aspernatur architecto odio minima perferendis, explicabo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima quos quasi itaque beatae natus fugit provident delectus, magnam laudantium odio corrupti sit quam. Optio aut ut repudiandae velit distinctio asperiores?</p>
<callout class="primary">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit repellendus natus, sint ea optio dignissimos asperiores inventore a molestiae dolorum placeat repellat excepturi mollitia ducimus unde doloremque ad, alias eos!</p>
</callout>
</columns>
</row>
<wrapper class="secondary">
<spacer size="16"></spacer>
<row>
<columns large="6">
<h5>Connect With Us:</h5>
<button class="facebook expand" href="http://zurb.com">Facebook</button>
<button class="twitter expand" href="http://zurb.com">Twitter</button>
<button class="google expand" href="http://zurb.com">Google+</button>
</columns>
<columns large="6">
<h5>Contact Info:</h5>
<p>Phone: 408-341-0600</p>
<p>Email: <a href="mailto:foundation@zurb.com">foundation@zurb.com</a></p>
</columns>
</row>
</wrapper>
</container>
Shown above is the structure of the HTML file in the ‘template’ folder.
{{!-- This is the base layout for your project, and will be used on every page. --}}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="{{root}}css/app.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<title>{{subject}}</title>
<!-- <style> -->
</head>
<body>
<span class="preheader">{{description}}</span>
<table class="body">
<tr>
<td class="center" align="center" valign="top">
<center>
{{> body}}
</center>
</td>
</tr>
</table>
<!-- prevent Gmail on iOS font size manipulation -->
<div style="display:none; white-space:nowrap; font:15px courier; line-height:0;"> </div>
</body>
</html>Shown above is the HTML file in the ‘layout’ folder. The contents of the HTML file in the ‘template’ folder will be placed in the center body section.
MAIZZLE
Maizzle is a framework that is defined by its incorporation of TailwindCSS. Unlike MJML and Foundation, Maizzle does not have a markup language. The Maizzle documentation describes the framework as one that gives the developer complete control. With MJML and Foundation, developers are met with certain limitations as the markup language has styling rules applied that require extra work to work around. Maizzle gives complete control to the developer as the developer has to create the table structure rather than rely on a markup language. An inexperienced email developer will find learning both Tailwind and table structuring quite challenging. For this reason, Maizzle is more suitable for the developer who is both experienced in Tailwind and email development. Like Foundation, a template file is structured and styled to eventually be placed within a layout file that renders the final product.
---
title: "Confirm your email address"
preheader: "Please confirm your email address in order to activate your account"
bodyClass: bg-slate-50
---
<extends src="src/layouts/main.html">
<block name="template">
<table class="w-full font-sans">
<tr>
<td align="center" class="bg-slate-50">
<table class="w-150 sm:w-full">
<tr>
<td class="p-12 sm:py-8 sm:px-6 text-center">
<a href="https://maizzle.com">
<img src="images/maizzle.png" width="70" alt="Maizzle" class="max-w-full align-middle [border:0]">
</a>
</td>
</tr>
<tr>
<td align="center" class="sm:px-6">
<table class="w-full">
<tr>
<td class="p-12 sm:px-6 bg-white text-slate-700 text-base text-left leading-6 rounded shadow-sm">
<p>
Hello,
</p>
<p class="text-2xl sm:leading-8 text-black font-semibold m-0 mb-6">
Is it you we're looking for?
</p>
<p class="m-0 mb-6">
Please confirm your email address by clicking the button below:
</p>
<div class="leading-full">
<a
href="https://example.com"
class="inline-block py-3.5 px-4 rounded text-base font-semibold text-center [text-decoration:none] text-white bg-indigo-700 hover:bg-indigo-500"
>
<outlook>
<i class="tracking-6 -mso-font-width-full mso-text-raise-7.5"> </i>
</outlook>
<span class="mso-text-raise-4">Confirm email address →</span>
<outlook>
<i class="tracking-6 -mso-font-width-full"> </i>
</outlook>
</a>
</div>
<table class="w-full" role="separator">
<tr>
<td class="py-8">
<div class="bg-slate-200 h-px leading-px">‌</div>
</td>
</tr>
</table>
<p class="m-0 mb-4">
If you didn't sign up for Maizzle, you can safely ignore this email.
</p>
<p class="m-0 mb-4">
Thanks, <br />The Maizzle Team
</p>
</td>
</tr>
<tr role="separator">
<td class="h-12"></td>
</tr>
<tr>
<td class="text-center text-slate-600 text-xs px-6">
<p class="m-0 mb-4 uppercase">
Powered by Maizzle
</p>
<p class="m-0 italic">
The framework for rapid email prototyping
</p>
<p class="cursor-default">
<a href="https://maizzle.com/docs/" class="text-indigo-700 [text-decoration:none] hover:[text-decoration:underline]">Docs</a>
•
<a href="https://github.com/maizzle" class="text-indigo-700 [text-decoration:none] hover:[text-decoration:underline]">Github</a>
•
<a href="https://twitter.com/maizzlejs" class="text-indigo-700 [text-decoration:none] hover:[text-decoration:underline]">Twitter</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</block>
</extends>
Above is the template file which the developer structures and styles.
<!DOCTYPE {{{ page.doctype || 'html' }}}>
<html lang="{{ page.language || 'en' }}" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta charset="{{ page.charset || 'utf-8' }}">
<meta name="x-apple-disable-message-reformatting">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings xmlns:o="urn:schemas-microsoft-com:office:office">
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<style>
td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family: "Segoe UI", sans-serif; mso-line-height-rule: exactly;}
</style>
<![endif]-->
<if condition="page.title">
<title>{{{ page.title }}}</title>
</if>
<style>
{{{ page.css }}}
</style>
<block name="head"></block>
</head>
<body class="m-0 p-0 w-full [word-break:break-word] [-webkit-font-smoothing:antialiased] {{ page.bodyClass || '' }}">
<if condition="page.preheader">
<div class="hidden">
{{{ page.preheader }}}
<each loop="item in Array.from(Array(150))">͏ </each>
</div>
</if>
<div role="article" aria-roledescription="email" aria-label="{{{ page.title || '' }}}" lang="{{ page.language || 'en' }}">
<block name="template"></block>
</div>
</body>
</html>Above is the layout file which is the final product that is used to build the production file.
ACORN
Acorn is an email framework that provides a boilerplate in the form of a basic html table structure which is meant to be built upon. In the documentation, Acorn is described as a golden ratio typography grid, responsive email framework. Because Acorn doesn’t incorporate a markup language and provides components with example builds, it can be used as a learning tool for new developers. Jumping straight into a markup language email framework can hinder new email developers from truly understanding how to structure an HTML email. Acorn provides building blocks, but it also forces new developers to truly understand how to construct an html email.
<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="x-apple-disable-message-reformatting">
<title>Acorn Email Framework</title>
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<style>
table {border-collapse: collapse;}
.spacer,.divider {mso-line-height-rule: exactly;}
td,th,div,p,a {font-size: 16px; line-height: 25px;}
td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family:"Segoe UI",Helvetica,Arial,sans-serif;}
</style>
<![endif]-->
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
img {border: 0; line-height: 100%; vertical-align: middle;}
.col {font-size: 16px; line-height: 25px; vertical-align: top;}
@media screen {
.col, td, th, div, p {font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;}
.sans-serif {font-family: 'Open Sans', Arial, sans-serif;}
.serif {font-family: 'Merriweather', Georgia, serif;}
img {max-width: 100%;}
}
@media (max-width: 632px) {
.container {width: 100%!important;}
}
@media (max-width: 480px) {
.col {
display: inline-block!important;
line-height: 23px;
width: 100%!important;
}
.col-sm-1 {max-width: 25%;}
.col-sm-2 {max-width: 50%;}
.col-sm-3 {max-width: 75%;}
.col-sm-third {max-width: 33.33333%;}
.col-sm-push-1 {margin-left: 25%;}
.col-sm-push-2 {margin-left: 50%;}
.col-sm-push-3 {margin-left: 75%;}
.col-sm-push-third {margin-left: 33.33333%;}
.full-width-sm {display: table!important; width: 100%!important;}
.stack-sm-first {display: table-header-group!important;}
.stack-sm-last {display: table-footer-group!important;}
.stack-sm-top {display: table-caption!important; max-width: 100%; padding-left: 0!important;}
.toggle-content {
max-height: 0;
overflow: auto;
transition: max-height .4s linear;
-webkit-transition: max-height .4s linear;
}
.toggle-trigger:hover + .toggle-content,
.toggle-content:hover {max-height: 999px!important;}
.show-sm {
display: inherit!important;
font-size: inherit!important;
line-height: inherit!important;
max-height: none!important;
}
.hide-sm {display: none!important;}
.align-sm-center {
display: table!important;
float: none;
margin-left: auto!important;
margin-right: auto!important;
}
.align-sm-left {float: left;}
.align-sm-right {float: right;}
.text-sm-center {text-align: center!important;}
.text-sm-left {text-align: left!important;}
.text-sm-right {text-align: right!important;}
.borderless-sm {border: none!important;}
.nav-sm-vertical .nav-item {display: block;}
.nav-sm-vertical .nav-item a {display: inline-block; padding: 4px 0!important;}
.spacer {height: 0;}
.p-sm-0 {padding: 0!important;}
.p-sm-8 {padding: 8px!important;}
.p-sm-16 {padding: 16px!important;}
.p-sm-24 {padding: 24px!important;}
.pt-sm-0 {padding-top: 0!important;}
.pt-sm-8 {padding-top: 8px!important;}
.pt-sm-16 {padding-top: 16px!important;}
.pt-sm-24 {padding-top: 24px!important;}
.pr-sm-0 {padding-right: 0!important;}
.pr-sm-8 {padding-right: 8px!important;}
.pr-sm-16 {padding-right: 16px!important;}
.pr-sm-24 {padding-right: 24px!important;}
.pb-sm-0 {padding-bottom: 0!important;}
.pb-sm-8 {padding-bottom: 8px!important;}
.pb-sm-16 {padding-bottom: 16px!important;}
.pb-sm-24 {padding-bottom: 24px!important;}
.pl-sm-0 {padding-left: 0!important;}
.pl-sm-8 {padding-left: 8px!important;}
.pl-sm-16 {padding-left: 16px!important;}
.pl-sm-24 {padding-left: 24px!important;}
.px-sm-0 {padding-right: 0!important; padding-left: 0!important;}
.px-sm-8 {padding-right: 8px!important; padding-left: 8px!important;}
.px-sm-16 {padding-right: 16px!important; padding-left: 16px!important;}
.px-sm-24 {padding-right: 24px!important; padding-left: 24px!important;}
.py-sm-0 {padding-top: 0!important; padding-bottom: 0!important;}
.py-sm-8 {padding-top: 8px!important; padding-bottom: 8px!important;}
.py-sm-16 {padding-top: 16px!important; padding-bottom: 16px!important;}
.py-sm-24 {padding-top: 24px!important; padding-bottom: 24px!important;}
}
</style>
</head>
<body style="margin:0;padding:0;width:100%;word-break:break-word;-webkit-font-smoothing:antialiased;">
<div lang="en" style="display:none;"><!-- Add your preheader text here --></div>
<table lang="en" bgcolor="#EEEEEE" cellpadding="16" cellspacing="0" role="presentation" width="100%">
<tr>
<td align="center">
<table class="container" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" role="presentation" width="600">
<tr>
<td align="left">
<!-- ADD ROWS HERE -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>Above is an example of boilerplate code that is provided.
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td style="padding: 0 24px;">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="col" width="184">1</td>
<td class="col" width="184">2</td>
<td class="col" width="184">3</td>
</tr>
</table>
</td>
</tr>
</table>Above is an example of a row with three columns which can be placed within the boilerplate.
TESTING AND SENDING
Before sending out the finished product, the final step is to test the email. When developing websites, developers often design and test the website for different screen sizes. The handy website caniuse also informs developers which browsers support the tools incorporated in projects. However, email developers need more specific information. Simply testing on the browser is not enough. Email developers need to know how the final product looks on various email clients. There are many paid services available that email developers can use. Litmus and Email on Acid are two popular email testing tools. Both services test emails on different email clients, a necessary final step before sending emails. After testing, services such as Mailchimp and Mailgun help in sending out a large amount of emails.
CONCLUSION
Emails are widely used by all industries. Though web development has evolved greatly over the years, email developers are forced to exist in the past. Despite the lack of evolution, email development vastly improves upon using text only emails. Mastery of email development produces beautiful and engaging content. While JavaScript is left behind, HTML and CSS work together to bring marketing ideas to life. The challenge that an email developer faces is catering to the needs of various email clients. With a wide variety of frameworks and testing tools available, email developers have much room for creativity. Email development is a worthwhile and rewarding skill that is easy to learn but requires time and experience to master.