litmus.com
Open in
urlscan Pro
3.210.58.85
Public Scan
URL:
https://litmus.com/community/learning/13-foundations-email-coding-101
Submission: On October 17 via api from US — Scanned from DE
Submission: On October 17 via api from US — Scanned from DE
Form analysis 7 forms found in the DOM
POST /community/learning/13-foundations-email-coding-101/comments
<form class="new-contextual-comment" id="new_comment" action="/community/learning/13-foundations-email-coding-101/comments" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓" autocomplete="off">
<a class="login toggle-sign-in-modal awesome-button green" href="/login">Login to leave a comment</a>
</form><form class="form-inline subscribe" id="sub-form" onsubmit="updateMarketo(this);return false;">
<div class="form-group">
<input type="text" class="form-control email" name="Email" id="ohyku-ohyku" onfocus="if(this.value == 'Your email address') { this.value = ''; }" onblur="if (this.value=='') this.value = 'Your email address'" value="Your email address"
required="">
<input type="submit" value="→" class=" submit">
</div>
</form><form id="mktoForm_1058" style="display: none; font-family: inherit; font-size: 13px; color: rgb(51, 51, 51); width: 1px;" novalidate="novalidate" class="mktoForm mktoHasWidth mktoLayoutLeft">
<style type="text/css"></style>
<div class="mktoFormRow">
<div class="mktoFieldDescriptor mktoFormCol" style="margin-bottom: 5px;">
<div class="mktoOffset" style="width: 5px;"></div>
<div class="mktoFieldWrap"><label for="mapssecurity" id="Lblmapssecurity" class="mktoLabel mktoHasWidth" style="width: 100px;">
<div class="mktoAsterix">*</div>maps-security:
</label>
<div class="mktoGutter mktoHasWidth" style="width: 5px;"></div><input id="mapssecurity" name="mapssecurity" maxlength="255" aria-labelledby="Lblmapssecurity Instructmapssecurity" type="text" class="mktoField mktoTextField mktoHasWidth"
style="width: 150px;"><span id="Instructmapssecurity" tabindex="-1" class="mktoInstruction"></span>
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoFormRow"><input type="hidden" name="UTM_Tracking_Campaign__c" class="mktoField mktoFieldDescriptor mktoFormCol" value="" style="margin-bottom: 5px;">
<div class="mktoClear"></div>
</div>
<div class="mktoFormRow"><input type="hidden" name="UTM_Tracking_Medium__c" class="mktoField mktoFieldDescriptor mktoFormCol" value="" style="margin-bottom: 5px;">
<div class="mktoClear"></div>
</div>
<div class="mktoFormRow"><input type="hidden" name="UTM_Tracking_Source__c" class="mktoField mktoFieldDescriptor mktoFormCol" value="" style="margin-bottom: 5px;">
<div class="mktoClear"></div>
</div>
<div class="mktoFormRow"><input type="hidden" name="UTM_Tracking_Content__c" class="mktoField mktoFieldDescriptor mktoFormCol" value="" style="margin-bottom: 5px;">
<div class="mktoClear"></div>
</div>
<div class="mktoFormRow">
<div class="mktoFieldDescriptor mktoFormCol" style="margin-bottom: 5px;">
<div class="mktoOffset" style="width: 5px;"></div>
<div class="mktoFieldWrap mktoRequiredField"><label for="Email" id="LblEmail" class="mktoLabel mktoHasWidth" style="width: 230px;">
<div class="mktoAsterix">*</div>Email Address:
</label>
<div class="mktoGutter mktoHasWidth" style="width: 5px;"></div><input id="Email" name="Email" maxlength="255" aria-labelledby="LblEmail InstructEmail" type="email" class="mktoField mktoEmailField mktoHasWidth mktoRequired"
aria-required="true" style="width: 150px;"><span id="InstructEmail" tabindex="-1" class="mktoInstruction"></span>
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoFormRow">
<div class="mktoFieldDescriptor mktoFormCol" style="margin-bottom: 5px;">
<div class="mktoOffset" style="width: 5px;"></div>
<div class="mktoFieldWrap"><label for="subscribe_to_litmus_news" id="Lblsubscribe_to_litmus_news" class="mktoLabel mktoHasWidth" style="width: 230px;">
<div class="mktoAsterix">*</div>The Newsletter
</label>
<div class="mktoGutter mktoHasWidth" style="width: 5px;"></div>
<div class="mktoLogicalField mktoCheckboxList mktoHasWidth" style="width: 150px;"><input name="subscribe_to_litmus_news" id="subscribe_to_litmus_news" type="checkbox" value="yes"
aria-labelledby="Lblsubscribe_to_litmus_news Instructsubscribe_to_litmus_news" class="mktoField"><label for="subscribe_to_litmus_news" id="Lblsubscribe_to_litmus_news"></label></div><span id="Instructsubscribe_to_litmus_news"
tabindex="-1" class="mktoInstruction"></span>
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoFormRow">
<div class="mktoFieldDescriptor mktoFormCol" style="margin-bottom: 5px;">
<div class="mktoOffset" style="width: 5px;"></div>
<div class="mktoFieldWrap"><label for="subscribe_to_litmus_weekly" id="Lblsubscribe_to_litmus_weekly" class="mktoLabel mktoHasWidth" style="width: 230px;">
<div class="mktoAsterix">*</div>Litmus Weekly
</label>
<div class="mktoGutter mktoHasWidth" style="width: 5px;"></div>
<div class="mktoLogicalField mktoCheckboxList mktoHasWidth" style="width: 150px;"><input name="subscribe_to_litmus_weekly" id="subscribe_to_litmus_weekly" type="checkbox" value="yes"
aria-labelledby="Lblsubscribe_to_litmus_weekly Instructsubscribe_to_litmus_weekly" class="mktoField"><label for="subscribe_to_litmus_weekly" id="Lblsubscribe_to_litmus_weekly"></label></div><span id="Instructsubscribe_to_litmus_weekly"
tabindex="-1" class="mktoInstruction"></span>
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoFormRow">
<div class="mktoFieldDescriptor mktoFormCol" style="margin-bottom: 5px;">
<div class="mktoOffset" style="width: 5px;"></div>
<div class="mktoFieldWrap"><label for="subscribe_to_product_updates" id="Lblsubscribe_to_product_updates" class="mktoLabel mktoHasWidth" style="width: 230px;">
<div class="mktoAsterix">*</div>Litmus Product Updates
</label>
<div class="mktoGutter mktoHasWidth" style="width: 5px;"></div>
<div class="mktoLogicalField mktoCheckboxList mktoHasWidth" style="width: 150px;"><input name="subscribe_to_product_updates" id="subscribe_to_product_updates" type="checkbox" value="yes"
aria-labelledby="Lblsubscribe_to_product_updates Instructsubscribe_to_product_updates" class="mktoField"><label for="subscribe_to_product_updates" id="Lblsubscribe_to_product_updates"></label></div><span
id="Instructsubscribe_to_product_updates" tabindex="-1" class="mktoInstruction"></span>
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoFormRow">
<div class="mktoFieldDescriptor mktoFormCol" style="margin-bottom: 5px;">
<div class="mktoOffset" style="width: 5px;"></div>
<div class="mktoFieldWrap"><label for="subscribe_to_Litmus_Live" id="Lblsubscribe_to_Litmus_Live" class="mktoLabel mktoHasWidth" style="width: 230px;">
<div class="mktoAsterix">*</div>Virtual & Live Events
</label>
<div class="mktoGutter mktoHasWidth" style="width: 5px;"></div>
<div class="mktoLogicalField mktoCheckboxList mktoHasWidth" style="width: 150px;"><input name="subscribe_to_Litmus_Live" id="subscribe_to_Litmus_Live" type="checkbox" value="yes"
aria-labelledby="Lblsubscribe_to_Litmus_Live Instructsubscribe_to_Litmus_Live" class="mktoField"><label for="subscribe_to_Litmus_Live" id="Lblsubscribe_to_Litmus_Live"></label></div><span id="Instructsubscribe_to_Litmus_Live"
tabindex="-1" class="mktoInstruction"></span>
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoFormRow">
<div class="mktoFieldDescriptor mktoFormCol" style="margin-bottom: 5px;">
<div class="mktoOffset" style="width: 5px;"></div>
<div class="mktoFieldWrap"><label for="subscribe_to_CMO_Newsletter" id="Lblsubscribe_to_CMO_Newsletter" class="mktoLabel mktoHasWidth" style="width: 230px;">
<div class="mktoAsterix">*</div>Leading FWD
</label>
<div class="mktoGutter mktoHasWidth" style="width: 5px;"></div>
<div class="mktoLogicalField mktoCheckboxList mktoHasWidth" style="width: 150px;"><input name="subscribe_to_CMO_Newsletter" id="subscribe_to_CMO_Newsletter" type="checkbox" value="yes"
aria-labelledby="Lblsubscribe_to_CMO_Newsletter Instructsubscribe_to_CMO_Newsletter" class="mktoField"><label for="subscribe_to_CMO_Newsletter" id="Lblsubscribe_to_CMO_Newsletter"></label></div><span
id="Instructsubscribe_to_CMO_Newsletter" tabindex="-1" class="mktoInstruction"></span>
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoFormRow">
<div class="mktoFieldDescriptor mktoFormCol" style="margin-bottom: 5px;">
<div class="mktoOffset" style="width: 5px;"></div>
<div class="mktoFieldWrap"><label for="subscribe_to_Reports_and_Ebooks" id="Lblsubscribe_to_Reports_and_Ebooks" class="mktoLabel mktoHasWidth" style="width: 230px;">
<div class="mktoAsterix">*</div>Reports & Ebooks
</label>
<div class="mktoGutter mktoHasWidth" style="width: 5px;"></div>
<div class="mktoLogicalField mktoCheckboxList mktoHasWidth" style="width: 150px;"><input name="subscribe_to_Reports_and_Ebooks" id="subscribe_to_Reports_and_Ebooks" type="checkbox" value="yes"
aria-labelledby="Lblsubscribe_to_Reports_and_Ebooks Instructsubscribe_to_Reports_and_Ebooks" class="mktoField"><label for="subscribe_to_Reports_and_Ebooks" id="Lblsubscribe_to_Reports_and_Ebooks"></label></div><span
id="Instructsubscribe_to_Reports_and_Ebooks" tabindex="-1" class="mktoInstruction"></span>
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoFormRow">
<div class="mktoFormCol" style="margin-bottom: 5px;">
<div class="mktoOffset mktoHasWidth" style="width: 5px;"></div>
<div class="mktoFieldWrap">
<div class="mktoHtmlText mktoHasWidth" style="width: 475px;">
<p style="font-weight: 400; line-height: 1.4em;">Litmus uses the information you provide us to bring you great content about email marketing trends, stats, events and relevant products and services. You may unsubscribe from these
communications at any time. For more information, check out our <a href="https://www.litmus.com/privacy/" target="_blank">Privacy Policy</a>.</p>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoButtonRow"><span class="mktoButtonWrap mktoNative" style="margin-left: 110px;"><button type="submit" class="mktoButton">Submit</button></span></div><input type="hidden" name="formid" class="mktoField mktoFieldDescriptor"
value="1058"><input type="hidden" name="munchkinId" class="mktoField mktoFieldDescriptor" value="864-VPZ-131">
</form>POST /sessions
<form class="form-horizontal community-sign-in-form" action="/sessions" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓" autocomplete="off">
<div class="modal-header" id="sign-in-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Sign in to Community</h3>
</div>
<div class="modal-body" id="sign-in-body">
<p class="community-modal-errors"></p>
<p>Are you new to Litmus Community?</p>
<a class="btn btn-primary btn-block toggle-modal-form sign-up" href="https://litmus.com/signup/community-plan">Create a Free Litmus Account</a>
<hr>
<p class="desc">Use your existing Litmus login to connect with the world’s most amazing email designers.</p>
<input type="hidden" name="return_to" id="return_to" value="https://litmus.com/community/learning/13-foundations-email-coding-101" class="return-to" autocomplete="off">
<div class="form-group">
<input type="email" name="email" id="email" placeholder="Email Address" class="form-control">
</div>
<div class="form-group">
<input type="password" name="password" id="password" placeholder="Password" class="form-control">
</div>
<input type="submit" name="commit" value="Sign In" class="btn btn-outline btn-block" data-disable-with="Sign In">
<small class="note"> Having trouble signing in? Try <a class="toggle-modal-form forgot-password" href="/password/forgot">Forgot password</a>
</small>
</div>
</form>POST https://litmus.com/signup/community-plan
<form id="sign-up-modal-form" class="form-horizontal hide" action="https://litmus.com/signup/community-plan" accept-charset="UTF-8" method="post" novalidate="novalidate"><input name="utf8" type="hidden" value="✓" autocomplete="off"><input
type="hidden" name="authenticity_token" value="TbiIJ8gzi96NTsiDpBZrotrmzuUj5bk+Z3Dn0x0x0Ew474apCimIEpU2NqawLzAUb9ulorHr0NYhE092DMdxKQ==" autocomplete="off">
<div id="sign-up-form">
<div class="modal-header" id="sign-in-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Sign up to Community</h3>
</div>
<div class="modal-body" id="sign-up-body">
<input type="hidden" name="agree_to_terms" id="agree_to_terms" value="1" autocomplete="off">
<input type="hidden" name="return_to" id="return_to" value="https://litmus.com/community/learning/13-foundations-email-coding-101" class="return-to" autocomplete="off">
<input type="hidden" name="referral_code[code]" id="referral_code_code" autocomplete="off">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="signup_user_first_name">First name</label>
<input type="text" name="signup[user][first_name]" id="signup_user_first_name" placeholder="First Name" class="required form-control">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="signup_user_last_name">Last name</label>
<input type="text" name="signup[user][last_name]" id="signup_user_last_name" placeholder="Last Name" class="required form-control">
</div>
</div>
</div>
<div class="form-group">
<label for="signup_user_email">Email</label>
<input type="email" name="signup[user][email]" id="signup_user_email" placeholder="Email Address" class="required form-control">
</div>
<div class="form-group">
<label for="signup_user_password">Password</label>
<input type="password" name="signup[user][password]" id="signup_user_password" placeholder="Password" class="required form-control">
</div>
<div class="form-group">
<label for="signup_user_password_confirmation">Confirm password</label>
<input type="password" name="signup[user][password_confirmation]" id="signup_user_password_confirmation" placeholder="Retype Password" class="required form-control">
</div>
<div class="form-group">
<small class="note"> Litmus uses the information you provide us to bring you great content about email marketing trends, stats, events and relevant products and services. You may unsubscribe from these communications at any time. For more
information, check out our <a target="_blank" href="https://litmus.com/privacy">Privacy Policy</a>
</small>
</div>
<input type="submit" name="commit" value="Sign Up" class="btn btn-primary btn-block sign-up-button" data-disable-with="Sign Up">
<small class="note"> Already have a Litmus login? <a class="toggle-modal-form sign-in" href="#">Sign in</a>
</small>
</div>
</div>
<div id="sign-up-trial-box" class="hide">
<div class="modal-header" id="sign-in-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Get more out of your Litmus account</h3>
</div>
<div class="modal-body modal-trial-sign-up" id="sign-up-body">
<div class="row">
<div class="col-sm-12">
<p> Your free Community account includes access to the Litmus Community, as well as limited access to Litmus Builder. Check out the entire Litmus Email Creative Platform when you sign up for a free 7-day trial. </p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="feature-card">
<ul>
<li>
<a href="#">Email Previews</a>
<div class="tip">
<p>Get 2,000 screenshots/month in popular email clients, including key international webmail clients, to ensure your emails look great everywhere.</p>
</div>
</li>
<li>
<a href="#">Builder</a>
<div class="tip">
<p>Quickly identify issues pre-send that could impact your deliverability—and get actionable advice for how to fix them.</p>
</div>
</li>
<li>
<a href="#">Checklist</a>
<div class="tip">
<p>Get screenshots in popular email clients to ensure your email looks great everywhere.</p>
</div>
</li>
<li>
<a href="#">Code Editor Integrations</a>
<div class="tip">
<p>Preview and troubleshoot your emails right where you build with seamless integrations between Litmus and any local code editor, like Dreamweaver or Sublime.</p>
</div>
</li>
<li>
<a href="#">ESP Integrations</a>
<div class="tip">
<p>Save time producing and troubleshooting your campaigns with seamless integrations between Litmus and your email service provider (ESP).</p>
</div>
</li>
<li>
<a href="#">Spam Testing</a>
<div class="tip">
<p>Quickly identify issues pre-send that could impact your deliverability—and get actionable advice for how to fix them.</p>
</div>
</li>
<li>
<a href="#">Email Analytics</a>
<div class="tip">
<p>Optimize your campaigns with subscriber-level insights to improve segmentation and targeting strategies.</p>
</div>
</li>
<li>
<a href="#">Private Litmus Teams</a>
<div class="tip">
<p>Get full team visibility. Manage Litmus access and monitor usage across private teams.</p>
</div>
</li>
</ul>
<input type="submit" name="commit" value="Try Litmus free for 7 days" class="btn btn-primary btn-block trial-sign-up-button" data-disable-with="Try Litmus free for 7 days">
</div>
</div>
</div>
<small class="note">
<a class="no-thanks-link" href="#">No thanks, just sign me up without a trial</a>
</small>
</div>
</div><!-- End #sign-up-trial-modal-form -->
</form>POST https://litmus.com/password/forgot
<form id="forgot-password-modal-form" class="form-horizontal hide" action="https://litmus.com/password/forgot" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" autocomplete="off"><input type="hidden"
name="authenticity_token" value="TbiIJ8gzi96NTsiDpBZrotrmzuUj5bk+Z3Dn0x0x0Ew474apCimIEpU2NqawLzAUb9ulorHr0NYhE092DMdxKQ==" autocomplete="off">
<div class="modal-header" id="sign-in-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Forgot password</h3>
</div>
<div class="modal-body" id="forgot-password-body">
<p class="community-modal-notifications"></p>
<div class="form-group">
<p class="desc">Enter your email address to reset your password</p>
<input type="email" name="email" id="email" placeholder="Enter your email" tabindex="1" required="required" class="form-control">
</div>
<script src="https://www.google.com/recaptcha/api.js" async="" defer=""></script>
<div class="g-recaptcha" data-sitekey="6LcNjygTAAAAAKf3uQqit9KwM5QJTsCd0mK1LZ7E">
<div style="width: 304px; height: 78px;">
<div><iframe title="reCAPTCHA"
src="https://www.google.com/recaptcha/api2/anchor?ar=1&k=6LcNjygTAAAAAKf3uQqit9KwM5QJTsCd0mK1LZ7E&co=aHR0cHM6Ly9saXRtdXMuY29tOjQ0Mw..&hl=de&v=vP4jQKq0YJFzU6e21-BGy3GP&size=normal&cb=ex23h4pdzrz5" width="304"
height="78" role="presentation" name="a-chokh43p68q6" frameborder="0" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox"></iframe></div>
<textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid rgb(193, 193, 193); margin: 10px 25px; padding: 0px; resize: none; display: none;"></textarea>
</div><iframe style="display: none;"></iframe>
</div>
<br>
<input type="submit" name="commit" value="Reset my password" class="btn btn-primary btn-block" data-disable-with="Reset my password">
<small class="note"> Already have a Litmus login? <a class="toggle-modal-form sign-in" href="#">Sign in</a>
</small>
</div>
</form><form style="display: none; font-family: inherit; font-size: 13px; color: rgb(51, 51, 51); visibility: hidden; position: absolute; top: -500px; left: -1000px; width: 1600px;" novalidate="novalidate" class="mktoForm mktoHasWidth mktoLayoutLeft">
</form>Text Content
* Features
All Features Email Previews
Builder Checklist Spam Testing Email Analytics Litmus Extension
* Pricing
* Resources
Resources Litmus Conference Convince Your Team Gmail Promotions Builder
* Enterprise
* Community
Discussions Snippets Templates Jobs
* Blog
* Sign In
* Litmus
* Features
* Pricing
* Resources
* Enterprise
* Blog
* Community
* Discussions
* Snippets
* Templates
* Jobs
* My Account
* Sign In
* Community Home
* Discussions
* Learning
* Snippets
* Templates
* Jobs
FOUNDATIONS: EMAIL CODING 101
* Posted by Alan Tippins
EMAIL CODING 101
While coding HTML email uses the same technologies as websites (HTML and CSS),
it requires a very specific set of skills to do well. Many web designers try to
force web standards on email, resulting in campaigns that render horribly across
email clients. To build sturdy emails you need to code like it’s 1999 - using
tables, HTML attributes, and inline styles.
This tutorial will cover those techniques and give you a good foundation for
building future campaigns.
DOCUMENT STRUCTURE
The basis of any good email is a well-structured HTML document. If you haven’t
been writing HTML for long, it can seem confusing. So let’s go over the basics
of every HTML document.
An HTML document consists of a head and body. The head contains information that
describes your document, as well as specific style rules used in your HTML email
(we’ll get to what should go here in just a bit). The body is where the
structure and content of your email is marked up.
Let’s look at a good base HTML document:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Litmus Newsletter</title>
</head>
<body>
...HTML CONTENT HERE…
</body>
</html>
First, you should begin your email with a doctype. A doctype tells email clients
and browsers what type of HTML you are writing and allows you to use tools like
the W3 Validator to check the quality of your HTML. Not every designer includes
a doctype, and many email clients will strip it out, but we recommend using the
XHTML 1.0 Transitional doctype to help your email validate and render reliably
across clients that do use it.
You should also include a Content-Type declaration to tell email clients to use
the UTF-8 Character set. This aides rendering to ensure that your text and any
special characters are properly displayed. Finally, include a title with some
descriptive text about what the email contains. While not vital, a title is a
nice touch for people viewing the web version of the email. In crowded browser
tabs, it will allow users to quickly pick out your email amongst the dozen other
tabs open.
While you could start an email off with just that, there are a few CSS rules
that can help you start your designs out on the right foot. Let’s take a look at
how we can “reset” certain email clients and give your email a consistent base
to build on.
CSS RESETS
CSS resets for email fall into two categories: general resets and
client-specific resets. General resets give all email clients and browsers a
common base to work on. Client-specific resets target some of the quirks
inherent in select email clients.
Let’s look at some general resets that are good to include in your emails. All
of these CSS rules will live in the head of your email and should not be placed
inline when sending a campaign.
<style type="text/css">
/* GENERAL STYLE RESETS */
body, #bodyTable { height:100% !important; width:100% !important; margin:0; padding:0; }
img, a img { border:0; outline:none; text-decoration:none; }
.imageFix { display:block; }
table, td { border-collapse:collapse; }
</style>
The body and #bodyTable rules are there to ensure that clients don’t add any
padding or spaces around your email design and allow you to style your emails
for the entire width of the preview pane. Some webmail clients strip the body
tag out of a message, which is why you should include an ID of bodyTable on the
outermost container table.
Next, it’s a good idea to make sure that images don’t have borders or
text-decorations applied to them, especially when they are wrapped in a link.
There is also a bug in some email clients that adds extra space around images.
We can fix this by using that imageFix class on images and setting their display
to block.
Finally, we take care of email clients adding any extra spacing around tables
and cells by specifying that any borders should be collapsed around tables and
cells.
Now, let’s add to those rules some client-specific CSS to will fix some quirks.
<style type="text/css">
/* GENERAL STYLE RESETS */
body, #bodyTable { height:100% !important; width:100% !important; margin:0; padding:0; }
img, a img { border:0; outline:none; text-decoration:none; }
.imageFix { display:block; }
table, td { border-collapse:collapse; }
/* CLIENT-SPECIFIC RESETS */
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div{line-height:100%;}
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;}
img{-ms-interpolation-mode: bicubic;}
body, table, td, p, a, li, blockquote{-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;}
</style>
The first two lines fix Outlook.com (Hotmail) by targeting classes that the
service adds and allows for full-width emails as well as proper line-heights.
The third line targets Outlook 2007 and above and removes spacing around tables
that Outlook adds, which can break an email design. Next, the img rule uses
Microsoft-specific CSS to correct the way Internet Explorer renders resized
images in emails. Finally, the last rule ensures that both Webkit- and
Windows-based clients don’t automatically resize the text in your email.
With these basic CSS resets, we are now ready to take a look at how to actually
code the structure and content of an email.
USING TABLES
Tables provide the structural foundation of the entire email. Since HTML emails
typically require multiple nested tables, it is important to make sure all of
your tags are closed and tables are properly nested. A good practice is to first
mark up the structure of your tables without any attributes or styles to ensure
that everything is well-formed.
HTML emails really only need to use three tags for tables: table, tr, and td.
While there are other tags for marking up tables, like tbody and th, they should
be avoided as not all email clients support them. At best, they are extraneous
markup; at worst, they are rendering problems waiting to happen. By sticking to
table, tr, and td, our emails will be lean and solid.
An example of a properly structured and nested email layout, devoid of any
styling, is below:
<table>
<tr>
<td>
<table>
<tr>
<td>
HEADER CONTENT
</td>
</tr>
</table>
<table>
<tr>
<td>
<table>
<tr>
<td>
LEFT BODY CONTENT
</td>
</tr>
</table>
<table>
<tr>
<td>
RIGHT BODY CONTENT
</td>
</tr>
</table>
</td>
</tr>
</table>
<table>
<tr>
<td>
FOOTER CONTENT
</td>
</tr>
</table>
</td>
</tr>
</table>
You’ll notice that the entire email is wrapped in a containing table (which is
where you should add that #bodyTable ID). This is used for full width and height
emails when body tags are stripped. It is also useful for applying basic styles
to the email and centering your content in the viewport.
Once you have a properly structured table-based layout, you need to properly
size and style everything using HTML attributes and inline CSS.
ATTRIBUTES AND INLINE STYLES
Using attributes and inline styles keeps your design robust. Since a few email
clients either don’t properly render styles in the head or strip the head from
the email outright, attributes and inline styles ensure that your design will be
displayed in all clients.
You should use the width, height, border, cellpadding, and cellspacing HTML
attributes to structure your tables. An example of a 600 pixel wide table nested
inside of a full-width container table is below.
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td align="center" valign="top">
...EMAIL CONTENT...
</td>
</tr>
</table>
</td>
</tr>
</table>
Notice that the align and valign HTML attributes are also used. These provide a
quick way to align tables and cells, and are used for some responsive email
techniques.
CSS padding also works well across clients for helping to structure and space
your layouts. Since support varies for things like margin, float, and position,
you should stick to the HTML attributes and properties above for structure.
When it comes to styling the content of your emails, there are a few attributes
and properties that are widely supported.
Many email designs call for background colors to be applied. There are two
methods of accomplishing this: using the bgcolor HTML attribute or the
background-color CSS property. To ensure the best support, it’s actually a good
idea to use both in your emails.
<table bgcolor="#eaeaea" style="background-color:#eaeaea;">
When declaring colors for anything, you also want to use the full hexadecimal
code since some clients have trouble parsing hex shorthand like #f00.
When styling your text, there are a few things to keep in mind.
First, you will want to use a font stack that works across devices and email
clients. While you can use less popular system fonts or even web fonts with the
@font-face property, they are not widely supported. An example sans-serif font
stack using both uncommon and widely-supported fonts as a fallback looks
something like this:
<span style="color:#222222; font-size:18px; font-family:Avenir, Helvetica, Arial, Verdana, sans-serif;">Copy goes here</span>
Second, there are a few gotchas when it comes to styling hyperlinks. Like with
browsers, email clients will apply their own default style to links that are not
specifically styled within your email. This can lead to some ugly links in an
otherwise beautifully designed campaign.
To account for this, you will want to apply your inline styles both the the
actual a tag as well as a span surrounding the text of the link, like so:
<a href="http://litmus.com" style="color:#222222; text-decoration:none;"><span style="color:#222222; text-decoration:none;">Learn More About Litmus</span></a>
Apple devices, like the iPhone and iPad, pose their own problems with links.
Mail for iOS has the habit of styling links and anything that looks like an
address or telephone blue. We recommend wrapping any offending text or links in
a span with a class like .appleLink and using CSS to override Apple’s styling,
like so:
<span class="appleLink">888-888-8888</span>
In the head of your email:
<style type="text/css">
.appleLink a { color:#222222 !important; text-decoration:none !important; }
</style>
These guidelines should allow you to reliably structure and style the copy in
your emails, but what about adding images?
ADDING IMAGES
Most email campaigns require the use of images - to convey information, to
entice interaction, or to simply add some style to an otherwise boring design.
Whatever their purpose, there are a number of guidelines you should follow when
adding images to an email design to ensure that they display correctly across
email clients.
Many designers reference images using relative paths when developing their
campaigns on their local machine. While this is perfect for a quick development
process, using relative paths simply doesn’t work for a production email.
Absolute paths are required to make sure your images are properly displayed.
Some email clients have trouble parsing the correct size of an image if it is
not explicitly declared in your code. Therefore, along with an absolute path to
the image, you will want to define the width and height of an image when adding
it to your design. A good base image tag is shown below:
<img src="http://assets.company.com/header.jpg" width="600" height="200" />
The big issue with images in email is that many email clients will disable
images by default. The best way to account for this challenge is to use alt-text
in your image tag so that, at the very least (in clients that support alt-text),
you can provide your readers with some context for the missing images.
<img src="...path to image..." class="img-max" alt="eat your own dog food" border="0" width="500" height="287" />
While you could stop here and feel comfortable that you gave your users some
information, it’s easy to enhance the experience of having images disabled by
styling your alt-text. Adding some inline styles to the above image will yield
some cool results.
<img src="...path to image..." class="img-max" alt="eat your own dog food" style="display: block; font-family: Arial; color: #ffffff; font-size: 28px;" border="0" width="500" height="287" />
There is a lot you can do with styled alt-text. Check out our tutorial on the
subject for more information on techniques and compatibility across email
clients.
Finally, it’s a good idea to always link your images to a landing page. Users
are used to images also being hyperlinks on the web, and breaking common
patterns like this is a recipe for a frustrating user experience. Nothing
special is required when wrapping images with links, just a simple a tag will
do:
<a href="url"><img src="http://assets.company.com/header.jpg" width="600" height="200" alt="2014 Product Updates" style="color:#222222; font-size:24px; font-family:Helvetica, Arial, Verdana, sans-serif; font-weight:bold; background-color:#eaeaea;" /></a>
Linked images provide a great way for users to interact with your images, but
nothing beats the classic call-to-action: the button.
BULLETPROOF BUTTONS
Traditionally, email designers relied on images for their buttons. Images
provided a way for them to design beautiful and enticing buttons. Unfortunately,
with email clients disabling images, calls to action were lost and engagement
was threatened.
Enter Campaign Monitor’s Stig Morten Myre, who popularized a technique known as
bulletproof buttons. Stig relied on styling buttons out of HTML and using
Microsoft’s VML code to provide a fallback for Outlook.
An example of bulletproof button code:
<div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://litmus.com" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="50%" strokecolor="#1caeba" fillcolor="#2bcae3">
<w:anchorlock/>
<center style="color:#147e94;font-family:sans-serif;font-size:13px;font-weight:bold;">Killer Buttons</center>
</v:roundrect>
<![endif]--><a href="http://litmus.com"
style="background-color:#2bcae3;border:1px solid #1caeba;border-radius:20px;color:#147e94;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;">Killer Buttons</a></div>
It looks complicated (and can be, depending on how advanced your buttons get),
but Campaign Monitor has an excellent tool for generating bulletproof buttons.
At Litmus, we have been using an even more stripped down version of a
bulletproof button that relies solely on styled HTML for the button.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" style="padding: 25px 0 0 0;" class="padding2" colspan="2">
<table border="0" cellspacing="0" cellpadding="0" class="responsive-table">
<tr>
<td bgcolor="#d75742" style="padding: 12px 18px 12px 18px; -webkit-border-radius:3px; border-radius:3px" align="center">
<a href="url" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none;">Learn More →</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
Whichever method you choose, bulletproof buttons are increasingly the best way
to provide users with gorgeous calls to action that render across clients even
when images are disabled.
USING CSS3
With more users opening emails on mobile devices with excellent support for HTML
and CSS, using CSS3 is becoming a viable option for email designers to embellish
their designs.
CSS3 is a great way to add things like text shadows and rounded corners to
elements of your email without relying on images. CSS3 properties can be used
inline like any other style.
<span style="font-size:24px; font-family:Arial; color:#0080FF; text-shadow:1px 1px 4px #000000;">Text Shadows!</span>
Using the bulletproof buttons example above, you can see how we use the CSS3
border-radius property to give our buttons a nice design touch:
<td bgcolor="#d75742" style="padding: 12px 18px 12px 18px; -webkit-border-radius:3px; border-radius:3px" align="center">...BUTTON COPY...</td>
Support across clients varies for CSS3. Mobile clients, which have a huge and
growing user-base, typically have the best support for CSS3 properties. Apple
Mail on the desktop also has great support, even when it comes to things like
CSS3 animations!
If you need your design elements to render an a wide variety of clients,
especially older desktop clients, then you may still want to stick to non-CSS3
techniques or use images. But, if you have a large mobile audience or can get
away with CSS3, go for it! Just test and see what works for your audience.
SUMMARY
Hopefully this article provided you with a basic overview of what is required
when coding HTML emails. While there are a number of alternative techniques for
coding emails, these are the ones we have found to work the most reliably across
email clients.
Once you have a good handle on these techniques, we encourage you to experiment
with more advanced techniques like using SVG, animations, and web fonts in email
as well as making your emails responsive. Future articles will cover all of
these topics in-depth, but for now, you can use some of the links below to get
more information.
FURTHER READING
Infographic: Email Coding 101
MailChimp: Development
The Ultimate Guide to Styled ALT Text
Campaign Monitor Guides
Bulletproof Button Generator
* BZ
Brian Zoro said:
The example img tag has "px" after the width and height values. It should
just be a number value for the width and height attributes, unless I'm
mistaken.
Edit | Delete
* JD
Joris Debonnet said:
You're not mistaken! That's fixed now.
Edit | Delete
Login to leave a comment
COMPANY
* Team
* Customers
* Careers
* Contact
* Brand
PRODUCT
* Features
* Pricing
* Enterprise
* Extension
TOOLS
* Events
* Labs
* Scope
* Resources
HELP
* Knowledgebase
* Status
* Community
* Trust
SUBSCRIBE TO OUR EMAILS
*
maps-security:
*
Email Address:
*
The Newsletter
*
Litmus Weekly
*
Litmus Product Updates
*
Virtual & Live Events
*
Leading FWD
*
Reports & Ebooks
Litmus uses the information you provide us to bring you great content about
email marketing trends, stats, events and relevant products and services. You
may unsubscribe from these communications at any time. For more information,
check out our Privacy Policy.
Submit
--------------------------------------------------------------------------------
Copyright © Litmus Software, Inc. 2005-2022. 675 Massachusetts Ave., 11th Floor,
Cambridge, MA 02139. View our Terms of Service or Privacy Policy. Send us a note
to hello@litmus.com or give us a call at +1 (866) 787-7030
*
*
*
×
SIGN IN TO COMMUNITY
Are you new to Litmus Community?
Create a Free Litmus Account
--------------------------------------------------------------------------------
Use your existing Litmus login to connect with the world’s most amazing email
designers.
Having trouble signing in? Try Forgot password
JOIN THE LITMUS COMMUNITY
×
×
SIGN UP TO COMMUNITY
First name
Last name
Email
Password
Confirm password
Litmus uses the information you provide us to bring you great content about
email marketing trends, stats, events and relevant products and services. You
may unsubscribe from these communications at any time. For more information,
check out our Privacy Policy
Already have a Litmus login? Sign in
×
GET MORE OUT OF YOUR LITMUS ACCOUNT
Your free Community account includes access to the Litmus Community, as well as
limited access to Litmus Builder. Check out the entire Litmus Email Creative
Platform when you sign up for a free 7-day trial.
* Email Previews
Get 2,000 screenshots/month in popular email clients, including key
international webmail clients, to ensure your emails look great everywhere.
* Builder
Quickly identify issues pre-send that could impact your deliverability—and
get actionable advice for how to fix them.
* Checklist
Get screenshots in popular email clients to ensure your email looks great
everywhere.
* Code Editor Integrations
Preview and troubleshoot your emails right where you build with seamless
integrations between Litmus and any local code editor, like Dreamweaver or
Sublime.
* ESP Integrations
Save time producing and troubleshooting your campaigns with seamless
integrations between Litmus and your email service provider (ESP).
* Spam Testing
Quickly identify issues pre-send that could impact your deliverability—and
get actionable advice for how to fix them.
* Email Analytics
Optimize your campaigns with subscriber-level insights to improve
segmentation and targeting strategies.
* Private Litmus Teams
Get full team visibility. Manage Litmus access and monitor usage across
private teams.
No thanks, just sign me up without a trial
×
FORGOT PASSWORD
Enter your email address to reset your password
Already have a Litmus login? Sign in
By clicking “Accept All Cookies”, you agree to the storing of cookies on your
device to enhance site navigation, analyze site usage, and assist in our
marketing efforts. Clicking "Reject All" may prevent you from using the site
normally.
Cookies Settings Reject All Accept All Cookies
PRIVACY PREFERENCE CENTER
When you visit any website, it may store or retrieve information on your
browser, mostly in the form of cookies. This information might be about you,
your preferences or your device and is mostly used to make the site work as you
expect it to. The information does not usually directly identify you, but it can
give you a more personalized web experience. Because we respect your right to
privacy, you can choose not to allow some types of cookies. Click on the
different category headings to find out more and change our default settings.
However, blocking some types of cookies may impact your experience of the site
and the services we are able to offer.
Cookie Policy
Allow All
MANAGE CONSENT PREFERENCES
STRICTLY NECESSARY COOKIES
Always Active
These cookies are necessary for the website to function and cannot be switched
off in our systems. They are usually only set in response to actions made by you
which amount to a request for services, such as setting your privacy
preferences, logging in or filling in forms. You can set your browser to block
or alert you about these cookies, but some parts of the site will not then work.
These cookies do not store any personally identifiable information.
FUNCTIONAL COOKIES
Functional Cookies
These cookies enable the website to provide enhanced functionality and
personalisation. They may be set by us or by third party providers whose
services we have added to our pages. If you do not allow these cookies then some
or all of these services may not function properly.
PERFORMANCE COOKIES
Performance Cookies
These cookies allow us to count visits and traffic sources so we can measure and
improve the performance of our site. They help us to know which pages are the
most and least popular and see how visitors move around the site. All
information these cookies collect is aggregated and therefore anonymous. If you
do not allow these cookies we will not know when you have visited our site, and
will not be able to monitor its performance.
TARGETING COOKIES
Targeting Cookies
These cookies may be set through our site by our advertising partners. They may
be used by those companies to build a profile of your interests and show you
relevant adverts on other sites. They do not store directly personal
information, but are based on uniquely identifying your browser and internet
device. If you do not allow these cookies, you will experience less targeted
advertising.
Back Button
PERFORMANCE COOKIES
Search Icon
Filter Icon
Clear
checkbox label label
Apply Cancel
Consent Leg.Interest
checkbox label label
checkbox label label
checkbox label label
Reject All Confirm My Choices