Dans cette section :

Créer des emails avec votre propre code HTML.

Updated:
Le contenu de cet article a été mis à jour et la traduction est en cours. Nous vous recommandons de vous référer à la version anglaise jusqu'à ce que la traduction soit intégrée et que ce message soit supprimé.

If you use your own HTML code rather than an Emarsys template to design your emails, the campaign settings, email preferences and testing utilities are the same, but the content editor is different. 

Here we describe the main features of the HTML editor, and offer some best practice guidelines for creating HTML emails.

Contents

The HTML editor

The Emarsys HTML editor is a standard editor with a number of formatting options available on the toolbar.

Editing the text

You can toggle between the WYSIWYG editor and the HTML source code by clicking .

You can also switch between the HTML and Text versions of the email via the corresponding tabs.

To enter a link in the text version, proceed as for the HTML version. After you have inserted a URL, do not forget to add a description above the inserted URL. This also applies to links leading to registration forms and to the Additional features pages.

Linking text

To insert a link underlying a word or phrase, select the text string and click Insert Link. This leads you to the Insert Link window, where you can define the link options:

  1. Enter an internal link description
  2. Add the link to a Link category (for analysis and segmentation)
  3. Decide what type of link is required. For Trackable links, enter the URL in the corresponding field. From the drop-down menu you can select http or https (an SSL, Secure Socket Layer).

Note: All links added this way are trackable, i.e. each click on the link is counted and displayed in the email analysis. You can add as many trackable links as you want to your email.

To link a text with a previously entered URL, tick Use existing link and select the URL from the drop-down menu. The internal link name stays the same as when you last used that link (it is after all the same URL). If you want to use the same link but a different link description, repeat the steps given above.

If you want to use a Landing page, tick Landing page and either select one or create a new one. To insert a link to a registration or contact form, tick Forms and select a form from the drop-down menu. The same applies if you want to provide a Tell-a-friend or Unsubscribe feature in your email. Please note that the Tell-a-friend feature forwards the entire email (not just a particular section).

Every email has a so-called browser link at the top. It ensures that contacts with email clients unable to display HTML can see your emails in their browser. They see a short text followed by the link to the online version of the email. When this link is clicked (or copied and pasted into the browser) it leads the contact to your email. If you want to add this text and the link (in addition to the existing one on top of your email) to one of the sections, you must select Online versionfrom the Additional functions drop-down menu.

If you want to add a link which is not trackable, tick Simple link and enter the URL in the Insert URL field, then click Insert.

When entering an email address, select mailto from the drop-down menu and enter the email address into the text-entry field, then click Insert.

Using emojis

Emojis are available in the subject line of custom HTML campaigns composed in both the old and the new editors. You can access the old editor here at the Content Creation tab:

 

Guidelines for HTML emails

Here we offer some best practices for content design and coding for HTML email. Many of these rules are simply a matter of adhering to HTML 3.2 specifications. We have written these rules down for your convenience and subsequent referral so that the creation of your email campaign will proceed as smoothly as possible from a production standpoint.

Developing HTML for email requires more precision and adherence to guidelines than developing content for websites, since the code can be rendered differently by different mail clients and on different web browsers. To make sure you are using code that is not dependent on browser-specific tags, check your template on the latest versions of Microsoft Internet Explorer, Firefox, Chrome and Safari.

Also, if your company uses a non-standard email client, please check the HTML code on that platform as well. Emarsys can also provide a range of platform testing services; please contact Emarsys Support for more information.

Layout

Pixels vs. Points

When designing emails, we recommend always to use px when defining heights and widths, rather than pt or em or even rem.

Maximum Width Enclosing Email Content

Some email clients and/or hardware configurations can only show 600 pixels of width at one time. An HTML email without any set width may look good on Outlook Express on a high resolution monitor, but low-end users will not be able see the entire width of the email. The recommended maximum width of all emails is 600 pixels wide.

Good example:

    <table width="600" align="left">
      <tr>
        <td>[…contents of email…]</td>
      </tr>
    </table>

Bad example:

[…contents of email…] or
    <table align="left">
      <tr>
        <td>[…contents of email…]</td>
      </tr>
    </table>

Tags with Limited Support

A number of tags and functionality are only supported by a limited number of browsers and email clients and are NOT recommended for HTML emails. They will likely cause errors in many email clients and should only be used after you have tested them and considered the possible ramifications. These include HTML 4/5 tags, CSS stylesheets in the HML head of the email, JavaScript, Forms, and Flash.

CSS

Additionally, a number of points apply when using CSS for desktop email versions (mobile browsers are different due to their more advanced CSS support).

  • Inline CSS is supported, but is limited to the use of font styles and size and should be included as HTML in case the client ignores it.
  • CSS should not be used for positioning.
  • Use of external style sheets is not supported.
  • Using CSS to reference background images is not supported:
  • Example: background:#e76f00 url(im/btn_orange.gif) repeat-x center center

Quick Tips

  • Most clients will not read the <head>, <meta> or <title> tags. However, these can be useful if you offer an online version of the email.
  • Do not use <div>, <tbody> or <p> tags.
  • Do not use <embed> tags.
  • Do not include attributes with “ tags.
  • Use <b> and <i> instead of <strong> and <em>.
  • Always close tags.
  • JavaScript tends to be stripped out or ignored in most email browsers.
  • Do not use GENERATOR tags in the HEAD of the message such as META tags.

Good example:

    <tr>
      <td align="left">
        <font face="verdana, arial, sans-serif">Text goes here.</font>
      </td>
    </tr>

Bad example:

    <div align="left" style="font-family: verdana;">Text goes here.</div>

The < Body > Tag

Some email clients can modify the body tag in emails, leading to formatting issues. You should not include any attributes in the body tag that you don’t mind not being displayed, since they may not be rendered. For example, if you are using light text on a dark background, be sure to set values such as background color in the bgcolor attribute of the table tag.

Good example:

    <table bgcolor="#ffffff" width="600">
      <tr>
        <td align="left">[…contents of email…]</td>
      </tr>
    </table>

Bad example:

    <body bgcolor="#ffffff">
      […contents of email…]

WYSIWYG Editors

WYSIWYG (What You See Is What You Get) editors often automatically create browser-specific or otherwise non-standard HTML code. If using a WYSIWYG editor, please remove browser-specific or other non-standard HTML coding and review the code in a program such as Notepad or Dreamweaver to make sure that it meets our guidelines.

Good example:

        <center><br>
          <table bordercolor="#333366"
          cellspacing="0" cellpadding="0"
          width="730" align="center"
          bgcolor="#ffffff" border="8">
            <tr>
            …

Bad example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <title>HTML Codes - Table of ascii characters and symbols</title>
    <META http-equiv=Content-Type content="text/html; charset=windows-1252">
    <META http-equiv=PICS-Label content='(PICS-1.1 "http://www.rsac.org/ratingsv01.html" l gen true for "http://www.ascii.cl" r (n 0 s 0 v 0 l 0))'><link href="HTML Codes - Table of ascii characters and symbols_files/ascii.css" type=text/css rel=stylesheet>
    <META content=all name=robots>
    <META content=Global name=distribution>
    <META http-equiv=Content-Script-Type content=text/javascript>
    <META http-equiv=reply-to content=webmaster@10sites.com>
    <META content="MSHTML 6.00.2600.0" name=GENERATOR>
    <body text=#333366 vLink=#3300ccaLink=#cc0033 link=#cc0033 bgColor=#ffffff>
      <center><br>
      <table bordercolor=#333366 cellspacing=0 cellpadding=10 width=730 align=center bgcolor=#ffffff border=8>
     <tbody>
      <tr>
       …

Syntax

All attribute values must be defined with double quotes and use the proper syntax such as "#" before color attributes and ";" after style elements.

Good example:

    <td align="center" bgcolor="#000000" valign="middle">

Bad example:

    <td align=center bgcolor=000000 valign=middle>

Special Characters

Many email clients are unable to correctly render raw 8 Bit characters. Consequently, you must encode them with their corresponding numeric entities (ASCII Character Codes ot HTML codes). For example, the copyright symbol © should be written &#169 or &copy;.

Good example:

    Copyright &#169 2014 Emarsys.

Bad example:

    Copyright © 2014 Emarsys.

Image Maps

Image Mapping is when you redefine the area that is linked within an image. This is performed with the <map> HTML tag. When using Image Maps, ensure that each separate map is contained within its own <td>, since multiple maps in the same <td> can cause issues in some platforms (currently Apple Mail and Outlook 2007). Image Maps are an excellent design technique to achieve a visually pleasing marketing message, but only when used correctly. Please also note that image maps involve a lot of code and therefore have an impact on the size of your message.

Encoding

The optimum encoding for email in most languages is UTF-8. UTF-8 is widely supported, and with the exception of some multi-byte languages, should be the default encoding for creative assets.

Table support

General

Some browsers and email programs can have problems with content that exists outside of <td>tags. Make sure that all content for the email sits within the table cell tags (<td>s). Make sure all <td>s have a width assigned and that the width is not "0".

Good example:

    <table bgcolor="#ffffff" width="250"> 
      <tr>
        <td width="200">
          Here is some text.<br />
          <img src="images/spacer.gif" 
          width="200" height="12" vspace=”0“ 
          hspace=”0” border="0" 
          style="display:block;"><br />
          Here is some more text.
        </td>
      </tr>
    </table>

Bad example:

<table bgcolor="#ffffff" width="250">
      Here is some text.<br />
      <tr>
        <td width="200">
          <img src="images/spacer.gif" width="200"
          height="12" border="0"><br />
          Here is some more text.<br />
        </td>
      </tr>
    </table>

ROWSPAN and COLSPAN

Keep the use of rowspan and colspan to a minimum since they limit template flexibility. Furthermore, some clients do not interpret them correctly, causing lines and borders between different

s and . In certain cases, options such as nesting a <table> within another <table> cell offer a better solution.

Good example:

    <table border="0" cellpadding="0"
    cellspacing="0" width="130">
      <tr>
        <td width="130">
          <img height="20" width="130" vspace=”0“ hspace=”0”
          src="magnolia.gif" border="0"
          style="display:block;">
        </td>
      </tr>
      <tr>
        <td width="130">
          <table border="0" cellpadding="0"
          cellspacing="0" width="130">
            <tr>
              <td width="60">
                <img height="1" width="60"
                src="magnolia.gif" border="0">
              </td>
              <td width="70">
                <img height="1" width="70"
                src="magnolia.gif" border="0">
              </td>
            </tr>
            <tr>
              <td width="60" valign="top">text goes
              here</td>
              <td width="70">
                <table border="0" cellpadding="0"
                cellspacing="0" width="23">
                  <tr>
                    <td width="70" valign="top">
                    Text goes here</td>
                  </tr>
                  <tr>
                    <td width="70" valign="top">
                    Text goes here</td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>

Bad example:

    <table border="0" cellpadding="0"
    cellspacing="0" width="130">
      <tr>
        <td colspan="2">
          <img height="20" width="130" src="magnolia.gif"
          border="0">
        </td>
      </tr>
      <tr>
        <td width="60" rowspan="2"
        valign="top">Text goes here</td>
        <td width="70">Text goes here</td>
      </tr>
      <tr>
        <td width="70">Text goes
        here</td>
      </tr>
    </table>

Widths and Heights

Setting an exact width in all table elements adds stability to your design and will more likely render consistently across email clients and can make the email render faster. Setting the whole table width to 100% is important for mobile tempates to ensure that the table uses the full screen display. Make sure all columns have a width assigned and that the width is not "0". Making sure columns have a set pixel width helps to ensure table structure. Furthermore, do not mix percentage widths with pixel widths when defining column widths.

Good example:

   <td width="250" height="100">
     <img src="logo.gif" width="250"
      height="100" vspace=”0“ hspace=”0”
      alt="Company Name" border="0"
      style="display:block;"/>
   </td>

Bad example:

    <td width="100%">
      <img src="logo.gif"/>
    </td>

Empty Table Cells

Older browsers have problems with empty Table cells (<td>s). Make sure to put something in every table cell. A 1×1 transparent image inserted into the empty table cell solves this issue. Do not use   as a filler. Other empty tags can also be an issue. Once a design is completed it is always a good idea to review and clean up the code to avoid any problems down the line.

Good example:

    <td width="200">
      <img src="images/spacer.gif" width="200"
      height="1" vspace=”0“ hspace=”0” border="0"
      style="display:block;"/>
    </td>

Bad example:

    <td width="200"> </td>
    -
    <td width="200"></td>

Vertical Text Spacing

<p> tags render inconsistently across emails, frequently adding more or less space than desired. Setting the amount of white space with a "spacer.gif" image will set the spacing to an exact value and achieves a more consistent end-user experience. For large amounts of text, use <br /> tags to achieve spacing between blocks of text.

Good example:

    <tr>
      <td width="200">Here is some text.<br>
        <img src="images/spacer.gif"
        width="200" height="12" vspace=”0“
        hspace=”0” border="0" style="display:block;"><br />
        Here is some more text.
      </td>
    </tr>

Bad example:

    <p>Here is some text.<p/>
    <p>Here is some more text.</p>

Spacing Between Elements

To achieve spacing between elements avoid using cellpadding, cellspacing or margin paddingas they are not universally supported. Instead, use transparent gifs within a table structure for more precision.

Good example:

    <tr>
      <td width="200" height="10">
        <img src="images/spacer.gif" width="10"
        height="10" vspace=”0“ hspace=”0”
        border="0" style="display:block;">
      </td>
    </tr>
    <tr>
      <td width="200">Here is some
      text.
      </td>
    </tr>

Bad example:

    <tr>
      <td width="200" style="margin-top:
      10px;">Here is some text.</td>
    </tr>
    - or -
    <table width="640" cellspacing="10"
    cellpadding="2">

Defining Colors

When defining colors, the six-digit hexadecimal color should be referenced.

Good example:

    <font color="#7bc618">email</font>

Bad example:

    <font color="green">email</font>

Background Color

Certain email software packages strip out values appearing in the body tag; setting the color in the table ensures color settings will appear consistently.

Good example:

    <td bgcolor="#9c7bbd">

Bad example:

    <body bgcolor="#9c7bbd">

Alignment

Setting alignment value in table elements adds stability, as default values may not render properly in all email clients.

Good example:

    <table width="600" align="center">
      <tr>
        <td align="left" valign="top"
        width="600">Text goes here</td>
      </tr>
    </table>

Bad example:

    <table>
      <tr>
        <td>Text goes here</td>
      </tr>
    </table>

Tag Formatting

Closing Tags

All tags must be matching pairs, opening and closing. Validate your code.

Good example:

    <font face="arial, helvetica,
    verdana">click here!</font>
    <font face="times, garamond">For your
    shopping needs</font>

Bad example:

    <font face="arial, helvetica,
    verdana">click here!…
    <font face="times, garamond">For your
    shopping needs…

Tag Case

All attributes must be either upper case or lower case. Do not mix both.

Good example:

    <b>say something bold</b>

Bad example:

    <b>say something bold</B>

Tag Nesting

Make sure that all tags are nested properly (i.e. if multiple tags are used, they will need to be closed in the proper order).

Good example:

    <i>
      <b>say something bold and exciting</b>
    </i>

Bad example:

    <i>
      <b>say something bold and exciting
      </i>
    </b>

Quoting Values

All attribute values must be defined with double quotes.

Good example:

    <td align="center" bgcolor="#000000" valign="middle">

Bad example:

 </td> <td> 
    <td align=center bgcolor=#000000
    valign=middle>

Font Face and Size

Not all users have every font in their system; specifying multiple fonts allows you to choose the fonts you’d prefer the user to see. If the specified fonts or font types are not found, text will render in the user’s default font. Standard Fonts sizes (1, 2, 3…) will look quite different between different browsers and email platforms. Emarsys suggests a workaround using an inline style tag as well, with a size defined in pixels for a more consistent look. style="font-size:12px;"

Good example:

    <font face="arial, helvetica, 
    sans-serif" style="font-size:12px;"
    size="2">email</font>

Bad example:

    <font face="arial" size="2">email</font>

Images

Size

The best practice is to keep an email size under a total of 49KB, or longer download times will be experienced and messages will have lower response rates. Email content and images should be optimized to the minimum file size. The combined size of image files referenced should not exceed 500KB.

Border

Images that are linked and do not have the border attribute set to zero will display a bold blue line around the edges, which doesn’t look very good with some templates and can throw off the table structure. Make sure to set border="0" for all images to prevent this.

Good example:

    <img src="image.gif" width="1"
    height="1" vspace=”0“ hspace=”0”
    alt="Descriptive text here" border="0"
    style="display:block;">

Bad example:

    <img src="image.gif" width="1"
    height="1" alt="Text here">

Height and Width

Always include height and width attributes for all images. Designating the size attributes for an image will affect the time it takes for an email to download. If no height or width attributes are set for an image, the image must fully download before the email client’s HTML interpreter can render the rest of the page. For optimum download speed, set the height and widthattributes of all images to absolute values for desktop versions (percentages should still be used for mobile versions). Images should be used at their actual size. Resizing an imaging using HTML properties will be ignored in email clients such as Outlook 2007 and will likely cause errors in the table’s structure.

Good example:

    <img src="image.gif" width="10"
    height="10" vspace=”0“ hspace=”0”
    alt="text here" border="0"
    style="display:block;">

Bad example:

    <img src="image.gif" alt="Text here" border="0">
    - or -
    <img src="image.gif" width="50%"
    height="50%" alt="Text here" border="0">

Alternative Text

When viewing HTML emails while offline, users will see a broken image or image placeholder rather than the image intended in online viewing. To make the email easier to view, be sure to enter a description of the image in the alt tag. Please make the alt tag description something that the recipient would understand (i.e. "Flowers only £9.99" instead of "flower image 22"). Note that not all clients show the alternative text, and show their own error messages instead (e.g. Outlook).

Good example:

    <img src=”headline1.gif” width=”1”
    height=”1” vspace=”0“ hspace=”0”
    alt=”Save today on Airline tickets!”
    border=”0” style=”display:block;”>

Bad example:

    <img src=”image.gif” width=”1”
    height=”1” border=”0”>

Image Naming

It is always a good idea to have images that are intuitively named, if only for your own media management. We recommend to use one word, lowercase names, with no underscores, for all images.

Good example:

    <img src=”magnolia.gif” width=”50”
    height=”50” vspace=”0“ hspace=”0”
    alt=”Magnolia Bouquet” border=”0”
    style=”display:block;”>

Bad  example:

    <img src="image.gif” width="50"
    height=”50” border=”0”>

Default Blocking of Images by Various ISPs

For the most part, there is not much that can be done coding-wise to combat the issue of ISPs that block images by default. We suggest incorporating the following best practices: – Provide informative alt-tags for images so that those will be displayed should the images be blocked.

  • Use a clean layout/template for effective email degradation.
  • Place "Add to Address book" verbiage at the top of emails for Welcome messages or "Having trouble viewing this email" link in other emails.

Animated GIFs

Many of our customers do make the use of animated GIFs. However, close attention to file size must be given as animated GIFs can become file size heavy and affect download time. Also, some browsers such as Outlook 2007 do not render them properly and will only display the first frame of the GIF. Thus, the first frame should be relevant enough to work in the message.

Background Images

Background images are not universally supported in all email clients, such as Outlook 2007. It is recommended that background images not be used at all for HTML emails but if they are incorporated within a design they should be used in such a way that if they do not appear it does not greatly affect the design or hamper the intent of the displayed message. If text is displayed on top of a background image, it is good practice to also fill the cell with a background color which will appear when the image does not. Another workaround is to simply create an image that includes the background and text and place this within the table cell.

Good example:

    <td background=”images/red_pattern.gif”
    bgcolor=”#ff0000”> Hurry! Sale Ends
    Saturday!</td>
    - or -
    <td width="100" height="50">
      <img src="sale.gif" width="100"
      height="50" vspace=”0“ hspace=”0”
      alt="Hurry! Sale ends Saturday!"
      border="0" style="display:block;"/>
    </td>

Bad example:

    <td background="images/red_pattern.gif">
      Here is some text.</td>

Style Use in Image Tags

When using image tags it is important to use styles correctly, and include user friendly alternative descriptions of the image in case it is not displayed correctly by using alt= for the text. In addition, when using non-floating images you should always include the display:block style in images to ensure that there are no gaps after the image, or other alignment issues. Finally when linking to your images you should always make sure that you use absolute paths, and not relative paths.

Good example:

    <img 
    src="http:/www.site.com/headline1.gif" 
    width="100" height="50" vspace="0" 
    hspace="0" alt="Save today on Airline 
    tickets!" border="0" 
    style="display:block; font-family: 
    arial, sans-serif; font-size:20px; 
    font-weight:bold; color:#000000;">

Bad example:

    <img
    src="http:/www.site.com/headline1.gif"
    width="100" height="50" vspace="0"
    hspace="0" alt="Save today on Airline
    tickets!" border="0">

Mobile-optimized custom HTML

This section outlines how to adapt the HTML code of an email so that it behaves in the same way as the mobile–ready templates created by Emarsys.

Technical Approach

If you want to send a mobile-ready email to your customers, the easiest way is to design a single column layout and use a style sheet to make changes specific to mobile devices. This allows for the content to be selectively displayed based on how the client accesses the content. This can be done by placing a media query section inside the <style> element in your HTML code:

@media (max-device-width:400px) and (-webkit-min-device-pixel-ratio:1.1) { /* MOBILE CSS GOES HERE */ }

Everything you put between the curly brackets will only be visible on mobile devices. Here you can:

  • Define the width of the email to fit mobile devices (although we recommend using width:100% rather than a fixed value in pixels due to the wide variety of screen sizes available today.
  • Selectively hide or show sections of the email.
  • Make the default font size, buttons and links bigger.
  • Adjust the images width to fit the screen.
  • Replace images with other images specifically for display on mobiles.

Below is an example of some HTML code containing a media query and a mobile CSS, with comments in the code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.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>
<title></title>
<meta name="viewport" content="initial-scale=1, user-scalable=yes">
<!--[if !mso]><!--><meta http-equiv="X-UA-Compatible" content="IE=edge" /><!--<![endif]-->
<style type="text/css">
/* Media Query - Breaking point: 400px CSS width - for more details please have a look at the device list on http://mydevice.io/devices/ - To force iPhone 6(S) Plus / 7 Plus to show the mobile version, this value needs to be changed to 414px */
@media only screen and (max-width:400px) {
/* Stretches the container that contains the content to 100% */
.fw { width:100% !important; min-width:0 !important; }
/* Hide content in mobile version */
.mh { display:none !important; }
/* Class that's needed if a desktop image gets replaced by an alternative image in mobile version */
.mhi { display:none !important; max-height:0; }
/* Stretch image to full available width */
.image { width:100% !important; height:auto !important; }
/* Center align text - Applied on td tags (Caution: this is not working with tables or images! - For this case please use class .comt) */
.com { text-align:center !important; }
/* Left align text - Applied on td tags (Caution: this is not working with tables or images! - For this case please use class .lomt) */
.lom { text-align:left !important; }
/* Center align block elements - Examples: table, img */
.comt { margin:0 auto !important; }
/* Left align block elements - Examples: table, img */
.lomt { margin:0 auto 0 0 !important; }
/* Default font size on mobile (Caution: this is just applied on font tags!) */
font { font-size:17px !important; }
/* Other font sizes that can be used in mail (headlines, etc. for example - either in td or in font tag) */
.h1 { font-size:24px !important; }
.h2 { font-size:20px !important; }
.small { font-size:15px !important; }
.xsmall { font-size:13px !important; }
}
<!--
/* Color values of the following CSS can be changed */
body { margin:0; padding:0; width:100%; background:#cccccc; -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }
a, a:active, a:visited, .yshortcuts, .yshortcuts a span { color:#000000; text-decoration:none; font-weight:normal; }
a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }
.ReadMsgBody { width:100%; }
.ExternalClass *, .b-message-body { line-height:100%; }
.ExternalClass { width:100%; }
table th { padding:0; Margin:0; border:0; font-weight:normal; vertical-align:top; }
-->
</style>
<!--[if gte mso 9]>
<style type="text/css">
/* Styles needed for Outlook 2007 to 2016; the additional XML code can improve the display of the mails when using 120dpi display mode */
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0; }
table td, table th { border-collapse:collapse; font-size:1px; line-height:1px; }
.lh { line-height:normal !important; }
<xml>
 <o:OfficeDocumentSettings>
  <o:AllowPNG/>
  <o:PixelsPerInch>96</o:PixelsPerInch>
 </o:OfficeDocumentSettings>
</xml>
</style>
<![endif]-->
</head>
<body>
<!-- Main background color (bgcolor attribute of the following <table>-tag can be changed) -->
<table cellspacing="0" cellpadding="0" border="0" width="100%" height="100%" bgcolor="#cccccc">
    <tr>
        <td width="100%" align="center" valign="top">
            <!-- Width of content (variable) -->
            <table cellspacing="0" cellpadding="0" border="0" width="600" style="width:600px; min-width:600px;" bgcolor="#ffffff" class="fw">
                <tr>
                    <td align="center" class="h1"><font face="Arial, Helvetica, sans-serif" style="font-size:14px; color:#000000;">CONTENT</font></td>
                </tr>
                <!-- For hiding elements in mobile version please use class "mh" -->
                <tr class="mh">
                    <td align="center"><font face="Arial, Helvetica, sans-serif" style="font-size:14px; color:#000000;">This text won't be displayed in mobile version</font></td>
                </tr>
            </table>
        </td>
    </tr>
    <!-- This <div> is needed for Gmail app to avoid the display of a shrunk pseudo mobile version -->
    <div style="display:none; white-space:nowrap; font:15px courier; line-height:0;">                                                           </div>
</table>
</body>
</html>

Setting the email’s width

If you are using the basic code provided on this page, there is already a width of 600px for the content set. This value can be changed, but we recommend keeping the width between 550px and 650px (this value is for the desktop version only).

<table cellspacing="0" cellpadding="0" border="0" width="600" style="width:600px; min-width:600px;" bgcolor="#ffffff" class="fw">

For mobile versions, the defined class "fw" stretches the content to 100% of the available screen area. This class was already defined in the Media Query in the CSS block, if you are using our basic code:

.fw { width:100% !important; min-width:0 !important; }

Showing and hiding sections

You can add an "mh" CSS class (mobile hidden) to apply to elements that you want to hide for mobile users (this class is already defined in the basic code above):

.mh { display:none !important; }

EXAMPLES

<tr class="mh">
    <td align="center"><font face="Arial, Helvetica, sans-serif" style="font-size:14px; color:#000000;">This text won't be displayed in mobile version</font></td>
</tr>

<font face="Arial, Helvetica, sans-serif" style="font-size:14px; color:#000000;" class="mh">This text won't be displayed in mobile version</font>

<img src="http://suite11.emarsys.net/custloads/555020521/Ulli/custom_html/desktop.png" border="0" style="display:block;" class="mh">

Mobile Formatting

You can override the desktop appearance of the message by adding a rule to the mobile CSS section. Generally you can override any style there. We recommend using the <font> tag for styling text elements (default font size and classes for mobile version are already defined in the basic code on this page).

Mobile CSS code:

font { font-size:17px !important; }
.h1, .h1 font { font-size:24px !important; }
.h2, .h2 font { font-size:20px !important; }
.small, .small font { font-size:15px !important; }
.xsmall, .xsmall font { font-size:13px !important; }

EXAMPLES

<font face="Arial, Helvetica, sans-serif" style="font-size:14px; color:#000000;">This text has a font size of 14px in desktop and 17px in mobile version.</font>

<font face="Arial, Helvetica, sans-serif" style="font-size:14px; color:#000000;" class="h1">This text has a font size of 14px in desktop and 24px in mobile version.</font>

<font face="Arial, Helvetica, sans-serif" style="font-size:14px; color:#000000;" class="small">This text has a font size of 1

Font size and formatting

div[class="yfix"] p {
  font-size: 14px;   /* Bigger text */
  color: blue;       /* Changing color /
  text-align: left;  /* Always align paragraph to left */
  line-height: 20px; /* Define the height of the lines */
}

Image Resizing

Add class="image" to the referenced <img> tag, to apply the changes. Class "image" is already available in the basic code:

.image { width:100% !important; height:auto !important; }

<img src="http://suite11.emarsys.net/custloads/555020521/Ulli/custom_html/desktop.png" border="0" style="display:block;" class="image">

Replacing Images

To replace an image in the mobile version, there is an additional CSS class in the Media Query needed.

Note: This technique has been tested in many email clients and is working properly in most of them. But, as webmail providers such as Gmail, Yahoo, Outlook.com, etc. change the processing of HTML code continuously, we can’t guarantee that this is always working.

.mhi { display:none !important; max-height:0; }

The first <img> tag inserts the desktop image. If the mail is shown on a mobile device, the desktop image gets hidden and the mobile image (defined in the second <img> tag) will appear instead. The link tag around the image is optional.

<tr>
    <td align="center">
        <a href="http://www.emarsys.com/" target="_blank">
            <img src="http://suite11.emarsys.net/custloads/555020521/Ulli/custom_html/desktop.png" width="580" border="0" style="display:block;" class="mhi">
            <!--[if !mso 9]><!--><img src="http://suite11.emarsys.net/custloads/555020521/Ulli/custom_html/mobile.png" style="mso-hide:all; width:0; height:0; display:block;" border="0" class="image"><!--<![endif]-->
        </a>
    </td>
</tr>

Emarsys Loyalty

Améliorez la Customer Lifetime Value tout au long du parcours client avec plus d’expériences personnalisées et moins de remises.

You may also be interested in:

Articles associés