Customizable Newsletter Templates

What is it?

Formatting emails for consistent delivery across multiple email clients can be tricky, but we've put together this article with resources to help make your life easier. Each email client (Outlook, GMail, Thunderbird, etc.) renders messages in different ways. While one rule might work well in certain email clients, it could be interpreted differently by other clients, causing unintended display issues. To help simplify things for you, we've put together several email templates and tested them on the most popular email clients.

Click here to watch a video on Newsletter Tips & Best Practices.

Click here to learn how to upload one of the newsletter templates below to your Contact Center.

Click here to view the Form Confirmation Email Templates.

Click here for a video on Newsletter FAQs.

Tips and Suggestions

1. First, copying and pasting from a program like Microsoft Word can often create unintended results. If you do need to copy and paste text, it is best to first paste it into a text editor such as TextEdit (Mac) or Notepad (Microsoft). This will strip out any unnecessary HTML code that could effect your message, and you can use the MemberClicks editor for styling.

2. As a best practice, save these templates as templates. When you need to create a new message, you can make a copy of the template and start from there. This will allow you to always keep a 'clean' copy of your email template for future use.

You can customize these templates with your colors by selecting the appropriate table/table cell/table row and clicking either Table Row Properties or Table Cell Properties. In general, it is best to leave most of the settings of the General tab alone. If you click on Advanced, you will be able to select the background color of that element.

3. If possible, avoid adding extra tables/table cells. We were able to set the font attributes in the HTML markup so the entire email will have consistent font styling. However, some email clients require that font declarations be included in each and every table cell. If not declared, the styling will fall back to the default font family and size of your email client - this could lead to mixed fonts in your emails.

If you do need to add more tables/table cells, you will want to select the text and choose the font style from the drop down selections at the top of the editor.

Screen_shot_2012-12-11_at_10.10.08_AM.png

Note: You will also want to avoid clicking and dragging to change the size of cells/tables. This is likely to distort the delivered email.

4. Aligning images works a bit differently when using the Contact Center. First, alignment should be set using the align tool when inserting an image using the Image button at the bottom of the editor.

Screen_shot_2012-12-11_at_10.14.39_AM.png

For the alignment to work in Microsoft-based clients (Outlook, for example), the image should not be edited after it is inserted. You will also want to make sure that the image is the correct size before uploading it to your Media Manager rather than sizing it once inserted. If you edit an image after inserting it, Microsoft-based clients will force the image to be shown on its own line. It is recommended that images be placed on their own line as opposed to aligned left or right.

Additionally, we've recently added 4 new attributes to help with formatting images inserted into Contact Center messages. These attributes are Height, Width, HSpace and VSpace.

Screen_Shot_2014-04-29_at_3.57.05_PM.png

These values are in pixels and should only be entered as a number. For example, if you wanted your image to be 200 pixels wide, you would enter 200, not 200px. Height and Width will set the height and width of the image, respectively. Please note that if one of these is filled in and the other is left blank, the image will be sized proportionally. If both attributes are filled in, both will be applied and it could cause the image to appear distorted.

We do still recommend resizing the image to the proper size before uploading into MemberClicks, as some email clients might not respect these attributes. If you're using a PC, you can resize images in a program like Microsoft Paint. If you're on a Mac, iPhoto works well. There are also free online services, like Picasa, that can be used to crop photos. If the original image uploaded to the Media Manager is sized correctly, you don't have to rely on the browser correctly interpreting the HTML.

HSpace and VSpace define the horizontal and vertical spacing around an image. Whatever number(s) you add here will be applied, in pixels, to the left side of the image and to the right (meaning that if you use a number like 10, 10px will be added to the left and 10px will be added to the rigiht, rather than 10 total px). HSpace will add space to the left and right of an image, while VSpace will add space to the top and bottom. We generally recommend using a value between 2 and 20 - less space probably won't be noticeable, and more space will start to create a large gap.

Finally, we recommend removing all spaces from the file name of an image prior to uploading. Some email clients will interpret a file name with a space as a broken link, causing the image to not appear. As a best practice, you can remove the spaces entirely or replace space with dashes (-) or underscores (_), so rather than uploading an image called "my logo.png" use one called "my-logo.png" or "my_logo.png."

5. Each newsletter template was built using a table of contents containing anchor links that would 'jump' to another part of the email when clicked. For these anchor links to work in GMail, you will need to select the anchor, then click the Insert/Edit Attributes button and enter the same name that you gave the anchor in the ID field. Note: Anchors are case-sensitive, and don't allow spaces. It is also important to note that Anchors don't work well in some mail clients - Gmail in particular. Click here to learn more about using Anchors.

6. To avoid disrupting the message layout, please note the maximum image widths for each template. If you would like to use a header image that is the full width of the newsletter, please make the image no more the 780px wide and choose one of the "Full Width Header" templates.

7. Articles that are in the same column can be separated by a horizontal line. To add that line, click on the Insert Horizontal Ruler icon.

Screen_shot_2012-12-11_at_10.17.24_AM.png

8. Because of the different email clients' standards, it is recommended to style your headings with Font Family and Font Size as opposed to using H1, H2, H3, etc.

Screen_shot_2012-12-11_at_10.10.08_AM.png

This will help ensure the the message is received with the proper styling instead of the default styling of the user's email client. Note: This is the opposite of what we recommend when creating content for your website, and applies to email only.

Template Selection

Choose a template and download the corresponding text file below. You can download as many newsletter templates as you like at no charge. You can customize these templates with your colors by selecting the appropriate table/table cell/table row and clicking either Table Row Properties or Table Cell Properties. In general, it is best to leave most of the settings of the General tab alone. If you click on Advanced, you will be able to select the background color of that element. Note: Click on a template's name to download the associated text file.

Click here to learn how to upload one of the newsletter templates below to your Contact Center.