larger smaller normal text version of this page
phpList Documentation » Message functions »

Templates


This pages describes how to build a template. Note that this is a first draft.


In phpList a template is re-usable HTML code with all the standard layout and text elements of your message. For a newsletter template this would typically consist of the title heading, a logo, at the top part, and the preferences and unsubscription links at the bottom part. A template does not include the contents of the message, as this would change for each edition of the message. It should however include the 'placeholder' [CONTENT] which is used to insert the contents of the message later on.


Example

Start of template header part
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
.... place your style elements and classes here ...
.... or use inline styles (recommended)....
</style>
</head>
<body bgcolor="#CCCCCC">
<table width="640" border="0" align="center" bgcolor="#990000">
<tr><td>
<h1>My Newsletter</h1>
[CONTENT]

End of template header part
<table><tr><td>
test contents of your html message to be pasted
in: Send a Message -- Content tab
</td></tr></table>

Start of template Footer part
If you want to change your preferences, please use [PREFERENCES]
If you want to unsubscribe, please use [UNSUBSCRIBE]
Visit us at [WEBSITE]
</tr></td></table>
</body>
</html>

End of template Footer part

Let's say you designed your template in your favorite HTML editor, included some text to serve as an example and saved it as a HTML file.

Now open the HTML file in a text editor and split it in 3 parts:
1. the top part, which in phpList corresponds to the template top area
2. the text contents part, which corresponds to the message contents that is to be inserted later on.
3. the bottom part, which corresponds to the template bottom area.

Template top part
The top part is your HTML code starting from the title tag till where the middle part content should start.
Select the top part -as described above- and copy/paste it in the editing window of the 'create template' page of the phpList admin module, using the 'source button/icon' of the FCKeditor toolbar.
Make sure you add the [CONTENT] placeholder at a convenient place at the end of the top part of your code.

Template bottom part
The bottom part starts where the content part ends. Copy/paste it under the [CONTENT] placeholder in the editing window of the 'create template' page of the phpList admin module, using the 'source button/icon'.

Message Content
Finally, create a new message in phpList (click send a message from the main page), copy and paste the middle part of your HTML code in the editing window of the content tab, again using the 'source button/icon'.

Placeholders
Additionally to [CONTENT], you can add other placeholders, like [FOOTER] and [SIGNATURE] to insert the footer information and the signature of the message, but they are optional. You can further personalize your template (or message content) by adding custom placeholders based on the user's attributes. See Placeholders for more info.

User Tracking
To facilitate user tracking, you can add [USERID] to your template which will be replaced by an identifier for a user. This will only work when sending the email as HTML. You will need to set up some URL that will receive the ID. Alternatively you can use the built-in user tracking of phpList . To do this add [USERTRACK] to your template and an invisible link will be added to the template to keep track of views of the message. See message tracking.

Images
Images in your template will be included (embedded) in the emails. Any reference to an image that does not start with "http://" can (and should) be uploaded for inclusion in the email. It is advised to use few images and make them very small. If you upload your template, you will be able to add your images. References to images to be included should be from the same directory, ie <img src="image.jpg" ... > and not <img src="/some/directory/location/image.jpg" ... > See also How to include images in templates.
Note: If you add images to the content of your messages, they need to include a complete URL, and will not be included/embedded in the email.


A few suggestions
With templates and the way they are rendered in email and webmail clients, you enter a world of mostly unwritten and changing rules you will need to discover by trial and error. As a general rule, keep your template simple. Or else, test it thoroughly on as much different webmail, email clients, browsers and platforms as you can.
  • First try a very simple template (just a coloured title for the header and some coloured text for the footer. If that works, continue building from there.
  • Keep in mind that email clients are not web browsers. Most email clients will be able to display simple HTML and CSS styles, nothing fancy. So, when designing your message template, keep it simple, and do not use the most advanced CSS and HTML standards.
  • Also keep in mind that some webmail providers may change/strip some elements of HTML messages. For instance, style declarations might be removed. It is therefore advisable to use embedded/inline styles.
  • Run some tests to see how your messages are rendered in popular email clients (Thunderbird, Outlook 2007, Outlook Express, Eudora, etc.), and webmail providers (Hotmail, Yahoo, Gmail, etc.), using different browsers.

Note: Templates are only used for HTML messages. The contents of HTML messages will be parsed to generate a text message. If you are not satisfied with the way phpList does this and if you prefer more control over your text message, you can enable 'manual text part' in config.php. This will display a separate window on the message content tab where you can type your text message.

Tip: When it comes to unsupported HTML tags and CSS style elements, Outlook 2007 is currently one of the most restrictive email clients. So if you make sure your messages are correctly rendered in Outlook 2007, you'll have a fair chance other email clients will do so too.
For more info:
- Microsoft Breaks HTML Email Rendering in Outlook 2007 - by Kevin Yank (Sitepoint)
- Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 - by Microsoft Developers Network
- Guide to CSS support in email clients (2008) - by Campaign Monitor

Other resources
- 9 best practices for email design
- Optimizing CSS presentation in HTML emails - By Campaign Monitor
- CSS and Email, Kissing in a Tree - A List Apart


Related pages

CategoryDocumentation
Page was generated in 0.0666 seconds