This document 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.

Note: These guidelines are designed for custom-HTML emails, rather than for the Advanced Mode of sections in template-based campaigns. Although it is possible to use HTML code in mobile–ready templates, there are some limitations. We recommend that if you do intend to use custom HTML for mobile–ready templates, that you use a single-column layout in your design.

Contents

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;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</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 14px in desktop and 15px in mobile version.</font>

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 */
}

Links

div[class="yfix"] a { 
  border: 1px solid blue;
  background: silver;
  color: #fff;
  font-size: 16px;
  text-decoration: none;
}

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>