Before you start creating an email, make sure that you get a proper brief from the Account Manager with the following information:
- a Job Number
- a reference to previous emails (if any) or a sample email design from the guidelines that they would like to use
- who will the email be sent to?
- will it be bilingual?
- will it be sent through Exact Target? Or sent internally?
- a wireframe or rough layout of what the email should look like or perhaps what kind of content they would like to include
- will it have a landing page?
- how many segments of the email will there be?
- which template should be used? Mass? Platinum? Centurion?
Organizing files
When you acquire all the information, create a new folder using the following naming convention: [jobnumber]_[project_title]_[date]. Ex. 34764_Spend_Stim_Q4_2018.
- the job number always comes first
- do not use spaces. Use “_” (underscore) instead
- the date can just be the year. You can add the month as you see fit.
This will help you and others find the jobs easily. Once the folder is created, go to Digital server > 01. Digital Folder Structure, copy the folder structure (see below) and paste it into your newly created job folder:
- When you receive files from the Account Manager by email, please download the files and place them into the appropriate folders. If someone else works on your files, they will be able to find files and make changes easily.
- Please place all downloaded hi-res stock images into 03. Images > Stock so that if anyone needs to go back and get the hi-res image, they can find it there.
- Take a look at the Read Me file for more information.
Creating email templates
Once you have all the information and your folder is set up, you can go ahead with creating the emails while keeping the following points in mind:
- Template: Based on the requirements, download and use the appropriate templates. Mass Template | Platinum Template | Centurion Template. You can also get the templates from the Digital Server > 02. Email Templates. Please note, these templates are still RTP2. GBS templates are still under development.
- Email Width: Emails should not exceed 620px.
- Components:
For GBS: Use the pre-made components to build the email body and content of the email. Refer to this document on how to use the components.
For RTP2: Use these components and refer to this document.All of these components are also available in the Digital Server > 03. Email Components.
- Fonts: Helvetica with Arial fallback. All tables NEED font-family declarations (copy and paste the below code if needed and make changes where necessary). If we don’t declare the font-family in the table, Outlook tends to use Times New Roman as the font instead.
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="font-family:HelveticaNeue, Helvetica Neue Regular, Helvetica, Arial, sans-serif; font-size:13px; color:#000000; line-height: 1.5em;">
<tr>
<td>
<!-- Insert content here -->
</td>
</tr>
</table>- Images: Make sure to add “alt” and “title” attributes for all images. For header images, make sure that the alt and title tags are the same as the headline.
- always use retina images to cater to retina screens. The PSD files in the template folders are already resized for retina
- Explicitly set the width of all images in both the style and width attributes or it will take the actual width of the image.
<img src="images/header.jpg" alt="" title="" style="border:none;border-radius:;display:block;outline:none;text-decoration:none;width:620px;" width="620" class="mobile-responsive">- Links: Check that all links are working and are going to the right landing pages. Below are some of the most commonly used links:
Navigation bar:
| Log-in | http://secure.americanexpress.com.bh/Mobile_Detector/index.html?flag=vt |
| Download App | https://secure.americanexpress.com.bh/wps/portal/uae/benefitsexplained/amexappuae/!ut/p/a1/rVNNj9owEP0r7SHH4CEfJPQWsogN27C0W1SSC3KCk3iVOF7bsPDv64SVWqksUHV9sOzxm6fxmzcoRWuUMrynJVa0Zbju7ulo87B04N73rQi8uzuIPMtaeosQAh80INEAeGcFcFu-PYymYIUwn8U_JhBEbvwE84ntRPZ_5lu35Yez4N7xvuqKV7MO8G2yeowfbIhG1_J_ohSlOVNcVSjBDTl82mFiQL81mDIDOBGy0zLHYisNyAgjBVWSHHit38n2bKhjwpxrmo6f45JsiaQl62853aJk6LpDsIux6ZDcNx3XHZnYG2PTHmd-UTiF59nZqbor_-sBlxrYAy516DLAQnOUlnWb9XZKApbZfolSQQoiiBjshA5XSnH5xQADJMl3ggz0_wXNMdOSCCLlIG-bQVYZ8Mq1hLwVCte9yOcYq1YqtL5IhBLddu_dvj466Okflb5C6H0woeOeCJvjhrf5hmOBG5RwrCqtYtDZcBVMDei3uLfh8s2G4cmGkzfPTX977kyoYwo41zRdE69OkiXiMC47v6rKpKxo0fovb6P1H97WOfT55SUN9Ay1TJGDOj1_-BDNr7n85upbVuuDJGJPcyIRb1Z6Nf5zwaff_aNd75tms1iYOPOPBzdz6zL4_AvF5JCN/dl5/d5/L2dBISEvZ0FBIS9nQSEh/ |
| Go Paper-less | https://secure.americanexpress.com.bh/Mobile_Detector/index.html?flag=estmt |
| Redeem Points | https://www.membershiprewards.com.bh/ |
| Refer a Friend | https://secure.americanexpress.com.bh/wps/portal/bahrain/benefitsexplained/benefitsexplained/mgm-16sep2015/!ut/p/a1/tVJdc6IwFP0r-9KnHSY34Su7b4AU0aJW61R4cSIEpSOYArNj__0GZLvTqaKd2c1DJrk5537kHBShFYoK9ivbsjo7FGzf3CNjPZ5pMKSU-GAOBuCbhMzMiQMWBQkIJQAuLAtaPqVDw6dAxp59j8GaT008dAcEQOv4PYAP9emD39SfznV94WLApOOr2HeBODDygicbLF8PFjCy1UdQb-v_Ip_cxnc8a6iZD3LipdcAHu3lNBir4Bu38XsGvMJ_RhGK4qIW9Q6FLOfHbxu2K1lW3MH7IW93wcuq0TRmZVLJV17wNKsrfhR7-c6Ts6F8myvYqLgggPWmlIizBIUEq6auqlgxE0oULeVY2TBCFMJ5in9AEms0PrV25XNaQJ97WkCfvP0AgkL5webFH5xqaPHFsa4kNP9xQk0_Jczf1uIQrwUrWY5CwerdzzuwpODf7T86vx-Cdp91gjsnwe1OXfevumdCgRdIwRed4KMb7EvKwAm2cmLZkpIV6QGtPhnpbOijt2Sm7OX1NbKknQ9FzY81Wv1vP4t82a6cqsbcTScThW0oqPp-S6vfXxPQFQ!!/dl5/d5/L2dBISEvZ0FBIS9nQSEh/ |
| https://web.facebook.com/AmericanExpressME/ |
Other links:
| Online Services Log-in | https://secure.americanexpress.com.bh/wps/portal/bahrain/!ut/p/z1/jY5BDoIwEEXPwgk6UqTdtohtwQYNFnA2pitCoujCeH5JE5dWZveT9_58gmQgOPv3NPrX9Jj9bckXzK90Y0pIC6iUPUsQZmtbqCRtOkb6AMCPE0BwjV8ooTN2WAyndmDYSbrG1hRMvs6PABif1xMMSGzBvw6MjRTyC9THDDTnqeFc75cXmW6hq0LD8-7cAJMZRZJ8AAAAlAY!/dz/d5/L2dBISEvZ0FBIS9nQSEh/ |
| Centurion Log-in | https://secure.americanexpress.com.bh/wps/portal/bahrain/!ut/p/z1/04_Sj9CPykssy0xPLMnMz0vMAfIjo8zijQ09XQ2MnA28LNwNLAwCLYI8LAMMjAwMDMz0w8EKDHAARwP9KGL041EQhd_4cP0osBIzR0czT2cLAy_3gFBzA0-_QGcjN_OwYLcQc6gCPGYU5IZGGGQ6KgIAzXX0wg!!/dz/d5/L2dBISEvZ0FBIS9nQSEh/ |
| Contact Us – Bahrain (in footer) | https://secure.americanexpress.com.bh/wps/portal/bahrain/!ut/p/z1/jZHLboMwEEW_JQuWxhNME6s7oC2PFOVVCvWmMqkDSLxku1XVr6-VbFPKrDxX584d25jhArOefzUV183Q89b0b2z1vtm5EFHqxJRGTxCv3egIrwmAQ3B-AeCP8gCzOX6yjB_BCSAJ0xcfvPguPULik3060x-EXuSun01iFj4YYO9n23RDIF7N808AbPp6OWYXZGqD_2ZcgYk3SDCr2qG8_ofXl4RWmElxFlJI-1MaudZ6vLfAgpFXQtmdUMocbN4J2Zx4L75HaST7NHR2WVtA3KUL6NDoHxRw2eqhRwfe8Q_eo5QrhbZnMxt50oJbifWgNC7mJOGxy7KsgGbX5VR5i8Uv5UtBqg!!/dz/d5/L2dJQSEvUUt3QS80TmxFL1o2XzMxSUUwMkMwSkdTRTMwUTgwREwxVTMxMEE2/ |
| Contact Us – Qatar (in footer) | https://secure.americanexpress.com.bh/wps/portal/qatar/!ut/p/z1/04_Sj9CPykssy0xPLMnMz0vMAfIjo8ziLSw8zDwtDIy83Z3cDA0cg_zNDT1cXYwMDEz0wwkpiAJKG-AAjgZA_VFgJc7ujh4m5j5AwVB3FwNP80CnUH9fb2MDTzOoAjxmFORGGGQ6KioCAOMQJTc!/dz/d5/L2dJQSEvUUt3QS80TmxFL1o2XzMxSUUwMkMwSkdTRTMwUTgwREwxVTMxMEI3/ |
- Buttons: When creating buttons, use the below code and change the text, background-colors and href accordingly. Note: This button code was used for the last Spend Stim Q4 2018 campaign and fixes the tracking issue with Exact Target
<!-- button start --> <!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="200" align="center" style="width:200px; border: 1px solid #D3D3D3; background-color:#119ab7;"><tr><td> <![endif]-->
<div style="width: 200px; border-radius:5px; overflow: hidden; border: 1px solid #D3D3D3; margin: auto;">
<table width="200" border="0" cellspacing="0" cellpadding="0" style="font-family:HelveticaNeue, Helvetica Neue Regular, Helvetica, Arial, sans-serif; font-size:13px; color:#06213f; text-align:center; line-height: 1.5em;">
<tbody>
<tr>
<td class="col" style="background-color: #119ab7; padding: 0px;">
<a class="cta-button" href="#" target="_blank" style="font-family:HelveticaNeue, Helvetica Neue Regular, Helvetica, Arial, sans-serif;font-size:15px;color:#ffffff;font-weight:normal;text-transform:none;line-height:120%;text-decoration:none;border-radius:3px;padding:11px 25px;display:inline-block;margin:0;">Sample button</a>
</td>
</tr>
</tbody>
</table>
</div> <!--[if mso | IE]> </td></tr></table> <![endif]--> <!-- button end -->- Exact Target merge fields: Make sure that all fields have been used in the right place. Below are some of the most common ones we use
Common merge fields
| %%Greeting%% | to be placed before the start of the body copy |
| %%Client ID Number%% | to be placed at the bottom of the email beside Reference Number |
Centurion merge fields
| %%CTANumber%% | should go into the body copy for the relationship manager contact |
| %%CTAEmail%% | should go into the body copy for the relationship manager email |
Spend Stim Merge Fields
| %%Spend 1%% | Spend threshold 1 |
| %%Earn 1%% | Earn threshold 1 |
| %%Spend 2%% | Spend threshold 2 |
| %%Earn 2%% | Earn threshold 2 |
| %%SpendRemaining%% | used for spend reminder emails |
| %%EarnRemaining%% | used for spend reminder emails |
MR Merge Fields
| %%MRBonusPoints%% | MR points balance |
| %%MRPointsBalanceDate%% | MR points balance as of date |
| %%Membership Rewards Number%% | MR account number |
- Footer: The footer area contains all the legal information and terms and conditions. We use have two different versions where the only difference is the UAE Legal line. Usually, we use the UAE Legal line on English emails or emails that only target the UAE market.
Footer code with UAE Legal line:
<!-- Required information for Exact Target. This should always be in emails but removed in the browser versions -->
<table cellpadding="2" cellspacing="0" width="100%" ID="Table5" Border=0 align="center" style="font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#e1e1e1;"><tr><td align="left">This email was sent by: <b>%%Member_Busname%%</b> %%Member_Addr%% %%Member_City%%, %%Member_State%%, %%Member_PostalCode%%</td></tr></table>
<!-- legal lines -->
<p>This is an automatically generated email. Please do not reply to this email. If you wish to contact AMEX (Middle East) B.S.C. (c), please contact Customer Services by clicking <a target="_blank" style="color:#e1e1e1;" href="https://secure.americanexpress.com.bh/wps/portal/bahrain/!ut/p/z1/jZHLboMwEEW_JQuWxhNME6s7oC2PFOVVCvWmMqkDSLxku1XVr6-VbFPKrDxX584d25jhArOefzUV183Q89b0b2z1vtm5EFHqxJRGTxCv3egIrwmAQ3B-AeCP8gCzOX6yjB_BCSAJ0xcfvPguPULik3060x-EXuSun01iFj4YYO9n23RDIF7N808AbPp6OWYXZGqD_2ZcgYk3SDCr2qG8_ofXl4RWmElxFlJI-1MaudZ6vLfAgpFXQtmdUMocbN4J2Zx4L75HaST7NHR2WVtA3KUL6NDoHxRw2eqhRwfe8Q_eo5QrhbZnMxt50oJbifWgNC7mJOGxy7KsgGbX5VR5i8Uv5UtBqg!!/dz/d5/L2dJQSEvUUt3QS80TmxFL1o2XzMxSUUwMkMwSkdTRTMwUTgwREwxVTMxMEE2/">here</a> or call the phone number on the back of your Card.</p> <p>American Express® Online Services: always remember American Express regards the security of your personal information with the utmost confidentiality. Never provide personal or Account related details in response to an email and/or SMS, even if it appears to have come from AMEX (Middle East) B.S.C. (c).</p> <p>This Card is issued by AMEX (Middle East) B.S.C. (c) pursuant to a license from American Express.</p> <p>American Express is a registered trademark of American Express.</p> <p>AMEX (Middle East) B.S.C. (c) is regulated and licensed by the Central Bank of Bahrain as a Financing Company.</p>
<!-- Remove below paragraph for non UAE communications --> <p>AMEX (Middle East) B.S.C. (c) – Emirates is regulated and licensed by the Central Bank of the UAE<br>(For UAE Residents)</p>
<!-- Keep for emails but remove in browser versions -->
<p>Reference Number: %%Client ID Number%%</p>Arabic Footer code:
<!-- Required information for Exact Target. This should always be in emails but removed in the browser versions -->
<table cellpadding="2" cellspacing="0" width="100%" ID="Table5" Border=0 align="center" style="font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#e1e1e1;"><tr><td align="left">This email was sent by: <b>%%Member_Busname%%</b> %%Member_Addr%% %%Member_City%%, %%Member_State%%, %%Member_PostalCode%%</td></tr></table>
<!-- legal lines --> <p>This is an automatically generated email. Please do not reply to this email. If you wish to contact AMEX (Middle East) B.S.C. (c), please contact Customer Services by clicking <a target="_blank" style="color:#e1e1e1;" href="https://secure.americanexpress.com.bh/wps/portal/bahrain/!ut/p/z1/jZHLboMwEEW_JQuWxhNME6s7oC2PFOVVCvWmMqkDSLxku1XVr6-VbFPKrDxX584d25jhArOefzUV183Q89b0b2z1vtm5EFHqxJRGTxCv3egIrwmAQ3B-AeCP8gCzOX6yjB_BCSAJ0xcfvPguPULik3060x-EXuSun01iFj4YYO9n23RDIF7N808AbPp6OWYXZGqD_2ZcgYk3SDCr2qG8_ofXl4RWmElxFlJI-1MaudZ6vLfAgpFXQtmdUMocbN4J2Zx4L75HaST7NHR2WVtA3KUL6NDoHxRw2eqhRwfe8Q_eo5QrhbZnMxt50oJbifWgNC7mJOGxy7KsgGbX5VR5i8Uv5UtBqg!!/dz/d5/L2dJQSEvUUt3QS80TmxFL1o2XzMxSUUwMkMwSkdTRTMwUTgwREwxVTMxMEE2/">here</a> or call the phone number on the back of your Card.</p> <p>American Express® Online Services: always remember American Express regards the security of your personal information with the utmost confidentiality. Never provide personal or Account related details in response to an email and/or SMS, even if it appears to have come from AMEX (Middle East) B.S.C. (c).</p> <p style="direction:rtl;">صدرت هذه البطاقة من أميكس (الشرق الأوسط) ش.م.ب. (مقفلة) بترخيص من أمريكان إكسبريس.</p> <p style="direction:rtl;">أمريكان إكسبريس علامة مسجلة لدى شركة أمريكان إكسبريس.</p>
<!-- Remove below paragraph for non UAE communications --> <p style="direction:rtl;">أميكس (الشرق الأوسط) ش.م.ب. (مقفلة) هي شركة مرخصة وخاضعة لقوانين مصرف البحرين المركزي كشركة تمويل.</p>
<!-- Keep for emails but remove in browser versions --> <p style="direction:rtl;">رقم المراجعة: %%Client ID Number%%</p>- Mobile responsiveness: as you add more content or components, always check that the template is responsive. Use the below classes to quickly add responsiveness to components.
| .table-break | add this class to <table> for tables that need to to be stacked on mobile |
| .col | this works in tandem with table-break and should be added to the <td> tag of any column you would like to stack on mobile. (Note: table-break should be added to the parent <table> or it will not work) |
| .mobile-responsive | add this class to images that you would like to make responsive on mobile |
| .mobile-hide | add this class to elements that you would like to hide |
| .mobile-padding-20 | add this class to <div> tags to control the padding on mobile. mobile-padding-20 is for 20px padding. There is also one for 30px and 40px so you can append the class with 30 and 40 respectively. |
| .no-padding-top | removes padding from the top |
| .no-padding-bottom | removes padding from the bottom |
| .no-break | by default, all links on mobile will break so that the layout does not get pushed past the screen. Add this class to <a> tags that you do not want to break. |
Here is some sample code with some of the classes being used:
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="table-break" style="font-family:HelveticaNeue, Helvetica Neue Regular, Helvetica, Arial, sans-serif; color: #0C2340; font-size:13px; color:#06213f; text-align:center; line-height: 1.5em;">
<tbody>
<tr>
<td class="col" width="150" style="background-color: #119ab7; width: 150px;">
<img src="http://image.message.americanexpress.com.bh/lib/fe98157073640d7877/m/10/34764_ma_icon-spend.png" width="75" style="width: 75px;" alt="Spend">
</td>
<td class="col" style="background-color: #eeeeee; padding: 10px 20px;">
<div class="mobile-padding-20">
<table class="mechanics-inner" width="100%" border="0" cellspacing="0" cellpadding="5" style="font-family:HelveticaNeue, Helvetica Neue Regular, Helvetica, Arial, sans-serif; font-size:15px; color:#06213f; text-align:center; line-height: 1.5em;">
<tbody>
<tr class="mechanics-info" style="border-bottom:1px solid #06213f; font-size: 1.5em;">
<td class="col" style="text-transform: uppercase; text-align: left;">Spend</td>
<td class="col" style="font-weight: bold; text-transform: uppercase; text-align: right;">%%Spend 1%%</td>
</tr>
<tr>
<td colspan="2" style="text-align: right;">Until 10<sup style="font-size: 10px; line-height: 0; vertical-align: 3px;">th</sup> January 2019</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody> </table>Feel free to make changes to the template as required. Add classes or IDs or inline code as you see fit. The templates provided to you are just boilerplate codes.
Other useful snippets:
Arabic date format:
<span style="white-space: nowrap; direction: rtl;" dir="rtl">Arabic date CSS fix for apple devices:
a[x-apple-data-detectors] {
direction: inherit !important;
}MSO styles (use this to target only microsoft outlook):
<!--[if mso]>
<style type="text/css">
body, div, a, table, td {font-family: Arial, Helvetica, sans-serif !important; direction:rtl !important; }
</style>
<![endif]-->Use the below code in browser versions to hide or show the UAE legal lines. This is useful so you don’t have to create multiple browser versions.
<!-- UAE legal line -->
<script type="text/javascript">
var nll_ = getParameterByName('nll');
var link_ = document.getElementById('language-tab').getAttribute('href');
if(nll_) {
document.getElementById('legal-line').style.display = 'none';
//make sure to change the href
document.getElementById('language-tab').setAttribute('href','#');
}
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
</script>In the BV, add the id legal-line to show or hide it
<p id="legal-line">AMEX (Middle East) B.S.C. (c) – Emirates is regulated and licensed by the Central Bank of the UAE<br>(For UAE Residents)</p>In the BV, add the id language-tab to dynamically change the href
<a id="language-tab" href="http://pages.message.americanexpress.com.bh/spend-stim-2018-q4-segment1-mass-ar/" style="color:#555555;">العربية</a>To trigger the hiding of the legal line in the BV, you will need to add the nll query parameter to the links in the emails
<!-- add ?nll=true to any links that go to the browser version and need to hide the legal line -->
<a href="http://pages.message.americanexpress.com.bh/spend-stim-2018-q4-segment1-mass-en/?nll=true" style="color:#555555;">English</a>Samsung CSS Selector
MessageViewBody, #MessageWebViewDiv{
}Superscript code
<sup style="font-size: 10px; line-height: 0; vertical-align: 3px;">®</sup>After creating the email
After the email has been coded, test it on Litmus. All passwords can be found on the Digital Server > 05. Passwords > Password_List.txt. Make any changes or adjustments to your code as needed.
When you think that the email is good enough to send to the client, upload it to our testing server using an FTP. The password can be found in the password list.
- Make sure to use the same naming convention used for creating job folders ie. [jobnumber]_[project_title]_[date]. Again, this makes it easier for the Account Manager to search for the job.
- Also, Amex jobs are arranged by year, so please create a new folder as soon as January 1st of every year hits.
Next, send an email to the Account Manager with the link. If you have any concerns or questions for the client, mention it in the email as well and the Account Manager will relay the message to the client.
When the client sees the link, they may or may not make changes. If they do have changes, edit the HTML, test it in Litmus if needed and re-upload it to the server under a new version number. If you think the changes aren’t too major to require a new version number, then by all means, upload it to the same links.
Once the client is happy with the links, they will give approvals to go ahead with testing. This is where the Exact Target process starts.