Tips for programming your own templates

In this article, we list various tips for template programming.
You only need these if you want to program a completely custom template yourself. 

General Notes

1. The width of the email should be between 600 and 700 pixels. The CleverReach templates are optimally designed for a width of 600 pixels.
2. Design the email so that it can be read even without images, in case the images are blocked by email clients or fail to download .
3. Assign a fixed width (WIDTH) and height (HEIGHT) to all images.
4. Do not use background images. Some email clients (such as Outlook 2007) have problems displaying these images.

Technical Notes

1. Do not use div layers; use tables instead (except for CleverReach and drag & drop templates). Under no circumstances should you use absolutely positioned div layers.
2. If CSS styles are used, they should be kept inline whenever possible . Outlook 2007 and 2010, for example, can only interpret CSS styles declared in the head to a limited extent. In general, however, CSS styles should be avoided as much as possible, especially class and ID selectors (except for CleverReach templates). Under no circumstances should external CSS files be included.
3. Table width specifications (WIDTH) must be placed in the 'TD' tag and not in the table. Additionally, you should define width specifications directly in the TD attribute, not as a CSS style.
4. Avoid using `rowspan` within tables; instead, use nested tables.
5. If possible, do not position images using float. In particular, inline styles with float are completely ignored by Outlook 2007 and 2010, for example.
6. Use the inline style display:block if you want to align images in your templates (this prevents incorrect spacing in the layout).
7. Do not use percentage values for height specifications, especially for images (except for responsive templates).
8. Keep link text short, otherwise the width of the table / cell containing the link text will automatically adjust.
9. Under no circumstances should you use conversion programs that create HTML documents from image files. The generated HTML code will cause layout issues in many email clients.
10. Image filenames should be simple. Names such as "image_1900_x_1600.jpg" may be displayed incorrectly or not at all in some email programs. You should also avoid using spaces and name images using lowercase letters only (e.g., logo.jpg).
11. Do not include a <title> tag in the template. This is automatically set by the system using the subject line when the email is sent.
12. Do not use animated graphics (e.g., rollover functions or animated GIF files). Outlook, for example, generally does not support this feature .