As my clients likely know, I use MailChimp for my newsletters. And while there are other good options out there, my feeling is that MailChimp is the best of the options since they are free up to 2,000 subscribers and 12,000 emails per month. Wow! Let’s face it, the day I get more than 2,000 subscribers I’ll be pleased to pay MailChimp for use of their service.
Ok, so that being said, MailChimp has lots of great features which include tracking of opened newsletters, social media integration, google analytics, scheduled campaigns, rss feed campaigns, and more. You can use their templates, which can be customized by a wyswyg application, or you can create your own custom template, which is what I am in fact writing about here. First thing you will want to look at is their resources page, which you can find here: https://mailchimp.com/resources/
Ok, so assuming you are up to speed, and are ready to create a “custom” newsletter, here are the basics. The first thing is to create an html document. This can be a simple <html> doc-type, or of the newer xhtml type. For illustration purposes I’ve gone with the simple one as shown following:
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>Company Newsletter</title>
<meta charset=”UTF-8″></head>
<body>
Ok, so between the body tags is where you add your content, but first it is a good idea if we define our styles. Know that you can add your styles in the “body” section such as:
<style type=”text/css”>
p {color:#999999;}
#page p {font-size:12px; line-height:18px; margin-top:0; margin-bottom:0;}
… etc
</style>
Or, you can add the styling as inline styles, such as: <p style=”color: #a6a5a5; font-size: 12px; line-height: 20px; text-align:right;”>some text</p>
I know, I always say don’t use inline styles, but this is one example where they are needed. Ok, so the next thing you need to do is to create your layout, and for this you will want to use tables. The important thing to note is that the width of the template is not to exceed much more than 600px; though you should be fine up to 660px or so. So the first thing to do is create a basic table (my example consists of 7 rows and two columns, and is 600px in width); I opted for two columns since I generally find a column helps to break up the content some, and can be a great place for adding links, images, the Mailchimp social icons, etc. Next I want to remove the column on the header (top two rows) and footer (bottom two rows) so I add a column span as follows:
<table width=”600″ border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td colspan=”2″> </td>
</tr>
<tr>
<td colspan=”2″> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan=”2″> </td>
</tr>
<tr>
<td colspan=”2″> </td>
</tr>
</table>
The top row is used for the “Having trouble reading this newsletter? View it in your browser” text, or something similar. Mailchimp has a special code for this, which is: <a href=”*|ARCHIVE|*” target=”_blank”>View it in your browser.</a> At the footer, we have more MailChimp code to add, which includes view in browser, unsubscribe, update profile, and forward to a friend (I’ve added title tags for clarification here and mouse-over description/ADA accessibility).
<p align=”center”>*|IFNOT:ARCHIVE_PAGE|* <a href=”*|ARCHIVE|*” title=”view email in browser”>view email in browser</a> | *|END:IF|*<a href=”*|UNSUB|*” title=”unsubscribe”>unsubscribe</a> | <a href=”*|UPDATE_PROFILE|*” title=”update your profile”>update your profile</a> | <a href=”*|FORWARD|*” title=”forward to a friend”>forward to a friend</a></p>
Below this code we add the MailChimp rewards (to keep the account free) and the copyright content as follows:
*|IFNOT:ARCHIVE_PAGE|*
*|LIST:DESCRIPTION|*
*|END:IF|* *|IF:REWARDS|* *|HTML:REWARDS|* *|END:IF|*
Copyright (C) *|CURRENT_YEAR|* *|LIST:COMPANY|* All rights reserved.
Of course you can style the layout and text color as you wish, add paragraph or break tags, etc. The important thing at this point is just getting the necessary tags in place to satisfy MailChimp as well as your users (note that an unsubscribe link is required by law). I suggest not using div or span tags though, since some mail programs will have an issue with the more advanced tags.
From here it is simply a matter of adding background colors to the table cells, aligning content, adding a color to the text, and padding or margin to the content so it has some breathing room from the table cell edges. For the sake of this illustration I kept things simple, so we have a background color of brick red (bgcolor=”#990000″), a text color of white (color: #ffffff”), and a margin of 20 pixels (margin:20px). You will likely want to add a font-family, font-size, and line-height attributes as well. And finally, you will note that I added some images to the right sidebar as shown here: <td width=”131″ bgcolor=”#990000″><img src=”images/myimage.jpg” width=”131″ height=”153″ /></td> For these three image inclusions I kept the width consistent for visual benefit, and didn’t add any margin since I wanted them adjacent to the right side border. I could also have added a bulleted listing on this right column, the MailChimp social icons, etc. instead of images. Of course for the very top and bottom table rows you may wish to add graphics to create rounded corners. At this point it is really just a matter of being creative, which I assume you are since you are interested in creating your own newsletter template. And finally, I’ve added my “simple” newsletter layout. On a final note, all the images will need to be uploaded either into the MailChimp application, or on your hosting server. My suggestion is to create a folder for your images, and then link directly to them. So instead of linking to “images/myimg.jpg”, link to https://www.mydomain.com/images/myimg.jpg.
This will give you the basics, but as noted above, you will need to expand on this to make your newsletter something special. So get to reading the MailChimp tutorials, and above all, have fun!
<table align=”center” width=”600″ border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td colspan=”2″ bgcolor=”#990000″><p align=”center” style=”color: #ffffff;”>Email not displaying correctly? <a href=”*|ARCHIVE|*” target=”_blank” style=”color: #ffffff;”>View it in your browser.</a></p></td>
</tr>
<tr>
<td colspan=”2″ bgcolor=”#990000″><p align=”left” style=”color: #ffffff; margin:20px;”>Hello *|FNAME|*. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum.</p></td>
</tr>
<tr>
<td width=”469″ bgcolor=”#990000″><p align=”left” style=”color: #ffffff; margin:20px;”>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat </p></td>
<td width=”131″ bgcolor=”#990000″><img src=”images/myimage.jpg” width=”131″ height=”153″ /></td>
</tr>
<tr>
<td bgcolor=”#990000″><p align=”left” style=”color: #ffffff; margin:20px;”>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in.</p></td>
<td bgcolor=”#990000″><img src=”images/myimage.jpg” width=”131″ height=”123″ /></td>
</tr>
<tr>
<td bgcolor=”#990000″><p align=”left” style=”color: #ffffff;”>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in. </p></td>
<td bgcolor=”#990000″><img src=”images/myimage.jpg” width=”131″ height=”113″ /></td>
</tr>
<tr>
<td colspan=”2″ height=”25″ bgcolor=”#990000″><p align=”center” style=”color: #ffffff; margin:20px;”>*|IFNOT:ARCHIVE_PAGE|* <a href=”*|ARCHIVE|*” title=”view email in browser” style=”color: #ffffff;”>view email in browser</a> | *|END:IF|*<a href=”*|UNSUB|*” title=”unsubscribe” style=”color: #ffffff;”>unsubscribe</a> | <a href=”*|UPDATE_PROFILE|*” title=”update your profile” style=”color: #ffffff;”>update your profile</a> | <a href=”*|FORWARD|*” title=”forward to a friend” style=”color: #ffffff;”>forward to a friend</a></p></td>
</tr>
<tr>
<td colspan=”2″ bgcolor=”#990000″><p align=”center” style=”color: #ffffff;”><br />
*|IFNOT:ARCHIVE_PAGE|*<br />
*|LIST:DESCRIPTION|*<br />
*|END:IF|* *|IF:REWARDS|* *|HTML:REWARDS|* *|END:IF|*Copyright (C) *|CURRENT_YEAR|* *|LIST:COMPANY|* All rights reserved.<br />
<br />
</p></td>
</tr>
</table>