Last Update: 2018-10-17

File structure

All files of a single Template must be in an individual folder. Files must be in following stucture:

▢ templatefolder/
  ↳ index.php
  ↳ index.txt
  ↳ index_web.php

//optional//
  ↳ thumb.gif
  ↳ preview.gif
  ↳ detail.php
  ↳ config.xml

  ↳ event_index.php
  ↳ event_detail.php
  ↳ event_config.xml

  ↳ survey_detail.php
  ↳ survey_config.xml

  ↳ form_detail.php
  ↳ form_config.xml

  ↳ sweepstake_index.php
  ↳ sweepstake_detail.php
  ↳ sweepstake_config.xml

  ↳ ▢ text/ (mandatory for multilingual templates)
    ↳ de.txt
    ↳ en.txt
    ↳ ...
  ↳ ▢ otherfolder/ (e.g. for images or included files)
    ↳ ...

Newsletter <head>

  • Newsletters are UTF-8 encoded
  • Basic Styles
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <title><!--TITLE//--></title>

    <style type="text/css">

      @-ms-viewport { width: device-width; }
      body{ -ms-text-size-adjust:100%; }
      img{ -ms-interpolation-mode:bicubic; }
      *{
        font-size-adjust: none !important;
        -webkit-text-size-adjust: 100%;
      }
      a[href^="x-apple-data-detectors:"] {
        color: inherit !important;
        text-decoration: inherit !important;
        font-weight: inherit !important;
      }

      td, table, tr { border-collapse:collapse; }

      a { text-decoration: underline; color:#0099ff; }
      a:hover { color:#0066cc; }
    </style>

  </head>

Table layouts with spacer-images instead of margin and padding

Eventhough CSS layouts have won over table based layouts in the web, HTML email work differently. Gmail, Outlook 2007, Lotus Notes, and many more all have big issues with floated elements, margins and padding. Structural HTML tables are the only reliable way to end up with an email that at least holds together well.

To implement a margin or padding, use a spacer image. This is a transparent gif image with the desired margin or padding as width or height. Normally a spacer image has either a height of 1px and the desired width to get a horizontal margin, or a width of 1x and the desired height to get a vertical margin.

Spacer image

<!--SPACER:width:height//-->
width Width of the spacer image
height Height of the spacer image
Example:
<!--SPACER:10:1//-->
Generates:
<img src="{BaseURL}images/spacer_10x1.gif" width="10" height="1" border="0" alt="" style="width: 10px; height: 1px; display:block;">
{BaseURL} is replaced with the URL of your Template-Folder, and spacer_10x1.gif is generated dynamically on the fly (The folder "images" does not have to exist).

Example with borders and spacings

Borders are best created by defining an extra <td> with the desired width and bgcolor and including a spacer image.
To ensure Outlook displays the correct size, add font-size: 1px; line-height:1px; to the inline css of the wrapping html element.

<table width="600" style="width: 600px;" align="center" border="0" cellpadding="0" cellspacing="0">
  <tr><td bgcolor="#888888" style="height: 1px; font-size: 1px; line-height: 1px;"><!--SPACER:1:1//--></td></tr>
</table>
<table width="600" style="width: 600px;" bgcolor="#ffffff" align="center" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="1" bgcolor="#888888" style="width: 1px; font-size: 1px; line-height: 1px;"><!--SPACER:1:1//--></td>
    <td width="19" style="width: 19px; font-size: 1px; line-height: 1px;"><!--SPACER:19:1//--></td>
    <td style="...">

    Content goes here ..

    </td>
    <td width="19" style="width: 19px; font-size: 1px; line-height: 1px;"><!--SPACER:19:1//--></td>
    <td width="1" bgcolor="#888888" style="width: 1px; font-size: 1px; line-height: 1px;"><!--SPACER:1:1//--></td>
  </tr>
</table>
<table width="600" style="width: 600px;" align="center" border="0" cellpadding="0" cellspacing="0">
  <tr><td bgcolor="#888888" style="height: 1px; font-size: 1px; line-height: 1px;"><!--SPACER:1:1//--></td></tr>
</table>

To ensure the correct format of the <img ..> tags for spacer images, we implemented the template-tag <!--SPACER:w:h//-->, where w stands for width and h for height.

Set a Background Color on a Container Table

Some email clients will ignore a background on the <body> tag, or one that’s set in your style sheet. Having a wrapping table around all your content and setting the bgcolor attribute on it, will work around this issue.

<body style="margin:0; padding: 0;" bgcolor="#eff3f4">
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#eff3f4"><tr>
  <td>&nbsp;</td>
  <td width="600" style="width: 600px;" align="center">

    Content goes here ..

  </td>
  <td>&nbsp;</td>
</tr></table>
</body>

Use inline CSS

  • Do not include external stylesheets via <link..> as mail clients do not load externals automatically
  • Some mailclients will strip out styles from the head-section
  • To override default styles of webmail clients
  • Do not use general css-properties, like font:arial 11px bold;, but declare each css-property used separately, like font-family:arial; font-size:11px font-weight:bold;
<td style="font-family:arial,sans-serif; font-size:11px; color:#333333;">Some text</td>

When to use style in head

As some mailclients will strip out styles from the head-section, you can't use it to layout or style the content. Use styles in the head-section as addition for elements that can't be styled inline, e.g. elements created in WYSIWYG editor, or to set default setting for specific clients.

CSS for mobile

Using media queries we can define CSS styles, which will only be used when the query parameters are fulfilled. Therefore we can target specific device sizes, and customize CSS for each device size as needed. All clients not supporting media queries, will simpy render the normal newsletter layout, without CSS defined in the media queries. (Overview of mobile clients)

To override inline styles and HTML attributes, all styles need to be given the !important attribute.

@media only screen and (max-width: 480px) {
  table.container {
    width: 320px !important;
  }
}

Images

  • Use <!--LAYOUT_URL//--> to get the URL to your template folder
  • style="display:block;" is needed to avoid unwantend margins in Gmail
  • Always define width and height (if not variable) to avoid breaking the layout when images are not loaded yet.
<img src="<!--LAYOUT_URL//-->images/logo.gif" border="0" width="120" height="80" style="width:120px; height:80px; display:block;">

Includes

Parts of a template, which are used multiple times, can be outsourced in separate files. For example, when header and footer areas in the index.php and detail.php are identical. To include those files use <!--INCLUDE:filename//-->.

Multilingual Templates

To allow for multilingual templates, translations can be stored in separate language files, for each language supported, a language file is needed. These language files are saved in the subfolder "text", within the folder of the template. The filename needs to be the 2-letter language code of the language (see table below for supported languages) in the file, extension is ".txt".

[[TagName]]
Text

[[TagName]]
Text
2-letter Code Language
at German (Austria)
be Dutch (Belgium)
bg Bulgarian
bs Bosnian
ch German (Switzerland)
cs Czech
de German
el Greek
en English
es Spanish
et Estonian
fc French (Switzerland)
fr French
hr Croatian
hu Hungarian
it Italian
ka Georgian
lv Latvian
me Montenegrin
mk Makedonian
nl Dutch
no Norwegian
pl Polish
pt Portugese
rm Romansh
ro Rumanian
ru Russian
sk Slovak
sl Slovenian
sq Albanian
sr Serbian
sv Swedish
tr Turkish
uk Ukranian
zh Chinese

To insert a translation use <!--TEXT:TagName//-->.

To display different images for different languages you can use the template-tag <!--LNG//-->, which returns the language of the current newsletter.

<img src="<!--LAYOUT_URL//-->images/picture_<!--LNG//-->.jpg">
<img src="<!--LAYOUT_URL//-->images/<!--LNG//-->/picture.jpg">

Control Structures

IF/ENDIF

The HTML-Code between <!--IF:Variable//--> and <!--ENDIF:Variable//--> will only be shown, if the variable is not empty.

<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <!--IF:CONTENT_PICTURE//-->
    <td width="200" valign="top"><img src="<!--CONTENT_PICTURE//-->" width="200"  /></td>
    <td width="20"><!--SPACER:20:1//--></td>
    <!--ENDIF:CONTENT_PICTURE//-->
    <td valign="top">

      Article title, teaser and link goes here ..

    </td>
  </tr>
</table>

The check for <!--IF:CONTENT_CTR//--> will always validate as true, as there is always a link to a landing page. Check for <!--IF:CONTENT_CTRNAME//--> instead.

IFNOT/ENDIFNOT

The opposite, to show HTML-Code if a variable is empty, is <!--IFNOT:Variable//--> and <!--ENDIFNOT:Variable//-->

Identical IF/IFNOT controls may never be nested. It won't throw an error, but will likely mess up the HTML Code. Remember that <!--INCLUDE:filename//--> wrapped with IF/IFNOT controlls may also not contain identical controlls inside of the included file.

Address data

To insert recepient address data in the template, use <!--ADDRESS:AddressField//-->, replacing AddressField with the Address-Fields mentioned below.

The following Address-Fields can be used:
Anrede, Titel, Vorname, Nachname, Firma, Funktion, Strasse, PLZ, Ort, Land, Email, Telefon, Mobiltelefon, Internet, Fax, and for custom fields <!--ADDRESS:Attribute1//--> to <!--ADDRESS:Attribute20//-->

Additionally the following notation can be used for address data, the name of the address field enclosed by double square brackets, like [[AddressField]].
Please be advised that control structures cannot be used with this notation.

Accountmanager data

Address data of the account manager, can also be used in the template. For this case, we included a template tag, which changes allows the placeholder to access the data of the account manager. The placeholders are the same as for normal recepient data, but the placeholder has to be included in the following tag.

Use <!--ACCOUNTMANAGER:AddressField//--> to insert address data of the associated accountmanager.

<table>
  <tr>
    <td valign="top">
      <b>Ihr persönlicher Ansprechpartner<br />
      <!--ACCOUNTMANAGER:Vorname//-->
      <!--ACCOUNTMANAGER:Nachname//-->
      </b><br />
      T: <!--ACCOUNTMANAGER:Telefon//--><br />
      <a href="mailto:<!--ACCOUNTMANAGER:Email//-->">E-Mail senden</a>
    </td>
  </tr>
</table>

4 digit year

To include the current year, represented by 4 digits, in the template, a special tag should be used.

Tag

<!--YEAR//-->

Forms sent

To differentiate between an unsent form and a sent form, the following tag can be used. Control structure will validate not empty if form is sent. and empty if form is unsent.

Only used with IF/IFNOT controls.

Tag

<!--STATFORM//-->

Für Rückfragen stehen wir Ihnen jederzeit gerne unter support@eyepin.com zur Verfügung.