Basic HTML E-mailing: Setting up a Template
Submitted Wed Oct 17 2007 17:19:03 GMT-0400 (EDT)As we've mentioned before getting email design from the interface to your member's inbox is not as simple as one might hope. Luckily, a well designed email template can not only help you deliver an email that more closely resembles your vision, but can also lead to consistency between emails and speed up the time each blast takes to create.
Use a Template
The over whelming majority of users need to use an email template. We want to use a template to 'protect' some parts of our HTML for both consistency and to ensure critical parts of the HTML are not altered during the creation of a blast.
The WYSIWYG is a helpful tool, but it isn't perfect. It works best when you let it help you with basic formatting instead of trying to create an entire email, so we want to separate the content of the email from the rest of the email using the template system.
Telling the template tool what's what
An email template can contain both protected and unprotected HTML, that is, HTML you'll be able to edit during the blast creation process, and HTML you won't. (Note: This is different from what is allowed in a website template.) We use two pseudo-tags in our templates to protect parts of our HTML. These tags are:
<!-- TemplateBeginEditable name="content" --> and <!-- TemplateEndEditable -->
Put these around the unprotected HTML. Everything in between these pseudo-tags will be editable when we create a blast, and everything outside these pseudo-tags will not.
What to protect and what not to protect
Some parts of the email must be protected in a template. At the bare minimum this includes your <html> tags, everything in the <head> tags and the open and close <body> tags.
Past those necessities, the next step is finding the smallest level of HTML containers (either a table or a div) that contains everything that might change in each blast.
If you have a graphic that stays the same on every email, that should be protected in the template. If you have a side bar that changes, that must be within the pseudo-tags of your template.
There are two possible pit falls to keep in mind when choosing where to put your pseudo-tags. The first one is that there can be only one set of the pseudo-tags per template. Having more than one set will cause undesired results. The second is ensuring that a table (or any other tag) isn't broken up in both editable and protected areas of the template. You can have a table start before and end after the protected area, as long as there are no trs or tds of that table in the editable area.
Creating a blast with a template
When you create an email blast, the first step is to select your template. Above your template thumbnails you'll see a checkbox to "I don't want to edit the whole template"; leave this checked. If you find you can't edit the content of your email blast with this box checked, you should reevaluate where you put the pseudo-codes in your template. You might need to move them, or restructure your template altogether.
When you select your template, the editable part of your template (the part in your template between your pseudo-codes) will be inserted in to the WYSISYG. Here you can add your content, or replace any 'space-holder' text you might have used in your template
Before it's time to send out your first email, make sure to test your templates in an email. When testing your template you'll need to test it on a number of email addresses. Be sure to test email addresses at Yahoo, Hotmail, AOL, Gmail and an address that is read in Microsoft Outlook. Each of these email clients allows for a different set of CSS and HTML
Template best practices
Past these basic requirements there are a number of best practices
- Nesting tables is easier than lots of table columns or rows.
- Use valid HTML: don't make the email client have to interpret your HTML. The more it has to guess what you really mean, the more it will guess incorrectly.
- Think in boxes: your paragraphs should be in <p> a sidebar should be its own <table>.
- Don't nest style tags: nesting <b><em><font>and a <span> will create problems when you get to the WYSIWYG.
- Keep your design simple! Start by creating something you like that doesn't use any styling or fancy formating. There is a good chance some of your supporters will see the email like that. If your template demands that your formating come through, redesign your template.
- Inline styles are more likely to stay intact then embedded styles.
- Don't start in Microsoft Word! If you have a well developed template try creating your content directly in the WYSIWYG.
- It's ok to use Dreamweaver to create your template. It isn't ok to use Dreamweaver to create an individual email.
- Don't use the following HTML tags any where in an email: <map>, <area>, <script>, <embed>, <object>, and <link>
Comments
Please login to post comments