Microsoft Marketing Campaigns

Email Development

SKILLS…

Front end development, testing

TOOLS…

HTML, CSS, AMPScript, JavaScript, Bootstrap, Litmus, Marketo, Exact Target, Sublime Text

DELIVERABLES…

Technically precise emails and landing pages that render well in multiple email clients, browsers, and devices.
View code samples on GitHub.

Image
Image
Image

My primary role at Catalysis has been to develop emails for a variety of products for our main client — Microsoft. These email campaigns are dynamic and are sent to multiple countries all over the world. I work closely with the Interactive Producers and Project Managers to develop emails and sometimes landing pages to accompany the emails. Because there are a plethora of email clients that come with their own sets of rendering issues, it is incredibly important that the code is technically precise and a thorough testing process takes place before send. Some of the Microsoft products I have worked with have been Azure, Dynamics 365, Expert Zone, Power BI, and Office to name a few.

My process to develop an email is a combination of working in Exact Target or Marketo and a text editor, I usually work with Sublime Text. Bug tasks come back from the Interactive Producers and can be anywhere from updates from the client or rendering issues, broken layouts, etc. It is a big part of my position to fix these issues and re-test. The emails also go through a localization process and are translated in up to 47 different languages including right-to-left languages Hebrew and Arabic. This comes with it’s own set of problems and I am often fixing bugs and updating emails in another language.

Besides email builds, I would continuously brainstorm on ways to improve our process or templates. I have highlighted a couple of those projects below.

Image
Image
Image

One project I took on was the re-development of the Azure Newsletter landing page. Each month, the Azure Newsletter is sent to over 1 million people in both English and Japanese. Along with the newsletter, we also create a landing page that has filters the user can click through for more streamlined reading.

I first identified issues with the previous landing page.

  • Using email structure
  • Old/Unused tracking code
  • Formatting was all over the place from multiple updates over time
  • Part of the process was to clone the template each month, defeating the purpose of a template.

The new template used a different process in Marketo. I built it to have dynamic editable regions that the devs could edit each month, instead of modifying the template. I also took out all of the email table structures and incorporated Bootstrap, making it responsive and up to web standards. Lastly, I removed the old tracking code and after meeting with the analytics team, I added in a  relevant tracking system.

Image
Image

Anther template update I worked on was the email templates for Expert Zone. These templates are coded with a combination of HTML, CSS(inline and embed), and AMPScript. AMPScript allows me to code variables into the HTML and CSS.  There were two templates — one for a single story and one for multi story. W e are also able to dynamically change the brand colors and photos with AMPScript, depending on if the brand was Insiders, Xbox, Windows or a custom adhoc send. We are also able to add dynamic sections for localized copy.

Improvements:

  • We now have a starter template for either single story or multi story newsletters
  • Removed all padding except for a couple classes in mobile on the multi-story template
  • Removed unnecessary code from table cells
  • CTA Arrow is fixed in Windows 10 mail (was cutting off)
  • Faint horizontal lines in Android have been removed
  • Universal CSS classes implemented
  • Both templates now support localization

Testing done for both templates in:
Desktop:

  • Yahoo: Chrome, Edge, Firefox, IE
  • Gmail: Chrome, Edge, Firefox, IE
  • OL16
  • Windows 10 mail
  • Office 365 online

Mobile:

  • iPhone 6+ gmail, native mail app
  • Android gmail, native mail app
  • Office test phones – iPod, iPhone, Android

Litmus
Alias/Alt Tags checked
Tested German locale with lots of extra text

BACK TO TOP

HOMEPAGE