Creating an HTML Email for Blasts and Newsletters
<p>Creating an HTML email for newsletter and email blasts can actually be a lot trickier than you'd think. First, a few points to always remember:</p>
<h2>1. Email Clients are dumb</h2>
<p>When creating an HTML email always remember that you're basically creating a web page for someone in 1996. This means that you should be using the simplest in HTML tags, and when using CSS, don't use floats, absolute positioning, and use CSS shorthand sparingly.</p>
<h2>2. Don't copy and paste or import a Word file as the content in your email.</h2>
<p>If you paste in from Word you'll also be pasting in Word's special characters which tend to fail-out when viewed in an email client (or a basic web-browser for that matter). What I mean by that is that a quotation mark pasted in from word will be the pretty curved quotation mark instead of the web-standard straight-quotes. So, if it's THAT important to you to have curly quotes you would actually need to replace all quotations with either the code <code>&ldquo;</code> or <code>&rdquo;</code> You'll also end up with a bunch of useless XML and styling that doesn't do anything but mess things up like <a target="_blank" href="http://www.blindacre.com/blog/snips/word-xml.html">this</a>.</p>
<h2>3. Width</h2>
<p>Remember that most people viewing your emails won't be seeing it in a web browser, they'll be looking at it in Mac Mail, Outlook, Entourage, Thunderbird, etc. So, the standard rules of website width don't apply. You'll want to keep email below 650 pixels.</p>
<h2>4. The <head> is useless</h2>
<p>Don't spend too much time playing with the information in the Head of the HTML. In fact, you can delete it. Most email clients will remove it anyway so it doesn't interfere with their own interface.</p>
<h2>5. Don't give it a DOCTYPE</h2>
<p>Remove any DOCTYPE information from the top of the HTML. Because you're going to be using depreciated and long-handed code the DOCTYPE may actually interfere with what you're trying to accomplish.</p>
<h2>6. No external stylesheets</h2>
<p>Trying to use external stylesheets is generally a bad idea. Its support between email clients is spotty at best. It's best practice to APPLY ALL STYLES INLINE.</p>
<h2>7. No Javascript or Flash</h2>
<p>As stated in #6, support for in-email Javascript is very spotty because of security issues. Flash just straight-up won't work...don't even think about it.</p>
<h2>8. Always give direct source URLs</h2>
<p>When linking images up to your email, remember, they always must be hosted online on a public server. So, never leave an image take like this: <code><img src="image.gif" /></code>. The <code>src=""</code> should always be a direct link: <code><img src="http://www.blindacre.com/blog/image.gif" /></code> SO, now that we've got the Top 8 things to remember, what we're left with is a basic HTML shell that looks like this:</p>
<blockquote><code> <html> <br>
<body> <br>
</body> <br>
</html></code></blockquote>
<p>Adding in a 650 pixel wide column to contain the content of the email that is centered in the window should look something like this:</p>
<blockquote><code> <html> <br>
<body> <br>
<div align="center"> <br>
<table width="650"> <br>
<tr> <br>
<td> <br>
</td> <br>
</tr> <br>
</table> <br>
</div> <br>
</body> <br>
</html></code></blockquote>
<p>Now we basically have a shell ready, you can put all content between the <td></td> tag (the table cell) or separate your main table into rows and columns for you layout. Now, let's add some content</p>
<blockquote> <code> <html> <br>
<body> <br>
<div align="center"> <br>
<table width="650"> <br>
<tr> <br>
<td></code><code> <br>
<h1></code>This is the Heading!<code></h1></code> <br>
<code><h2></code>This is a Sub-Heading<code></h2></code> <br>
<code><img src="http://www.blindacre.com/images/logo.png" /></code> <code><br>
<p></code>Lorem ipsum dolor sit amet, consectetur <code><a href="http://www.blindacre.com/"></code>adipisicing elit<code></a></code>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<code></p> <br>
</td> <br>
</tr> <br>
</table> <br>
</div> <br>
</body> <br>
</html></code> </blockquote>
<p>This bit of code gives us an email that looks like this: <a href="/files/public/userfiles/1000/blog/2010/01/Picture-6.png"><img width="800" height="338" alt="" src="/files/public/userfiles/1000/blog/2010/01/Picture-6.png" title="Email with content - no styles" class="aligncenter size-full wp-image-72"></a>Ok, we've got the layout and we've got the content, now lets add some styles. REMEMBER: Keep all styles and CSS in-line, and don't use any shorthand!!!</p>
<blockquote> <code> <html> <br>
<body <span style="color: rgb(255, 15, 240);">style="margin-top:0px; margin-bottom:0px; background-color:#2d2d2d;",</span>> <br>
<div align="center"> <br>
<table width="650" cellpadding="20"> <br>
<tr> <br>
<td <span style="color: rgb(255, 15, 240);">style="background-color:#1d1d1d;"</span>> <br>
<h1 <span style="color: rgb(255, 15, 240);">style="font-size:35pt; color:#899C2D; font-family:Georgia, 'Times New Roman', Times, serif; margin-bottom:0px; padding-bottom:5px; font-weight:normal; border-bottom:1px solid #cccccc;"</span>></code>This is the Heading!<code></h1></code> <br>
<code><h2 <span style="color: rgb(255, 15, 240);">style="font-size:18pt; color:#899C2D; margin-top:0px; margin-bottom:20px; font-weight:normal; text-align:right; font-style:italic;"</span>></code>This is a Sub-Heading<code></h2></code> <code><br>
<center><img src="http://www.blindacre.com/images/logo.png" border="0" /></center> <br>
<p <span style="color: rgb(255, 15, 240);">style="font-size:12pt; line-height:30px; font-family:'Lucida Grande', Arial, Verdana, sans-serif; color:#888888;"</span>></code>Lorem ipsum dolor sit amet, consectetur <code><a href="http://www.blindacre.com/" <span style="color: rgb(255, 15, 240);">style="color:#899C2D;"</span>></code>adipisicing elit<code></a></code>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<code></p> <br>
</td> <br>
</tr> <br>
</table> <br>
</div> <br>
</body> <br>
</html></code> </blockquote>
<p>As you can see, all CSS is inline (and in pink). The code above with the styles now gives us an email like this: <a href="/files/public/userfiles/1000/blog/2010/01/Picture-8.png"><img width="821" height="423" alt="" src="/files/public/userfiles/1000/blog/2010/01/Picture-8.png" title="Email WITH Styles" class="aligncenter size-full wp-image-80"></a>Now, once you're all done with your pretty HTML email design and you think it's ready to send be sure to CHECK AND RE-CHECK THE EMAIL IN MULTIPLE EMAIL CLIENTS!!! The email clients you'll especially want to watch out for are:</p>
<ol>
<li>Outlook</li>
<li>Outlook Express</li>
<li>Mac Mail</li>
<li>Entourage</li>
<li>Thunderbird</li>
</ol>
<p>You'll also want to sign up for a few different free email providers including:</p>
<ol>
<li>Gmail</li>
<li>Yahoo</li>
<li>Hotmail</li>
<li>AOL</li>
</ol>
<p>That's all for now - if you have any questions or think we missed something important, leave us a comment and we'll answer ASAP. -Steve</p>
