Email Creator Coding Guidelines Toolbox The following information is needed when coding your own template from html to be imported into the Email Creator. You will need basic html and css knowledge for this toolbox to be effective. There are three steps involved when coding for the Email Creator.
Contents 1. Introduction... 1 2. Setting up code for templates... 2 3. Setting up mobile responsive code for templates... 3 4. Email creator tabs... 4 5. Conclution... 5 6. Cheatsheet... 6 2
1. Introduction The following information is needed when coding your own template from html to be imported into the Email Creator. You will need basic html and css knowledge for this toolbox to be effective. There are three steps involved when coding for the Email Creator. Please note that I will supply snippets of code screenshots in order to make the process as simple as possible. Also note that there are limitations to certain areas in the these steps that I will point out with a NB. I will also supply tips in which you can use to make certain elements work more effectively. 2. Setting up code for templates Firstly, set up your code by simply using <table> tags and <style> inline tags, remember to use deprecated values such as eg: <td width= 100 >Hello World</td> with the aid of a style tag to enforce formatting is rendered in client. eg: <td width= 100 style= width: 100px >Hello World</td> Once you have you code setup in a very simple structure, we will then start adding hacks in the <head> tags </head> so that your template spans across in certain email clients and retains background color. 3
tip:.readmsgbody {width: 100%; background-color: #ffffff; }.ExternalClass {width: 100%; background-color: #ffffff; } Once this is done you are ready to move onto the next step. NOTE THAT THE TEMPLATE SHOULD NOT CONTAIN ANY <A HREF= # ></ A> 2. Setting up mobile responsive code for templates The next step now will be to add the css for mobile responsive tags to be effective, we will be using media queries, media queries are a CSS3 module allowing content rendering to adapt to conditions such as screen resolution. First we will look at the structure of your template and use one of the css3 queries that i will provide below. How a query tag is formed. @media only screen and (max-device-width: 480px) { The max-device-width means that the styles applied to this query will come into effect when the device has reached a maximum width of 480px Once this tag is created we will then build upon by adding classes to it changing the layout when viewed on a mobile device. 4
eg: ( what we have done here is said that when the mobile device is detected reduce the width of my template to 320px) @media only screen and (max-device-width: 480px) { table[class= wrappertable ] { width: 320px!important; } So when you add the class to the <table></table> tag for example eg: (So we attach the class wrappertable to the <table> tag thus giving it that query.) <table cellpadding= 0 cellspacing= 0 width= 648 class= wrappertable style= bordercollapse:collapse; border:0; > So what you can now do is create various classes using the wrappertable as a base for your template, some logic required with regards to this, if your text in template is 14px on mobile devices you can create a class for the <font> tag and make the font-size 12px etc. Ok, so next i will teach you how to make a double column into a single column using media query for mobile devices. tip: This can be applied to more than two columns as well, as long as max width of template is divided equally. 5
table[class=contenttable] { } width:320px!important; (This is the css needed) <table width= 640 border= 0 cellpadding= 0 cellspacing= 0 class= contenttable > <tr> <td> <table class= contenttable width= 320 border= 0 cellspacing= 0 cellpadding= 20 align= left > <tr> <td><p>column Left Content</p></td> </tr> </table> <table class= contenttable width= 320 border= 0 cellspacing= 0 cellpadding= 20 align= right > <tr> <td><p>column Right Content</p></td> </tr> </table> </td> </tr> </table> 6
By adding these classes and dividing the inner table widths they will snap beneath each other as seen below: ( From a double column ) Lorem ipsum dolor sit amet Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea Lorem ipsum Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim Image ( From a double column ) Lorem ipsum dolor sit amet Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim Image 7
The next step within media queries would be to adjust images in your newsletter template. This is an actual process, so as before we start with your css3 as seen here. td[class= headercell ] { background-image: url(your-image.jpg); width: 380px!important; height: 130px!important; } Now what the css is doing here is saying that with the @media query screen resolution meets a max width of 320px, to use the background image and size it to the size depicted above and we add important tags to enforce this and take precedence. Next step will be to apply the class to your html in the example stated below: <tr> <td class= headercell > <img src= your-image.jpg width= 648 height= 217 /> </td> </tr> Adding the class to the <td> tag and still keeping original image tag in place. Now this image technique can be applied to any image as long as the image that you want to be displayed is resized accordingly and also included in the folder library. 8
tip: Keep image size to a minimum so png s or gif s, usually works the best. NB: Now with regards to Responsive Email Design, there are a few factors which relate to this. The techniques listed here aren t universally supported by all mobile email clients. As you may know, not all email clients were made equal - even on the same device, how an HTML email displays can vary radically from inbox to inbox. For example, while the default Android email client that appears on the Google Nexus is renowned for its superior CSS support, the Gmail client that also comes shipped with the handset ignores styles within the tags and can t make head or tail of many run-of-the-mill CSS2 properties. Thankfully, the iphone and other Apple ios devices can not only boast of near trouble-free email rendering, but also account for a large percentage of mobile email opens, too. With this in mind, we present to you a non-exhaustive list of mobile email clients and their support for media queries. The skinny is that media query support enables you to use many of the responsive techniques. 9
Default device email clients Client Media Query Amazon Kindle Fire Amazon Kindle Fire HD Android 2.1 Eclair Android 2.2+ Apple iphone Apple ipad Apple ipod Touch BlackBerry OS 5 BlackBerry OS 6+ BlackBerry Playbook Microsoft Windows Mobile 6.1 Microsoft Windows Phone 7 Microsoft Windows Phone 7.5 Microsoft Windows Phone 8 Microsoft Surface Palm Web OS 4.5 10
Now that you have a basis for image manipulations and layout adjustment, using @ media queries the possibilities are endless when it comes to modifying your template to display on mobile devices. I have also added the three most used and universal max-widths used for a large amount of devices see them here: @media only screen and (max-device-width: 480px) { styles here... } @media only screen and (max-device-width: 640px) { styles here... } @media only screen and (max-device-width: 479px) { styles here... } tip: There are more widths that can be used to further enhance stability but this can become a catch 22. Now that we have a basis of how mobile optimization works branching off from these techniques will be easily accomplished. With this process like any other in these steps testing is key, i usually test with actual devices as listed above that are compatible. 11
4. Setting up editor classes (tags) for templates Once you have tested your mobile optimised version of your template and desired state is met, the next step will involve adding the tags needed for the editor to creating functionality. Starting from the top we will first be adding the styles needed in the head of the code as seen below, note that these are very specific tags and case-sensitive as well so please check spelling of them. A list the tags here and what each of them are used for: gm-template - This class MUST be on the first DOM element within the template (After the style element) - this class is defined with a <div> tag that wraps the entire newsletter. gm-editable - Container editable, accepts drops from gm-element - makes the element utilise functions that editor offers. gm-element - All editable elements must have this base class - the base function for the element activates element in other words. gm-element-html - Allows HTML editing tools - allows user to edit content in specific content block The styles below depict the classes above and can be defined in this way. You will see that these are classes represented here. 12
.gm-template,.gm-template p,.gm-template a,.gm-template span {font-family:arial,helvetica,sans-serif; font-size:14px;}.gm-template p {margin:0 0 1em 0;} Once you have your styles in place you will then move onto the <body> elements you will need to setup a <table> element that acts the same as the <div> tag wrapper also adding a 100% width to the table and also a style= bordercollapse:collapse; border:0 this will eliminate borders and have table to become elastic. eg: <table width= 100% border= 0 cellpadding= 0 cellspacing= 0 align= center style= bordercollapse:collapse; border:0; > <tr> <td> NB: The one rule when adding the gm-element tags is that all elements need to be wrapped with <div class= >item>/div> tags. NB: This tag will also include swatch hex values in your template used Eg: <div class= gm-template data-color-swatches= [ Black, White, #1E90FF, #00008B, #778899, #4682B4, Red ] > 13
eg: Here is an example of the tags being used for simple text entry <div class= gm-element gm-element-html > <font class= contenttext style= font-family: Verdana, Geneva, sans-serif; font-size: 28px; font-weight: bold >LOGO HERE</font> </div> Now using the same code above i will demonstrate another rule for a element that you want to be made editable or have function in the editor, by adding the gm-editable class to the <td> tag surrounding the code that needs it. <tr> <td class= gm-editable >(Added class to <td> tag) <div class= gm-element gm-element-html > <font class= contenttext style= font-family: Verdana, Geneva, sansserif; font-size: 28px; font-weight: bold >LOGO HERE </font> </div> </tr> </td> Now note to use these gm-tags strategicly, for example do not apply a gmelement-html class for an image an image wrapper would just need a gmelement class and a gm-editable class, no text is in the image so no html is needed to be edited. Once you have all these tags in their desired areas of your template, testing needs to begin again. 14
5. Email creator tabs CSS used in the head tags of your html The css snippet below has to be added to the page and any styling can be linked to this as they are calling tags used for the editor. NB: Use these styles in conjunction with your responsive styles media query s etc. NB: Enforce deprecated styles for maximum style structure in editor NB: Keep testing in the environment Example: /*editor specific styles start here*/ <style type= text/ss >.gm-template,.gm-template p,.gm-template a,.gm-template span {font-family:arial,helvetica,sans-serif; font-size:14px;}.gm-template p {margin:0 0 1em 0;} </style> /*editor specific styles ends here*/ 15
Classes/tags used in html The tags/classes below all have a distinct function for the editor to function, firstly note that these classes must be attached to <td> tag as well as to be nested within <td> </td> tags as a <div> tag. The template attached with this will display an example. There are 4 tags in total, as you can see below. Tags:.gm-template & swatch count This element wraps the entire newsletter as a div class with it we need to add the swatch values. Example: <div class= gm-template data-colorswatches= [ Black, White, #1E90FF, #00008B, #778899, #4682B4, Red ] > Content goes here </div>.gm-editable This tag tells the editor to make functions available, such as drag and drop, duplicate box or remove box etc. 16
Example: <tr> <td class= gm-editable > <div class= gm-element gm-element-html > <font class= contenttext style= font-family: Verdana, Geneva, sans-serif; font-size: 28px; ont-weight: bold >LOGO HERE </font> </div> </td> </tr>.gm-element This tag recognizes itself to the editor to add functionality to it so editor can assign it to another eg: editable. Example: <tr> <td class= gm-editable > <div class= gm-element gm-element-html > <font class= contenttext style= font-family: Verdana, Geneva, sans-serif; font-size: 28px; font-weight: bold >LOGO HERE </font> </div> </td> </tr> 17
.gm-element-html This tag recognizes itself to the editor to give user the ability to edit the content usually used for a <td> containing text or links lists etc. Example: <tr> <td class= gm-editable > <div class= gm-element gm-element-html > <font class= contenttext style= font-family: Verdana, Geneva, sans-serif; font-size: 28px; font-weight: bold >LOGO HERE </font> </div> </td> </tr> The above-mentioned tags can be used as combinations of a maximum of two classes per <td> or <div> tag. These can also be slotted with you usual inline styles for email clients. Always remember to add <div> tags to nest them. 18
6. Conclusion In conclusion, the techniques and information in this toolbox needs to be used in conjunction with html and css fundamentals and best practices. Can t emphasize enough on testing your template through each of the steps even knowing the information presented in this doc typo s are still possible. Also remember that each layout is different and that strategy and planning is another key factor when planning layout and code up. 7. Cheatsheet gm-template - This class MUST be on the first DOM element within the template (After the style element) - this class is defined with a <div> tag that wraps the entire newsletter. gm-editable - Container editable, accepts drops from gm-element - makes the element utilise functions that editor offers. gm-element - All editable elements must have this base class - the base function for the element activates element in other words. gm-element-html - Allows HTML editing tools - allows user to edit content in specific content block 19
data-color-swatches= [ Black, White, #1E90FF, #00008B, #778899, #4682B4, Red ] > - used to wrap newsletter in for editor functionality @media only screen and (max-width: 320px) - query for responsive device. body[yahoo].devicewidth { width:280px!important; } - css hack to further enforce width on mobile device this works in conjunction with viewpoint. body[yahoo].center { text-align: center!important; } - css class to enforce centeralignment of text on device. body[yahoo].footerlinks { width:32%; margin-bottom:40px; } - creating a fluid layout by using % as to px for width, making it responsive. <meta name = viewport content = width = device-width > - also used for responsive design making the viewpoint detect device-width. <meta name= viewport content= width = 320 > - also used for responsive design making the viewpoint know the device-width. img, table { max-width: 320px; } - Since the device screen width is 320 pixels, you may also want to specify some CSS tags that set the max-width of certain elements, such as images and tables:.mobile_hidden { display: none; } - If you have elements in your main page that you d like to hide completely in the mobile version, add CSS tags for them and set the display to none: 20
.ReadMsgBody { width: 100%; background-color: #ffffff; } - Hotmail Fix, This style forces the width of the outer table to be recognized as 100%, restoring the intended background color and alignment. Contact / Questions? If you ve got any technical questions, email support@graphicmail.com or call us on +1 800 590 0028. For any other questions, please ask support. 21