Coding a Bare-Bones HTML/CSS E-mail Newsletter Template
This page may contain links from our sponsors. Here’s how we make money.
There are a lot of tutorials out there explaining the major benefits of email marketing. 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 email newsletter template. 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.
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.
Related reading: 7 Best Free Email Marketing Options Ranked
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="https://www.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="https://www.vandelaydesign.com/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="https://www.vandelaydesign.com/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="https://example.com/" 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="https://example.com" 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 in case you forget.
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.
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 of 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.
