There are the following formats for email messages:

  • Plain text (only)
  • HTML (only)
  • Multipart (plain text + HTML)

HTML emails are the most popular format to create engaging and interesting email newsletters. HTML email messages offer many advantages compared to plain text email messages.

The Content Management (Email) feature currently only supports the creation of HTML email messages. Multipart email messages or plain text email messages are not supported yet.


Advantages of HTML Email Messages​

HTML email messages offer the following advantages:

  • ​Images and formats Within HTML email messages, you are able to include images in your newsletters. Furthermore, you can apply different formats and styles to your content. This way, your email messages are more interesting and engaging for your contacts.
  • ​Hyperlinks Within HTML email messages, you are able to change the link text of a URL. This way the link is not visible to the recipients. This is helpful when a link redirects the recipient to a Mapp Engage web address. The recipient does not directly see the Mapp Engage address in the email message.
  • Performance:​ HTML email messages allow you a detailed performance analysis for all important KPIs. With the help of a tracking pixel, Mapp Engage can easily identify which recipient opened an email message. Furthermore, you can track links in HTML email messages.


HTML Framework Construction​

The HTML framework consists of the following parts:

  • HTML head
  • HTML body

An HTML framework builds the scaffold of your email message.

In the head, you define styling information and media queries for responsive behavior. In the body, you define the table skeleton (if necessary) and the block area. Both let you decide how your email message looks in the email clients inbox and which types of content the message creator can use to actually build his message.


HTML Head​

The head of a framework defines settings that apply to the whole email message. Global settings can therefore be modified without editing multiple email templates or email messages.

Following information is defined in the head:

  • Default information such as content type, character encoding, and format detection.
  • Display customizations for different email clients, for example, link style adaptions for links displayed in the iPhone email client.
  • Responsive design behavior for different devices, for example, display on a mobile phone or on a tablet.


Example

This example shows you how an HMTL framework head for an email message could be defined.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no"/>

<title> My Company </title>

<style type="text/css">
 /* Re-style iPhone automatic links (eg. phone numbers) */
    .applelinks a {color:#222222; text-decoration: none;}    
    ...

@media screen and (max-width:639px) and (max-device-width: 1100px) {

    /* max-device-width: 1100px >> for devices with pixel-rario: 3 */

    /* Height */
    *[class].hauto        {height: auto !important;}
    *[class].h40px         {height: 40px !important;}

 ...
}
</style>
...
</head>
CODE


HTML Body​

The body of a framework defines the part of an email message that contains the content that is visible to the email recipient.

That means the body is the area that displays your content in the final email message.

Following information is defined in the body:

  • Block areas that define where one or more blocks can be inserted.


Example

This example shows you how a block area with one block could be defined within the body of a framework.

...
</head>

<body>
 $tplBlockArea.begin('"name" : "block-area", "block-area-id" : "123"')
 $tplBlockArea.end()
</body>
CODE