litmus.com
Open in
urlscan Pro
52.2.49.58
Public Scan
URL:
https://litmus.com/community/learning/24-how-to-code-a-responsive-email-from-scratch
Submission: On December 07 via api from US — Scanned from DE
Submission: On December 07 via api from US — Scanned from DE
Form analysis 7 forms found in the DOM
POST /community/learning/24-how-to-code-a-responsive-email-from-scratch/comments
<form class="new-contextual-comment" id="new_comment" action="/community/learning/24-how-to-code-a-responsive-email-from-scratch/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/24-how-to-code-a-responsive-email-from-scratch" 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="aJ/G5gqI1IP+QW0d/Y1dV8kz6DlcABz4bzH6RvcYUkbtmkj2aDa82LtgSQag97ukkRTOwVCyNrMouwNdH1vDxg==" 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/24-how-to-code-a-responsive-email-from-scratch" 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="aJ/G5gqI1IP+QW0d/Y1dV8kz6DlcABz4bzH6RvcYUkbtmkj2aDa82LtgSQag97ukkRTOwVCyNrMouwNdH1vDxg==" 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=Km9gKuG06He-isPsP6saG8cn&size=normal&cb=tyktxpiggc02" width="304"
height="78" role="presentation" name="a-lhqojpvtisuz" 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
HOW TO CODE A RESPONSIVE EMAIL FROM SCRATCH
* Posted by Alex Ilhan
WHAT WE'RE GOING TO BE BUILDING
In this tutorial I'm going to be showing you how I built my free template
Crowder. See how it looks below.
The template features:
* Mobile responsiveness
* Web fonts
* Background images inside table cells
Note Everyone's email workflow is different. You may prefer to code or work in a
different way and that's entirely fine!
--------------------------------------------------------------------------------
PREPARING THE DESIGN
Before you even open your text editor you should prepare the design you're
working from. I like to map out where I'm going to slice up the design (see
below) using the Photoshop guidelines. This serves two purposes; firstly, I can
see where and how I'm going to slice the images, secondly, I can almost mentally
prepare for the build. My mind is already ticking and I'm picturing the table
structure in my head.
--------------------------------------------------------------------------------
PREPARING YOUR HTML DOCUMENT
I have a skeleton saved out, handily called Skeleton! This is the absolute
skeleton of an email build. I like to start from scratch a lot to keep my code
clean and succint. If you don't already have one of these I encourage you to
save it out. Here is mine, we'll break it down after
<!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"/>
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
<title>Page title</title>
<style type="text/css">
@media screen and (max-width: 630px) {
}
</style>
</head>
<body style="padding:0; margin:0">
<table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0" width="100%">
<tr>
<td align="center" valign="top">
</td>
</tr>
</table>
</body>
</html>
Lets break it down!
Here we're setting the DOCTYPE for the document. I see a lot of chat about what
to use for this but this is mine, if it 'aint broke don't fix it!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Next up, setting the content type and viewport. The following meta tags help
ensure random number strings aren't transformed into phone links, and the EDGE
meta tag will ensure Windows Phone 8 compatability.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
Putting the Skeleton in place for the CSS we'll be adding in later:
<style type="text/css">
@media screen and (max-width: 630px) {
}
</style>
And finally, the container table ready to rock
<body style="padding:0; margin:0">
<table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0" width="100%">
<tr>
<td align="center" valign="top">
</td>
</tr>
</table>
</body>
--------------------------------------------------------------------------------
FLESHING OUT THE HEAD
This a boring step but one that is absolutely required. We're going to be adding
some important stuff.
First off, I'll be adding my client fixes. Not much to talk about here, these
fix a few small bugs and quirks across different email clients. We add these
inside our <style></style> tags in the head section.
/* Some resets and issue fixes */
#outlook a { padding:0; }
body{ width:100% !important; -webkit-text; size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; }
.ReadMsgBody { width: 100%; }
.ExternalClass {width:100%;}
.backgroundTable {margin:0 auto; padding:0; width:100%;!important;}
table td {border-collapse: collapse;}
.ExternalClass * {line-height: 115%;}
/* End reset */
Next up, since in this email we're using web fonts. We'll need import these like
so
@import url(http://fonts.googleapis.com/css?family=Roboto:300); /*Calling our web font*/
*Notice the commenting I'm adding, this is very important for code management. *
Web fonts have decent support but it's worth picking a font that has a similar
fallback for clients that won't pick it up. I am using Roboto that falls back to
Arial. We'll see more about this later.
Finally, I add my media queries that never change and I use across all emails.
I'll break these down one by one.
This is how we force our table cells to stack on mobile.
/* Display block allows us to stack elements */
*[class="mobile-column"] {display: block;}
Again, this is for stacking.
/* Some more stacking elements */
*[class="mob-column"] {float: none !important;width: 100% !important;}
This bit allows us to hide stuff on mobile.
/* Hide stuff */
*[class="hide"] {display:none !important;}
And this is our force to 100% width.
/* This sets elements to 100% width and fixes the height issues too, a god send */
*[class="100p"] {width:100% !important; height:auto !important;}
This is for when columns stack but need to have spacing underneath
/* For the 2x2 stack */
*[class="condensed"] {padding-bottom:40px !important; display: block;}
This forces content to be center aligned on mobile, useful for keeping a reading
pattern.
/* Centers content on mobile */
*[class="center"] {text-align:center !important; width:100% !important; height:auto !important;}
This is our 100% width force, again, with padding around it.
/* 100percent width section with 20px padding */
*[class="100pad"] {width:100% !important; padding:20px;}
Same as above but only padding to the left and right.
/* 100percent width section with 20px padding left & right */
*[class="100padleftright"] {width:100% !important; padding:0 20px 0 20px;}
And again, but top and bottom.
/* 100percent width section with 20px padding top & bottom */
*[class="100padtopbottom"] {width:100% !important; padding:20px 0px 20px 0px;}
SUMMARY
So, we've added a lot of stuff. This is what your <style> </style> tags should
look like now:
<style>
@import url(http://fonts.googleapis.com/css?family=Roboto:300); /*Calling our web font*/
/* Some resets and issue fixes */
#outlook a { padding:0; }
body{ width:100% !important; -webkit-text; size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; }
.ReadMsgBody { width: 100%; }
.ExternalClass {width:100%;}
.backgroundTable {margin:0 auto; padding:0; width:100%;!important;}
table td {border-collapse: collapse;}
.ExternalClass * {line-height: 115%;}
/* End reset */
/* These are our tablet/medium screen media queries */
@media screen and (max-width: 630px){
/* Display block allows us to stack elements */
*[class="mobile-column"] {display: block;}
/* Some more stacking elements */
*[class="mob-column"] {float: none !important;width: 100% !important;}
/* Hide stuff */
*[class="hide"] {display:none !important;}
/* This sets elements to 100% width and fixes the height issues too, a god send */
*[class="100p"] {width:100% !important; height:auto !important;}
/* For the 2x2 stack */
*[class="condensed"] {padding-bottom:40px !important; display: block;}
/* Centers content on mobile */
*[class="center"] {text-align:center !important; width:100% !important; height:auto !important;}
/* 100percent width section with 20px padding */
*[class="100pad"] {width:100% !important; padding:20px;}
/* 100percent width section with 20px padding left & right */
*[class="100padleftright"] {width:100% !important; padding:0 20px 0 20px;}
/* 100percent width section with 20px padding top & bottom */
*[class="100padtopbottom"] {width:100% !important; padding:20px 0px 20px 0px;}
}
</style>
BUILDING THE HERO SECTION
We're going to work our way down the email, starting with the hero section:
I'm going to dive right in and show you the whole code at once, we'll break it
down bit by bit after. It's not as daunting as it looks!
<table width="640" cellspacing="0" cellpadding="0" bgcolor="#" class="100p">
<tr>
<td background="images/header-bg.jpg" bgcolor="#3b464e" width="640" valign="top" class="100p">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;">
<v:fill type="tile" src="images/header-bg.jpg" color="#3b464e" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<table width="640" border="0" cellspacing="0" cellpadding="20" class="100p">
<tr>
<td valign="top">
<table border="0" cellspacing="0" cellpadding="0" width="600" class="100p">
<tr>
<td align="left" width="50%" class="100p"><img src="images/logo.png" alt="Logo" border="0" style="display:block" /></td>
<td width="50%" class="hide" align="right" style="font-size:16px; color:#FFFFFF;"><font face="'Roboto', Arial, sans-serif"><a href="#" style="color:#FFFFFF; text-decoration:none;">HOME</a> | <a href="#" style="color:#FFFFFF; text-decoration:none;">HOME</a> | <a href="#" style="color:#FFFFFF; text-decoration:none;">HOME</a></font></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="600" class="100p">
<tr>
<td height="35"></td>
</tr>
<tr>
<td align="center" style="color:#FFFFFF; font-size:24px;">
<font face="'Roboto', Arial, sans-serif">
<span style="font-size:44px;">Introducing Crowder</span><br />
<br />
<Span style="font-size:24px;">Your ultimate crowd<br />
sourcing solution</Span>
<br /><br />
<table border="0" cellspacing="0" cellpadding="10" style="border:2px solid #FFFFFF;">
<tr>
<td align="center" style="color:#FFFFFF; font-size:16px;"><font face="'Roboto', Arial, sans-serif"><a href="##" style="color:#FFFFFF; text-decoration:none;">FIND OUT MORE</a></font></td>
</tr>
</table>
</font>
</td>
</tr>
<tr>
<td height="35"></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
Lets get into it! Here is our opening of the table:
<table width="640" cellspacing="0" cellpadding="0" bgcolor="#" class="100p">
<tr>
<td background="images/header-bg.jpg" bgcolor="#3b464e" width="640" valign="top" class="100p">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;">
<v:fill type="tile" src="images/header-bg.jpg" color="#3b464e" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
The first bit is easy, a table that's 640 pixels wide. It has a class of 100p
which, as we touched on earlier, forces it to 100% width on smaller screens:
<table width="640" cellspacing="0" cellpadding="0" bgcolor="#" class="100p">
<tr>
The next bit is a bit more tricky. This is controlling the background image. As
we know, the beast that is Outlook doesn't support background images. But, have
no fear! The VML hack is here!
<td background="images/header-bg.jpg" bgcolor="#3b464e" width="640" valign="top" class="100p">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;">
<v:fill type="tile" src="images/header-bg.jpg" color="#3b464e" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
Now we've got the container for the hero set up we should get the content table
in.
Here is the code. Don't get too scared, we'll break it down.
<table width="640" border="0" cellspacing="0" cellpadding="20" class="100p">
<tr>
<td valign="top">
<table border="0" cellspacing="0" cellpadding="0" width="600" class="100p">
<tr>
<td align="left" width="50%" class="100p"><img src="images/logo.png" alt="Logo" border="0" style="display:block" /></td>
<td width="50%" class="hide" align="right" style="font-size:16px; color:#FFFFFF;"><font face="'Roboto', Arial, sans-serif"><a href="#" style="color:#FFFFFF; text-decoration:none;">HOME</a> | <a href="#" style="color:#FFFFFF; text-decoration:none;">HOME</a> | <a href="#" style="color:#FFFFFF; text-decoration:none;">HOME</a></font></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="600" class="100p">
<tr>
<td height="35"></td>
</tr>
<tr>
<td align="center" style="color:#FFFFFF; font-size:24px;">
<font face="'Roboto', Arial, sans-serif">
<span style="font-size:44px;">Introducing Crowder</span><br />
<br />
<Span style="font-size:24px;">Your ultimate crowd<br />
sourcing solution</Span>
<br /><br />
<table border="0" cellspacing="0" cellpadding="10" style="border:2px solid #FFFFFF;">
<tr>
<td align="center" style="color:#FFFFFF; font-size:16px;"><font face="'Roboto', Arial, sans-serif"><a href="##" style="color:#FFFFFF; text-decoration:none;">FIND OUT MORE</a></font></td>
</tr>
</table>
</font>
</td>
</tr>
<tr>
<td height="35"></td>
</tr>
</table>
</td>
</tr>
</table>
Lets start with logo and nav section:
<table border="0" cellspacing="0" cellpadding="0" width="600" class="100p">
<tr>
<td align="left" width="50%" class="100p"><img src="images/logo.png" alt="Logo" border="0" style="display:block" /></td>
<td width="50%" class="hide" align="right" style="font-size:16px; color:#FFFFFF;"><font face="'Roboto', Arial, sans-serif"><a href="#" style="color:#FFFFFF; text-decoration:none;">HOME</a> | <a href="#" style="color:#FFFFFF; text-decoration:none;">HOME</a> | <a href="#" style="color:#FFFFFF; text-decoration:none;">HOME</a></font></td>
</tr>
</table>
And in smaller amounts
Here is our logo table cell. We have it at 50% width table cell that blows up to
100% width on smaller screens
<td align="left" width="50%" class="100p"><img src="images/logo.png" alt="Logo" border="0" style="display:block" /></td>
And our navigation is below. You may notice the inclusion of the horrible font
tags. This is so Outlook will display our web font fallbacks. I also hide the
nav on mobile.
<td width="50%" class="hide" align="right" style="font-size:16px; color:#FFFFFF;"><font face="'Roboto', Arial, sans-serif"><a href="#" style="color:#FFFFFF; text-decoration:none;">HOME</a> | <a href="#" style="color:#FFFFFF; text-decoration:none;">HOME</a> | <a href="#" style="color:#FFFFFF; text-decoration:none;">HOME</a></font></td>
Awesome! We have our Logo and Nav set up! Now, lets move onto the Heading,
subheading and CTA.
Again, here is all the code in one go. And again, we'll break it down
<table border="0" cellspacing="0" cellpadding="0" width="600" class="100p">
<tr>
<td height="35"></td>
</tr>
<tr>
<td align="center" style="color:#FFFFFF; font-size:24px;">
<font face="'Roboto', Arial, sans-serif">
<span style="font-size:44px;">Introducing Crowder</span><br />
<br />
<Span style="font-size:24px;">Your ultimate crowd<br />
sourcing solution</Span>
<br /><br />
<table border="0" cellspacing="0" cellpadding="10" style="border:2px solid #FFFFFF;">
<tr>
<td align="center" style="color:#FFFFFF; font-size:16px;"><font face="'Roboto', Arial, sans-serif"><a href="##" style="color:#FFFFFF; text-decoration:none;">FIND OUT MORE</a></font></td>
</tr>
</table>
</font>
</td>
</tr>
<tr>
<td height="35"></td>
</tr>
</table>
Mostly it's just spacing, so we're going to focus on this section:
<td align="center" style="color:#FFFFFF; font-size:24px;">
<font face="'Roboto', Arial, sans-serif">
<span style="font-size:44px;">Introducing Crowder</span><br />
<br />
<Span style="font-size:24px;">Your ultimate crowd<br />
sourcing solution</Span>
<br /><br />
<table border="0" cellspacing="0" cellpadding="10" style="border:2px solid #FFFFFF;">
<tr>
<td align="center" style="color:#FFFFFF; font-size:16px;"><font face="'Roboto', Arial, sans-serif"><a href="##" style="color:#FFFFFF; text-decoration:none;">FIND OUT MORE</a></font></td>
</tr>
</table>
</font>
</td>
You'll notice the <font face="'Roboto', Arial, sans-serif"> from earlier for the
Outlook fallbacks.
Lets take a peek at the CTA:
<table border="0" cellspacing="0" cellpadding="10" style="border:2px solid #FFFFFF;">
<tr>
<td align="center" style="color:#FFFFFF; font-size:16px;"><font face="'Roboto', Arial, sans-serif"><a href="##" style="color:#FFFFFF; text-decoration:none;">FIND OUT MORE</a></font></td>
</tr>
</table>
We've added a border to the table that surroundes the CTA to give it a bit of
style. The cellpadding="10" gives us a bit of space between the text and the
border.
Inside the table. The horrible <font face="'Roboto', Arial, sans-serif"> is
back. Don't worry - it's neccessary!
Nice, we've just finished up the hero section! Lets take a look at mobile and
desktop side by side!
Lets move on...
--------------------------------------------------------------------------------
BUILDING THE ICON SECTION
Now we're going to be building this section
We're going to be sperating the blue bar away from the icon grid for the sake of
ease.
Lets start with the blue bar:
<table width="640" border="0" cellspacing="0" cellpadding="20" bgcolor="#2a8e9d" class="100p">
<tr>
<td align="center" style="font-size:24px; color:#FFFFFF;"><font face="'Roboto', Arial, sans-serif">Why Crowder?</font></td>
</tr>
</table>
We have a 640 pixel table that's forced into 100% on smaller screens. The
cellpadding="20" gives us an easy way of adding 20 pixels padding around all
sides of it that remains consistent across devices. Inside the table we have the
return of the <font>.
I have to warn you, we're about to go intp Tableception. Tables within tables
with tables within tables within tables. Here's all the code. Don't freak out,
we'll disect it now!
<table width="640" border="0" cellspacing="0" cellpadding="20" class="100p" bgcolor="#FFFFFF">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="100padtopbottom" width="600">
<tr>
<td align="left" class="condensed" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mob-column" width="290">
<tr>
<td valign="top" align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" align="center" class="100padleftright">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="135" align="center"><a href="#"><img src="images/icon-1.png" border="0" style="display:block;"/></a></td>
<td width="20"></td>
<td width="135" align="center"><a href="#"><img src="images/icon-1.png" border="0" style="display:block;"/></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td valign="top" class="100padleftright" align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="135" align="center" style="font-size:16px; color:#2a8e9d;"><font face="'Roboto', Arial, sans-serif">Customise your user messages</font></td>
<td width="20"></td>
<td valign="top" width="135" align="center" style="font-size:16px; color:#2a8e9d;"><font face="'Roboto', Arial, sans-serif">100% unique privacy options</font></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="20" class="hide"></td>
<td align="left" class="condensed" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mob-column" width="290">
<tr>
<td valign="top" align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" align="center" class="100padleftright">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="135" align="center"><a href="#"><img src="images/icon-1.png" border="0" style="display:block;"/></a></td>
<td width="20"></td>
<td width="135" align="center"><a href="#"><img src="images/icon-1.png" border="0" style="display:block;"/></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
* NM
Nicole Merlin said:
Yep, XHTML 1.0 Transitional 4EVER!
Edit | Delete
* BG
Brian Graves said:
"Mobile responsiveness"
https://twitter.com/meladorri/status/452533280366411777 #JudgmentalJordan :)
Edit | Delete
* JR
Jason Rodriguez said:
So good.
Edit | Delete
* BG
Brian Graves said:
HTML5 all the way!
Edit | Delete
* BG
Brian Graves said:
What's the main reasoning for disabling user scaling?
Edit | Delete
* DC
Duncan Cartledge said:
Awesome tutorial. Digesting this was 40 mins of my morning well spent, thank
you.
Edit | Delete
* RA
Roshni Agrawal said:
Hi, When I am using this code for my Emailer template, It is not working with
Mozilla Firefox. Please let me know how to resolve that problem. Thanks,
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