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. The best way to maximize consistency across email clients is to keep the content and layout of your emails simple. We've also put together several email templates and tested them on the most popular email clients.

Click here for an overview of sending a message out of Atlas.

Click here to skip right to the Template Selections.

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 affect your message, and you can use the Internal HTML Editor for styling.

2. Be aware of the size and number of images you include. The header images should be sized to 600 pixels wide. It's best to resize the image before uploading it to the media manager. In general, we recommend including only a few images in your emails - it helps with deliverability, but also how your recipients experience your content. Emails with a lot of images tend to load slowly on mobile devices.

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 is sized correctly, you don't have to rely on the browser correctly interpreting the HTML.

3. Keep alignment simple. Image alignment can be tricky with mobile-friendly emails. We recommend having images appear on their own lines, rather than aligned with words wrapping. Remember, keep it simple. Similarly, images should not have any margin or spacing applied.

4. 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. 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.

This will help ensure that 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

Three templates are available already pre-loaded into your Atlas HTML Template section. You can update and save these templates in Admin > Set Preferences > Application Settings, in the HTML Templates tab. If you need to reset or start a new template at any time, you can download the files to create a new template at any time. Note: Click on a template's name to download the associated text file.

See below to learn how to upload the newsletter templates to Atlas.

responsive-email-hero.png

Large Header Image

responsive-email-newsletter.png

Clickable Sections

responsive-email-simple.png

No Image Header

First, begin by clicking on the template name in the samples above. That will open a text file, where you should copy ALL of the HTML code you see. As a shortcut, to make sure you have all text and symbols selected, use Control + A on a PC, or Command + A on a Mac. Next, right click and Copy the code.

Screen_shot_2013-01-08_at_9.44.19_AM.png

In Atlas, go to Admin > Set Preferences > Application Settings, and click the HTML Templates tab. To create a new template, click New HTML Template at the bottom. Enter a Title for the template, then in the Message field, paste in the code that you have copied to your clipboard. 

mceclip0.png

You can now click Save HTML Template to save this basic template/language in your new template. To further edit the template, right-click in the HTML and choose Internal HTML Editor.

html_editor.png

To any changes made in the Editor, click Accept HTML in the upper right corner. Then, click Save HTML Template at the bottom for your changes to be saved to the template.

You can now pull this template into any email that you are composing, using the Template dropdown in the Message section. Click here for more details on sending an email through Atlas.

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.

Want some training on Atlas? Sign up today for one of our upcoming training options.