AE Mailer (Email)

Overview

Typically in Project Seeker the job for new AE mailers will have a word document that you'll get most of your information from. Inside the word doc are things like the copy, the headline, links, and campaign name and the email subject line.

There are several types of AE Mailers:

• Standard - have a standard html template to plug content in to. Two types of standard mailers - one with an image on the sidebar and one without an image (less common).
• Standard with Custom Header - these mailers have a custom header graphic but still use the same standard html tempalte.
• Javelin - these are completely custom emails and bear no resemblance to the standard mailers, much more time consuming and need to be litmus tested before sending a test. More on javelin mailers later in this document.

The following instructions are for standard mailers

The basic idea is to do the following 5 things (that are explained in more detail later in this document):

• 1) Create a new job folder (i.e. job_12345) directly in the AEMailers folder.
• 2) Copy the html and TEMPLATE_RESOURCES from the main html template or from a similar job to your newly created job folder.
• 3) Update the text in an html file with the text provided in the AE Mailer form.
• 4) Create the header slice. There is a Photoshop template that you can use to change the text in it.
• 5) Load everything to the AE Mailer online tool and send a test email using it.

Remember this is HTML EMAIL so you CAN'T use modern web practices: no floats, no pngs, no absolute positioning, no web fonts, no html5, no padding. The templates are set up so all you have to do is update the text from the information provided in the mailer form.

Also, AT&T has brand guidelines that must NOT be deviated from. For instance, the orange must be the exact hex code (#f47b20).

MEGVault

Everything is located in the AEMailers folder which is located on the cloud server: https://megvault.egnyte.com Log in with your username and password to access the AEMailers folder.

Creating Slices

• The header slice may be provided (custom header emails) if not you will have to create it (standard mailers). The PSD file can be found here: AEMailers/AE-TEMPLATES/PSD for Slicing/AE-Mailer-Header-Template.psd. The font in use is Omnes II. Make sure you have this font loaded on your computer. If you don't have it, it is located in the /AEMailers/AE-Fonts-Omnes2/ folder. Change the text in the header slice with the headline or subject line provided in mailer copy form found on Seeker.
• If there is a sidebar with an image, the image will be provided on seeker but may need to be altered. There is a single PSD file with multiple layer-groups that is used to create sidebar slices for template mailers. The PSD file can be found here: AEMailers/AE-TEMPLATES/PSD for Slicing/AE-3.1-Template.psd.
  • DO NOT save over the PSD file. Save PSD file in the job folder.

JPEG vs PNG vs GIF

• Ideally, JPEG is only used for photographic images. GIF or PNG are preferred for logos, line art or fonts. If an image is primarily flat colors, it is always better to choose GIF. You can also reduce the size of an image by not using transparency. Some suggestions are made below for common images, but common sense should be applied to follow these basic principles. Always choose the method that results in the smallest file size without sacrificing image quality. And remember, that unless you have a retina display, your monitor is not always the best way to determine image quality. Trust the numbers more than your eyes.

Without Image Sidebar

• For AE Mailers where the client does not provide an additional image, the only slice that needs to be created is the header slice.
  • Copy the headline that the client has provided from word doc into the PSD file mentioned above. Use the styles for the headline and subhead (if applicable) that are provided in the PSD file. If the client does not provide a specific headline, use the subject line provided in the communications form.
  • Save the final slice by using the "Save for Web..." option in Photoshop. Save as a JPG, with the "Quality" setting at 75.
  • Final slice should be named with JOBNUMBER-header.jpg (i.e.: if the job number is 12345, the slice would be named "12345-header.jpg"). It is important to include the job number in the slices as we reference this number later in the AE Mailer tool to find old jobs.

With image sidebar

• When the client provides a photo that they would like to include, we generally place this in a cropped circle that lives on the right hand side of page (see template).
  • Use the path on the example image within the template to size and crop the client-provided photo.
  • Crop the image using the guides surrounding the image. The final size of an image slice. Final size should be: 175px x 225px
  • Save the final slice by using the "Save for Web..." option in Photoshop. Save as a JPG, with the "Quality" setting at 75.
  • Final slice should be named with JOBNUMBER-image.jpg (i.e.: if the job number is 12345, the slice would be named "12345-image.jpg"). It is important to include the job number in the slices as we reference this number later in the AE Mailer tool to find old jobs.

Buttons

• Occasionally a client will ask for a button. There is a PSD file to use as your template for this that can be found here: AEMailers/AE-TEMPLATES/PSD for Slicing/xxxxx-button.psd.
  • Make sure there is 20px of space on the right and left of the text per AT&T brand guidelines.
  • Save the final slice by using the "Save for Web..." option in Photoshop. Save as a JPG, with the "Quality" setting at 75.
  • Final slice should be named with JOBNUMBER-button.jpg (i.e.: if the job number is 12345, the slice would be named "12345-button.jpg"). It is important to include the job number in the slices as we reference this number later in the AE Mailer tool to find old jobs.

Programming Email

• Folders for various default AE Mailer templates that should be used as a starting point for any template mailer can be found here: /AEMailers/AE-Templates/HTML Templates
• Or, if you are creating a mailer similar to a recent mailer you created, you can simply copy that folder.
• First start by creating a new folder directly inside the /AEMailers folder called using "Job_[job-number]". Example. job_12345
• Next copy the html and TEMPLATE_RESOUCES folder from one of the html templates or a recent similar job.

Formatting

• There are template styles for body copy, subheads and hyperlinks. Make best attempt to mesh these with copy provided by client. Review with AE if questions.
• All special characters (en-dashes, regisitration marks, etc...) should be replaced with ASCII code equivalents THIS IS IMPORTANT AS THE "Charset" meta tag gets ripped out by their email sending program and any smart quotes will not render properly.
• Find and replace all smart quotes (curly) with dumb quotes (straight). Smart quotation characters are not supported.
• HTML Entities Chart: http://www.ascii.cl/htmlcodes.htm

Images

Keep all images linked to the "TEMPLATE_RESOURCES" folder. This will ensure that the images link correctly when the email template is loaded to the AE Mailer tool. IMPORTANT: Be sure to add an "alt tag" for each image. Most email clients don't display images by default so we want text to display in its place when the image isn't shown. Example <img src="TEMPLATE_RESOURCES/12345-header.jpg" alt="Enjoy Network Solutions!" />

Solution Provider Versions (SP & ASP)

Often we are asked to provide additional versions of mailer for Solution Provider Partners. To do this we add the company name and a corresponding logo to the template:

SP and ASP Versions

• For SP and ASP versions: In the sign-off section of the email remove commenting from these lines:
[SENDER-alliance_company] and <img src="TEMPLATE_RESOURCES/alliance-logo.gif">
• For Solution Provider (SP) Version use "alliance-logo.gif" for logo
• For Associate Solution Provider (ASP) Version use "asp-logo.gif" for logo.

Wholesale Version

• In the sign-off section of the email remove commenting from these lines:
[SENDER-alliance_company]
• Additional logo is added to the header slice, and new version of header slice will need to be created. This can be found in the PSD template.

Custom Templates

A few scenarios where we accommodate client-provided files are outlined below:

Client Provides Header Banner

Client will occasionally provide their own image and/or header. Many times this involves making some adjustments to the standard ae mailer template so that the client-provided creative does not clash. There are some examples of how we have handled these here: /AEMAILERS/AE-TEMPLATES/HTML Templates/Custom-Samples

Client Provides Finished Creative for Email (.PSD, .PDF, .AI file) - These are called JAVELIN mailers as they are completely custom

• Slice and build template from scratch following the client-provided creative.
• Replace any variable information with AE mailer elements ([SENDER-phone], [SENDER-email], etc...)
• Add the standard AE mailer legal paragraph that references how to "unsubscribe", and contains the unsubscribe link.
• Add [EMAILVIEWLOG] to the bottom of the markup (below </html>)

Client Provides Finished HTML Markup for Email

• Replace any variable information with AE mailer elements ([SENDER-phone], [SENDER-email], etc...)
• Add the standard AE mailer legal paragraph that references how to "unsubscribe", and contains the unsubscribe link.
• Add [EMAILVIEWLOG] to the bottom of the markup (below </html>)

Load Finished Mailer to AE Mailer Tool

• The mailer needs to be loaded to the mailer tool and a test email should be sent.
• Logging in to the AE Mailer Web Portal is a little tricky.

* You must log in from a Windows computer with IE8. If you're on a Mac it is very convenient to install a VirtualBox (free) and run Windows XP with IE8. Here's an article on how to do this: http://osxdaily.com/2011/09/04/internet-explorer-for-mac-ie7-ie8-ie-9-free/

• Login Step1: Go to this link: https://www.e-access.att.com/abgmas/imail/dispatcher?action=imail.template.admin
  • Username: mktgrp
  • password: mktgr0up
• After you log in you must go to another URL in order to complete the login process.
• Login Step 2: https://www.e-access.att.com/abgmas/imail/dispatcher?action=imail.login.verify&csp_ext=Y

--create new mailer---

• Go to "Admin" section
• Click "Create Template"
• Input client provided Campaign (Template) Name
  • Remove smart quotes, registration marks or non-standard characters
  • Shorten If necessary
  • "(Alliance-SP)", "(Alliance-ASP)" or "(Wholesale)" should be added to the Campaign Name for those versions (when applicable)
• Add client-provided email subject line
• REMOVE SPACE IN "POSTSCRIPT" AREA!!!!
• Click "Save"
• Load Mailer HTML
  • Click "Email Body". You will be taken to new page to attach HTML file.
  • Attach HTML file, and then click "Save & Continue"
• Load Mailer Images
  • Ensure that all images are named with JOBNUMBER-image.jpg.
  • In the "HTML Resources" Section, click "Add"
  • Attach image. Images need to be added one at a time.
• Preview the mailer by clicking "Preview" at bottom of page. Verify that all images are linked and everything appears okay. If not, go back and fix any issues before sending a test.
• Send test by clicking "Send Test Mail"

Javelin Mailers

This type of AE mailer has a completely custom design and does NOT use the standard mailer html template. Usually there is a Photoshop (PSD) file attached to the job number in seeker that you will use to slice images from. Here are some general instructions on creating a javelin mailer.

• 1 - Download all assets from seeker. Usually the following:
  • PSD file - to slice images from.
  • PDF Final Copy - this is meant to show you the final appearance of the email- the copy in the PDF and the copy in the PSD could differ slightly. If so, use the copy from the final PDF.
  • PDF Link Map - Another pdf that shows what elements will be hyperlinks and where they should link to.
  • Excel Spreadsheet - Contains Template Name, Subject Line, and Variable information. Sometimes javelin mailers will have multiple versions - a retail, a wholesale, a federal gov - that are all very similar except maybe a few sentences are different. This spreadsheet will explain what the text differences are between versions.

• 2 - Go to the AE Mailers folder on MEGvault and duplicate an existing javelin mailer job folder. You'll notice that javelin mailer job folders are labeled suffixed with "-javelin". For instance "job_12346_javelin". Follow that naming convention for javelin job folders. Use this existing html as a template.

• 3 - Build out new html. Some things to consider:
  • You do not have to use the standard signature block. Follow the design exactly and use whatever signature/signoff provided in the design.
  • The footer, however, should be consistent for all javelin mailers, so if the footer is different in the design, make sure to use the footer from the javelin template you copied from. The footer for javelin is different than the standard mailer footer.
  • Non-photographic images should be GIF or PNG. JPG should only be used at High or Very High quality to avoid compression artifacts.

• 4 - Litmus test the following email clients:
  • Outlook 2003, 2007, 2010, 2011, 2013 (and any future versions of outlook that are released)
  • iPhone5, 6, 6 Plus,
  • Gmail - Chrome, Explorer, FF
  • Yahoo - Chrome, Explorer, FF
  • Outlook.com - Chrome, Explorer, FF

To log in to litmus go to http://www.litmus.com and use sysadmins@medge.com / 1555ruth

If you find any issues with any of those email clients, do your best to fix them before sending an AE Mailer test.

• 5 - Upload to the AE Mailer tool and send test email

• 6 - Post the Litmus URL to Seeker, along with a zipped file containing all email assets