Marketing is the lifeblood of the Internet industry. Running your own brand and corporation can be tiresome, not to mention extremely difficult. But with a powerful e-mail marketing campaign you can gather a lot of attention very quickly. It’s a fast process to find new subscribers and build a unique newsletter.
However there are many convoluted guidelines for creating such a template. Newsletters are written in HTML and styled with CSS. However they do not run directly from a web browser, but instead use e-mail clients. Thus our methods for coding are very different in comparison. I’m hoping to introduce you to some user guidelines so you can feel comfortable building your own newsletter design.
The Structure of HTML
Right away you should understand that HTML is a very powerful markup language. This holds especially true for newsletter designs which require some extra special attention. Notably you won’t be using many div or span elements, at least not to structure the page layout.
Tables are surprisingly a lot more fluid and make it simplistic to create such layouts. If you have been coding websites for a while you will certainly remember developing layouts in tables back 5-10 years ago (or more). But now that we’re designing specifically for e-mail there is a whole new set of standards to consider.
To begin structuring your HTML you should understand how a wrapper works. Using nested tables you should code one single table using the width=”100%” attribute. This will be your wrapper block which basically holds all the rest of your template in place, and allows it to expand if there is room. You could then create your internal table specifying width to a degree – below is some example code.
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
<tr>
<td>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="5" bgcolor="#FFFFFF">
<tr>
<td>
<p>I guess some content goes here!</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
Notice that we aren’t using much CSS for things we can do with straight HTML. It may seem like we’re moving backwards compared to web standards. Unfortunately this is just how e-mail works. Not everybody will be using a client able to render your CSS properly, so for compatibility it’s best to stick with HTML whenever possible. Because of this we’re also setting the bgcolor and align attributes directly on our table so we have a clean white background and centered content.
Format your Layout
Now that we have a bare template to work off it’ll be simple to code a newsletter template. The difficult part will be imagining the perfect template design for your work. We have a whole HTML e-mail toolbox full of tutorials and templates to get you started thinking.
But when it comes to newsletters we aren’t creating the most complex digital page for your site. It’s probably going to contain a simple header with a logo and some links, maybe a brief bit of content and finally a small footer. The footer often contains links to your most important website pages along with an unsubscribe link.
So in truth your page content will be the most important section for readers. And how this displays is entirely based on what you are looking to give your visitors. Some people use newsletters to send out a roundup of their most popular links and articles from the past week/month. In this scenario you may even split your content table into 2 columns – this gives room for a small yet efficient sidebar.
But personally speaking, I find the single column newsletters to be a lot more manageable. Remember that current Internet users are often looking for the simplest way to do things. Simplicity is the key here. And more visitors will be using mobile devices than ever before, which means much smaller screens. If you plan on using some static content and images go for the single column layout and expand if needed.
Ultimately you’ll want to keep your page width below 600px, but 500px is good as a reserve value. You could make the design scroll vertically as long as you’d like, this is only limited by content. But practically none of your readers will want to scroll both horizontal and vertical, so keep this in mind. And I assume it goes without saying to avoid all JavaScript.
Headers and Footers
These two aspects of your design are very important to the overall template. In your header area you may construct a basic logo design with a link back to your home page. This works similar to any website design you would build. Except in this case you should trim down the height to 100px-150px and keep images resourceful.
Many, if not all e-mail clients will ask the user before it goes to download images from the web. This is important to understand so you don’t load up your template with fancy icons and design features. If you’re going to place any images keep them in your heading or produced sparingly in your content.
Your footer should be a simple collection of copyright data and links back to your website. This could alternatively include a return e-mail address, but any data you include is absolutely optional. The only really important link to include somewhere is the unsubscribe link. Many designers put this into their footer area so users don’t click it on a whim and unsubscribe. Plus after years of hand-delivered newsletters into their inbox readers are conditioned to look in the footer to unsubscribe.
Pro Tips for CSS Design
To finish up I’d like to offer some open-ended tips for designing newsletters, specifically with CSS. Ideally simplicity is the key as stated before. So you shouldn’t get too devoted into building an extravagant design utilizing the latest and greatest CSS3 techniques. But consider that any CSS styles you do place would display most proper as inline attributes.
This doesn’t mean you can’t use the style tag to include custom CSS properties right into your page. This is certainly possible, but it can be tricky working with the many mail applications. If you go this route move any properties into your document body… maybe even your footer area. GMail has a tendency to delete extraneous CSS styles from your header and even the body area, which leaves your template bare and devoid of styles.
You should also avoid adding background images through CSS whenever possible. You could do this with an inline style="background-image:" attribute for the clearest effects. Alternatively the background="" attribute for table rows/table data works much more frequently. I have noticed, however, that straight colors work best for your backgrounds and reduce the overall confusion.
If you need a small banner or footer background just save it as one single image and try using CSS for positioning. But avoid any large images above the fold which would push down your content. This will annoy many readers if they can’t even tell what the point of your e-mail is right from opening!
One more point to make is styling font with CSS. This can be incredibly annoying since classes and IDs are often stripped from your CSS styles. This happens in webmail because they don’t want your CSS styles conflicting with their own. Which does make some sense. If you’re a bit nervous for this I highly recommend jumping back to 1995 and familiarizing yourself with the HTML font tag. There’s no doubt this will be a pain to work with. But building towards unison for all mail readers will require some sacrifice in web standards.
Conclusion
These tips should have gotten you feeling a lot better about creating HTML newsletters. Coding your own template from scratch is such a rewarding process. Especially if you can find the perfect layout to replicate your website’s design.
This article was intended to get you familiarized with some of the quirks in e-mail layouts. To create brilliant design works for e-mail you’ll need to dedicate a bit more time to researching and developing your ideologies.
