Templates will allow other users to quickly send out fantastic looking emails to their groups. Please refer to the notes below when creating these templates.

Our template feature is very powerful and we’ve gone to lengths to make the templates appear visually similar in as many platform/clients as possible.

It’s important to understand how emails are different from web-pages. Many of the current best practices for the web don’t apply to the world of email. To top it off the recent version of MS Office 2007 regresses behind previous versions in terms of functionality. Below are some tips to help you go in the right direction.

Design Tips for Email Templates

• Design Narrow! Your text area is 550 pixels wide. While most Internet uses have screens at least 1028px across, they still only check their email around 500-600 pixels across. AOL has less than 300px width to there reading pane in some settings!
• No Flash, JavaScript, Movies, or Animated Gifs They won’t work in many email clients (most notably Outlook 2007).
• Inline CSS is preferred over a style tag with references because some email clients will cut the non-inline style tag out.
• Many CSS Functions are disabled by email clients. This includes:
  • Positioning, Float Functions
  • Background-Image
  • For a comprehensive list visit Campaign Monitor
• Tables over DIV tags Since the positioning functions of CSS aren’t available to us, we need to make up for that by using tables when column layouts are needed.
• Design for the top 300 pixels Many emails never get opened anymore and are restricted to the preview pane of the email client. This means you need to fit anything important in the top 300 pixels, and ideally within the top 150.
• Small headers Large graphics are fun, but if they violate the previous rule.
• No Background Images This includes in CSS and in tables as they are removed in Outlook 2007 (setting the template background image will not be removed however).

Replacement Tags for Templates

Replacement tags can be inserted into the template and will be replaced with specific content when the template is used. Below is a list of these tags and what will fill into their place.

• %%Content%% | The content the user supplies. Required Tag
• %%Web-View%% | Inserts “Email not displaying correctly? View it in your browser.” with the corresponding link over the last sentence.
• %%Web-View-URL%% | Insert the URL used in the above tag.
• %%Unsubscribe%% | Inserts “Unsubscribe Email from Group.” Where email and group are their corresponding values.
• %%Unsubscribe-URL%% | Inserts the URL used in the above tag.
  If there is no Unsubscribe tag, one will be inserted into the template.

Technical Details of our Email system

For the tech savvy people here are some tech specs of our emails.

• Multi-part emails that contain both HTML and plain text (generated automatically from your user entered HTML before template is applied).
• Emails Background color or Images are dynamically inserted for maximum compatibility with different readers.
  • Tested with Web-mail, Gmail, Outlook 2007
• Fixed 550 Pixel Width to fit most email client preview windows.
• Tested Layout Setup We use a div tag with a nested table for your template to rest in.

Container for your Template

Below is a sample of the code used to wrap around your template for the purposes of designing your template. We don’t allow access to the following template within your code for customization purposes.

<div align="center">
   <table width="550">
      <tr><td>
        Your Template is placed here
      </td></tr>
   </table>
<div>

The align attribute for the div tag is set to your preference via the template interface.

Additional Resources

• How to Code HTML Email Newsletters By Tim Slavin on June 4th 2008
• Tips for practical newsletter design by Adam Baker on April 30, 2001
• Secrets of Effective HTML Newsletters by Roger C. Parker