1
Introduction This document will describe how you can create your own, fully responsive drag and drop email template to use in the email creator. It includes ready-made HTML code that will allow you to copy, paste and use. PLEASE NOTE: This coding guide is intended for users who have experience with HTML coding. Users who are not experienced in coding are recommended to use our pre-made email templates from our extensive library. 2
Standard HTML tags Insert your To (e-mail), From (e-mail), From (name) and Subject. Then choose your Newsletter folder and newsletter from the dropdowns. Basic HTML tags These tags are always required to ensure that the newsletter renders correctly in all modern browsers and email clients. Meta Viewport This tag is for the responsive behavior on mobile devices. It contains instructions for the browser to render the newsletter based on the width of the device screen and manages the zoom function. 3
CSS Media Queries The @media statement is used to set the width of the newsletter when viewed on a mobile device. 4
Important classes for the Email Creator gm-template This class identifies the newsletter as an Email Creator file. There only has to be one of these and it is typically assigned to the first <div> which can be before or within the <body> tag. ui-sortable This class identifies the areas where a new content block may be dropped. This class can be assigned to any element that should accept a new content block, but it should not be placed within an element that already has a gm-element class. *Content blocks will be dropped into areas identified by a red dashed line. 5
gm-element This class identifies a content block that will become the editable area in the Email Creator. Assign this class to the div which should be editable. *A content block is the area in a newsletter that can be dragged, duplicated or edited using the tools. Mousing over a content block highlights it with a blue tool border. 6
Code Guidelines The following code guidelines are recommended to be used in conjunction with best coding practices to ensure that the newsletter renders correctly in modern browsers and desktop email clients. Note: Some of the tags below are automatically injected into the newsletter s code when it is opened in the Email Creator. Additionally, some necessary code is removed when the newsletter is saved and closed. Tags that are automatically injected or removed are marked with A. Image width A An image must have both the inline style width set to 100% as well as the width attribute set to the desired image size. This will ensure that the image is responsive, automatically resizes on small screens, as well as displays correctly in Outlook. The width will be automatically included in the Email Creator based on the content block or containing cell size or the size set in the tool bar. 7
No px on attributes A We found that px on a width or height attribute breaks the layout of some templates in various versions of Outlook for desktop. The attribute is not needed in any of the other browsers or email clients, so it is automatically removed. Note: It is required on styles such as padding: 40px;. Inline max-width If at any stage a specific image should not scale larger than a certain %, then this can be specified by using the max-width inline style value. gm-preserve This class can be used to let the Email Creator know that it should not make any changes to the element with this class. Please use this class only where needed and with stringent testing, as the Email creator only changes code where explicitly required. 8
gte mso 9 This section of commented code is a fix for Outlook for desktop. Side by side columns tend to wrap in Outlook when a certain amount of content is added. Wrapping a table around the section and adding the comment between the columns resolves this. Below is a snippet. The full code can be seen in the example below. gm-element-pad This class allows you to edit the padding of the cell it is assigned to using the top tool bar in the Email Creator. 9
mob_full_width This class need to be present in each element when designing a responsive newsletter. The class forces the cells to take the full width of the device screen. Additional style sheet elements - 3 column template The following styles have been included in the three column template. They are used to force the padding widths of the three cells and their content to ensure that there is no wrapping or other issues in various browsers and devices. Note: The supplied 3 column template has restricted and less padding than single and 2 column templates. This is because of the constraining 650px standard newsletter width. The padding can be removed or edited if that width is increased, but this is not recommended. 10
11
Classes for internal use only data-gm-initial-style A This attribute is used by the Email Creator to keep track of the original style the template was loaded with and allows you to restore the template style to the original state. This attribute is removed when the newsletter is closed. data-video-thumb-width A This attribute is used to keep track of the video thumb size to allow for changes to it. This attribute is removed when the newsletter is closed. data-view, data-gm-type, data-sub-view and data-type A These attributes are used to keep track of various elements that can be edited after they have been inserted. For example, changes to a link s properties from the side menu. This attribute is removed when the newsletter is closed. 12
gm-text-highlight A This class is used to highlight your personalization tags when editing the newsletter. The tag is removed when the Email Creator is exited, the highlights fall away and are replaced with data at sending. data-gm-locale A This is an internal tracking or management tag. This attribute is removed when the newsletter is closed. 13
Structuring your Newsletter The entire body of a newsletter can be structured in a single table. There are three main elements to include in order to build a newsletter discussed below. Repeating the third element will, build your content areas. Consider this newsletter: 14
Element 1 - Main Table The main table is a single row, single column table creating the the frame or foundation of the newsletter. There are three important elements to consider: 1. A div class= gm-template is required to trigger the Email Creator. In this example it has been included in a surrounding div. 2. The width= 650 in the table tag ensures your newsletter does not scroll horizontally in mail clients and browsers. 650px is the accepted industry standard. 3. The gm-editable ui-sortable class in the cell identifies the point where the editable elements of the newsletter will begin. Note: The HTML above is a basic example of the structure required. Add styles attributes the the table and it s tags tags to set an overall style of your newsletter. 15
Element 2 - DIV The div elements in the cell of the main table are the content blocks identified in the Email Creator by the blue tool frame. These blocks can be moved, duplicated or deleted and their content can be edited. 1. The required attribute on this div is the class= gm-element Note: This div is repeated in the main table cell to create the rows of content in your newsletter. Adding additional styles to this div is also acceptable. 16
Element 3 - Content Table (Designer s Canvas) The table within the div is where all the layout and formatting of the content is coded. You can essentially add anything to this area as long as you remain within best practice limitations. The behaviour of this content is governed by the styles and classes created. Attributes for responsive design will have an impact here, changing font sizes and wrapping cells on mobile devices. Elements to consider: 1. A width= 100% on the main table will maintain the integrity of the layout. 2. Padding on the cells improves the visual layout of the newsletter. 17
Structuring your Newsletter - Variation 1 Locking content areas Omitting the class= gm-element from a div will result in that area not responding to the Email Creator. The content will be visible, but you will not be able to move, edit or delete it. This is typically used for a header or footer section where the content will always remain the same. Structuring your Newsletter - Variation 2 Complex content blocks The example above uses a full width editable content block. This is a guideline however, and more complex layouts can be built by creating a base table with multiple columns. Each column may have a <div class= gm-element > which will result in multiple side by side content blocks which can be moved, edited or duplicated. When doing this bear the following in mind: 1. When dragging a content block to a new position in the Email Creator, it will always snap to the dimensions of the ui-sortable class in the div. This typically results in the content block taking the same dimensions as the content block closest to the drop point. 2. Owing to 1. above, you should keep the number of content block sizes to a minimum. A full width block spanning two or three columns is best. 18
Example Code Below is the full HTML for the two row newsletter in the main example above. 19
20
21
22
The Problem: Outlook desktop email clients Note: The issues discussed in this section are relevant to Microsoft Outlook version 2003 and later. Some versions are not affected by all the issues, but assume each one is relevant to one or more version. This section is not relevant to the outlook.com browsers mail client. Outlook uses MS Word to render emails! In 2007 Outlook switched from Internet Explorer s rendering engine to the MS Word engine to render emails. This configuration is still being used. What does that mean? 1. Not all HTML and CSS code is supported Code that is supported by the majority of modern email clients and browsers that is not supported by MS Word will not be supported. This mean that various content or layout elements will be affected. A simple example of this 2. Page breaks and boundaries are inserted In short, just after 1790 pixels from the top of the newsletter Outlook ends the first text boundary, inserts a break and begins the next text boundary. This repeats. Unfortunately these breaks, depending on the layout of your newsletter, tend to stack one on top of the next resulting in your right hand column appearing below the left. 23
The Solution 1. The basic templates available for the Email Creator have been designed for and tested in all supported version of Outlook. In addition to that, the Email Creator injects additional code where necessary to mitigate Outlook problems. Testing is however important. Nested tables can result in the injected code not being at the correct level for the Outlook client to render it. 2. The gte mso 9 fix discussed earlier in this document is used to stop the columns from wrapping. It does however become more complicated when the left and right columns overlap. Keeping the content short, with a read more link, is a better practice and is more useful when tracking content interest. 24
More Outlook Problems 1. Outlook does not format lists (<oi> or <ul>) correctly often affecting the spacing. The safest solution here if lists are that important is to use a table similar to this: 2. Outlook does not automatically fix mismatched rowspan attributes. Most web browsers will automatically align the cell correctly if the rowspan value is higher than the actual number of rows. Outlook will force a space for the missing rows. 3. Outlook has a minimum 2 drink (2px :) requirement on a <td>. For example, if you are using a 1px gif as a spacer or to create a thin line Outlook will force the <td> to be 2px high, in turn making your space or line thicker. 25