Coding a Bare-Bones HTML/CSS E-mail Newsletter Template

There are a lot of tutorials out there explaining the major benefits of building an e-mail newsletter. It definitely draws attention to your website and helps regular readers keep up with new publications. But not everybody has the time or knowledge to build their own newsletter design.

In this tutorial I want to go over the process of building a very basic HTML newsletter. I’ll explain some key steps along the way and you can grab a copy of my source code as well. When you’re building HTML code for e-mail clients the work process is a whole lot different. But once you understand the basics you’ll have an easier time working with more complex layouts.

Coding a Bare-Bones HTML/CSS E-mail Newsletter Template

Live DemoDownload Source Code

Basic E-mail Rules

We need to build the entire HTML template with CSS styles all included inside one file. The typical HTML5 standards are mostly thrown out the window for e-mail designs.

The reasoning is that you’re not building a page to display in HTML5-capable web browsers. People will be reading your newsletters in e-mail clients such as Gmail, Hotmail, AOL Mail, Apple Mail, or possibly Microsoft Outlook. Each of these titles run a different rendering engine in some regards.

This is why you’ll always want to keep CSS styles inline with your elements. This is the best way to override any default styles when first loading the page. Additionally most of these e-mail providers will strip tags out of your documentsection, which may include CSS styles. The safest solution is to always keep CSS inline and copy them over for repeating elements.

Starting the Document

I’m beginning my code exactly as we would any typical webpage. I’m using the XHTML 1.0 Strict doctype since it provides the strictest set of rules for HTML markup. Some of the popular e-mail providers will actually strip doctype data, so this isn’t a super important element.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Newsletter Demo</title>
</head>

The content-type and charset values are definitely an important piece. Even if the tags are stripped this extra information isn’t detrimental to the layout design. I have also setup the viewport with a 1x scale for mobile screens. This will help if you’re redirecting users to open the newsletter in a browser.

Wrapping Body Content

The entire layout design should be coded using HTML tables. This feels like we’re going back into the 1990s with the early days of HTML4 specifications. But in many ways e-mail technology has not been given an improved rendering engine. So we need to build for these specs and tables are simply the quickest way to satisfy the majority of software.

To get started I’m giving the main body tag a dark-grey background color. This will match the wrapper table’s background and should fill the entire document. A width of 100% will make sure the whole page behaves as a container, while the central tables are limited at 550px.

<body bgcolor="#3f3f3f" style="width:100%;margin:0;padding:0;background:#3f3f3f;">
  <!-- main table wrapper -->
  <table border="0" cellspacing="0" cellpadding="0" width="100%" style="background:#3f3f3f" bgcolor="#3f3f3f">
    <tbody>
      <tr>
        <td>
        <!-- top head links -->
        <table align="center" border="0" cellpadding="0" cellspacing="0" width="550">

The first table is our container while the second table is used for displaying content. In this case I’m including a series of small links at the top of the e-mail so users can unsubscribe or check out the full page in their web browser.

<td align="center" valign="middle">
  <p style="font-size:11px;color:#fff;font-family:Arial,Tahoma,sans-serif;">We have you currently subscribed to receive our weekly site newsletter.
  <br />
  Is this message too small? <a href="#" style="text-decoration:none;" target="_blank"><span style="color:#728fd9;">Open a copy in your web browser.</span></a>
  <br />
  Sick of getting these updates? <a href="#" style="text-decoration:none;" target="_blank"><span style="color:#728fd9;">Unsubscribe now.</span></a></p>
</td>

This is the inner table data element containing a brief paragraph of text. I’m using line breaks so we don’t have awkward margins with multiple paragraphs. But also notice how I have included the specific anchor link styles inline on each element in the text. This is verbose when initially coding a template, but it also provides the greatest support.

Core Newsletter Content

As you can guess by now the entire document is comprised of just a few tables. We have the very top for our header links, then underneath that another table holding the logo and some descriptive text. The 3rd table includes the entirety of our body content while the 4th behaves as a small footer with credits and further links.

<!-- newsletter content area -->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="550" bgcolor="#f5f8f6" style="background:#f5f8f6;">
  <tbody>
    <tr>
      <td style="text-align:center;">
      <h2 style="font-size:22px;font-style:italic;font-weight:normal;font-family:Georgia,Times,serif;color:#636363;margin-bottom:2px;">September 2012 Publication</h2>
      <p style="font-size:12px;line-height:17px;color:#343434;font-family:Georgia,Times,serif;padding:2px 10px;">For our current newsletter we have included a series of galleries, showcases, design articles, tutorials, and even a unique WordPress theme. All of these articles can be found archived in the blog. You can visit the <a href="http://vandelaydesign.com/blog/" style="color:#5977c3;" target="_blank">website homepage</a> to find more recent articles.</p>
      </td>
    </tr>
    <tr>
      <td>
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
          <tbody>
            <tr>
              <td width="280" height="125" style="padding-left:6px;padding-top:4px;">
                <a href="http://vandelaydesign.com/blog/galleries/photography-logos/" target="_blank"><img src="http://byjakewithlove.com/code/vandelay/newsletter/images/photography-logos-showcase.png" alt="Showcase of Photography Logos" width="280" height="120" /></a>
              </td>
              <td width="240" height="125" style="text-align:center;padding-right:8px;">
                <h3 style="font-size:15px;color:#64686e;font-family:'Lucida Grande',sans-serif;font-weight:bold;">Showcase of Photography Logos</h3>
                <p style="font-size:11px;color:#666;font-family:Arial,Tahoma,sans-serif;padding:0 12px;margin-bottom:0;">In this post we'll showcase more than 25 logos for photographers, created by a variety of different logo designers.</p>
                <p style="margin:0;text-align:right;font-family:Arial,Tahoma,sans-serif;"><span style="font-size:11px;font-weight:bold;"><a href="http://vandelaydesign.com/blog/galleries/photography-logos/" style="color:#5977c3;" target="_blank">Read Online ?</a></span></p>
              </td>
            </tr>

Inside the main content table we can generate data inside table rows. So for each new row we can split content into two columns, or keep everything at 100% width. All of the article links are split into two columns displaying the post title along with a thumbnail image.

For each alternating table row I’ve setup a different background color. This alt design style will help readers as they’re scrolling through your newsletter. Distinguishing content apart from the rest of the background will make the articles listing stand out more.

<tr style="background:#e5e9ee;">
  <td width="280" height="125" style="padding-left:6px;padding-top:4px;">
    <a href="http://vandelaydesign.com/blog/galleries/blurred-backgrounds/" target="_blank"><img src="http://byjakewithlove.com/code/vandelay/newsletter/images/blurred-website-backgrounds.png" alt="Blurred Backgrounds in Web Design" width="280" height="120" /></a>
  </td>
  <td width="240" height="125" style="text-align:center;padding-right:8px;">
    <h3 style="font-size:15px;color:#64686e;font-family:'Lucida Grande',sans-serif;font-weight:bold;">Blurred Backgrounds in Web Design</h3>
    <p style="font-size:11px;color:#666;font-family:Arial,Tahoma,sans-serif;padding:0 12px;margin-bottom:0;">In this post we値l showcase 16 examples of this blurry-background trend for your own design inspiration.</p>
    <p style="margin:0;text-align:right;font-family:Arial,Tahoma,sans-serif;"><span style="font-size:11px;font-weight:bold;"><a href="http://vandelaydesign.com/blog/galleries/blurred-backgrounds/" style="color:#5977c3;" target="_blank">Read Online ?</a></span></p>
  </td>
</tr>

One more important tidbit worth sharing involves images within your newsletter. It’s always a good idea to keep images hosted somewhere on your own website, away from the other image files. Ideally you should keep these online indefinitely so that your newsletters will always be compatible even years later. But there is no other simple method to include images within your HTML document. So the best solution is self-hosting while keeping all your design assets organized.

Testing & Publishing

Once we have a completed HTML newsletter how do we test the layout within different e-mail software? The best way is to create a series of different accounts which you can use for modeling your designs. This would include a few staples which I’ve listed below:

  • Google Mail
  • Hotmail
  • Yahoo! Mail
  • Microsoft Outlook 2003/2007
  • Apple Mail

If you don’t have software like MS Outlook or Apple Mail there’s really no way to do testing for that. But it shouldn’t be difficult signing up with any of the free e-mail providers online. Keep a small text document with e-mail/password combinations just incase you forget. There is also an excellent blog post by Campaign Monitor which outlines their typical testing procedure.

As for online tools my favorite has to be Puts Mail. You don’t need to signup or create any new account. Just copy/paste your HTML code and then add up to 10 distinct e-mail addresses.

Their service will fire out all the emails at once so you can check for issues in your layout design. This is the simplest method for pinpointing bugs and rendering issues within the e-mail clients you’re testing. And the service is completely free, which is great news for web developers on a budget.

Coding a Bare-Bones HTML/CSS E-mail Newsletter Template

Live DemoDownload Source Code

Final Thoughts

I know this tutorial will help some web developers who are familiar with modern design trends but haven’t ventured into the field of e-mail designs. It will most likely require a few hours of practice before you can nail down a solid coding technique. But in many ways building a newsletter can be easier than building an entire HTML5 webpage.

Feel free to grab a copy of my source code and test it out for yourself. I’ve shared a couple resources for HTML e-mail testing which you can send out to various inboxes. Hopefully this very basic template can be used for building out your own designs for working on future projects. If you have any questions or comments on the article feel free to share with us in the post discussion area below.

About the Author:

Jake is a freelance writer and frontend web developer. He can be found writing in many blogs on topics such as mobile interfaces, freelancing, jQuery, and Objective-C. Check out his other articles throughout Google and follow his tweets @jakerocheleau. Jake’s Google+ profile.

Published October 22nd, 2012 by

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads. Visit WPEngine.

Join Our Newsletter!

Subscribe to our weekly newsletter chalked full of useful tips, techniques, and design goodies. We have 20,000+ loyal readers and counting! We’ll even send you a free e-book (Freelance Designer’s Guide to Multiple Income Streams) and a $10 discount on our most popular product the Freelance Starter Kit.

13 Responses

Comments are now closed on this post.

  • Linaka, October 23, 2012

    I have to say that Microsoft Outlook has to be 10 years behind in terms of code tech. Sadly in some in B2B it tends to be the top email client. I’ve managed to find a way to code adequately for it though.

  • kristin currier ludlow, October 23, 2012

    I work as an in-house eCommerce designer and much of that has involved emails of various, graphic-heavy designs. In our testing we’ve found that we can get good results using a stacked table method rather than fixed nested table method. This works well with heavy graphics and sliced designs which is often the case for eCommerce marketing design. It’s also helpful when dealing with designers who aren’t strong with code or marketers who want to change things all the time. The tables can be cut and pasted on top of other tables more easily.

    Even if I have to use a nested table grid with live text, I will still make this a stackable module table that can be easily cut and pasted elsewhere in the layout.

  • J, October 23, 2012

    You have to put a line height of 0 on table cells or the layout breaks in Gmail.

  • CarolineTemple, October 23, 2012

    thank you! You’re right – too often we blog about the benefits or ‘how-to’ of email marketing. (I’m guilty of this myself recently-ooops!) It’s refreshing to see email marketing from the coding and design aspect.

  • Carlitto, October 30, 2012

    Good stuff. I worry about the padding and margin use though. Even though you put it inline, I sometimes find that the results are not consistent across browsers.
    I recommend a ‘teaser’ text line as the VERY first item in the email. That teaser will be picked up by some browser-based emails and added to the subject line. Otherwise you get some content adding in that space, which may not be ideal. Hopefully you get what I mean. I was wondering why you used the around the “Read Online →” and didn’t just put that CSS on its ? cheers

  • servis racunara, November 1, 2012

    Thanks for this post. I’m new in html/css. I have my own company, but no monthly fee for marketing, so I have to do myself. This will help me to start sending e-mail newsletters, but first, I need some basic tutorials in html.
    Thank You!

  • Adam, November 9, 2012

    Hi,
    So I have what is probably a really simple problem that is frustrating me.
    I am trying to compose an HTML newsletter but when I send it it just displays as the HTML code rather than a rendered page.
    I even tried just downloading the source-code you linked to for this article and just sending that but when I send it it still comes through as just raw code.
    I’m sure I am just missing something really simple but if anyone could tell me what I’m doing wrong I would really appreciate it.

    Thanks,
    Adam

    • Steven Snell, November 10, 2012

      Adam,
      It sounds like you are just entering the HTML where you would normally enter text. If you are using a mailing list manager you should be able to paste HTML code as the source. For example, AWeber has a button that you click that says Paste in HTML. With a regular mail client you can’t always access the source HTML code, it depends on the mail client.

  • Adam, November 20, 2012

    Steven,
    Thanks for your response.
    I am trying to use Outlook. I have it set to send as html but maybe it just isn’t the best program to use.

    • Steven Snell, November 20, 2012

      Adam,
      I’m sorry, I’m not familiar enough with Outlook’s HTML capabilities to be able to help. In general, you’ll want a mailing list manager like AWeber or one of their competitors. We use AWeber for our newsletter and I paste in the HTML for the newsletter each week. With regular mail clients you generally don’t get the same functionality because they are not really made for sending newsletters.

  • Natalie Tuckwell, November 20, 2012

    Hi Adam, in Outlook, you need to make sure the format of your email is set to ‘html’ and not plain text. This setting is in the overall preferences for Outlook, and also in the setting for each message. It’s location varies but look for message> format> html, not Rich Text or plain text.
    Another thing you can do is view your html file in a web browser, then select all > copy and paste into a new Outlook message. Outlook 2010 will add different amounts of space between paragraphs.
    Be very wary of pale/white text on dark backgrounds/images because if you loose the background colour your text is invisible. Check out MailChimp.com fir free templates and tutorials. And test. A bit basic is better than totally unreadable.

  • Adam, November 21, 2012

    I’ve set it to send in HTML in options and the new message window itself but still no luck. :(
    I don’t’ mind using a mailing list manager for the newsletter itself but sometimes I just want to send messages to 1 or 2 people.
    Thanks for all the help guys, I really thought this would be just a setting I was missing.

  • Nemopsy, February 22, 2013

    Thank you for this article. As I knew nothong, I feel I begin to undrestan. However, when the file is built and uploaded, how can I manage to send an email which opens by itself as soon as it is open?

    This step is missing (or I did not catch it)… :(