TRC Marketing Email

A fully accessible and responsive Marketing email template that I designed and coded using what I would consider "advanced" email coding techniques for TRC to showcase my development skills.

TRC Marketing Email
Client
TRC
Services
Email Development
Technologies
HTML/CSS

About the email

A beautiful email I developed that taught me a lot about design and development. Two key skills I learned were gif creation/optimization and how to effectively use VML to make faux absolute position work in all email clients. The email is optimized for dark mode, tested with Email on Acid and real devices; and is working on over 100+ email clients. Some of the tools I used to execute the development of this email are:

  1. Adobe Photoshop
  2. Adobe Illustrator
  3. Parcel
  4. Figma
  5. Email on Acid

What was the goal of the email?

The goal of the project was to demonstrate good email code/proper design practices as an attempt to get hired for TRC's open email developer role. I also wanted to share my knowledge of testing emails and making them work on as many email clients as possible. I go over more details, accessibility tests and Email on Acid tests in the video below:

Email execution

I used the hybrid coding technique with media queries added as a progressive enhancement to develop this email and make sure it works on virtually any email client. The biggest challenge I faced during development was learning how VML and faux absolute position work. Hours of testing and reading through Microsoft's documentation on VML were required to complete the development of this email, other resources like goodemailcode.com helped me out a lot too. Gif creation/optimization wasn't as much of a challenge as I expected it to be but I consider it a invaluable skill I gained during the development process. Some of the main features of the email are:

  • Rounded edges on inner containers
  • Faux absolute position with image fade effects
  • Faux video preview using a gif
  • Button hover effects

Email results

The result is a fully accessible and responsive email that works on 100+ email clients and a new set of skills that I can forever call mine. What does fully accessible mean? It means that this email's content can be consumed by all audiences, including people using screen readers and assistive technologies. According to the 2023 Accessibility Report done by the Email Markup Consortium, out of 293,658 emails tested from multiple industries in multiple languages 99.97% of those tested contain accessibility issues categorized as “Serious” or “Critical”. That's 35 emails, meaning only 0.01% of those emails passed with no issues. If you want to work with the top 0.01%, I'm your guy.

TRC Marketing Email
TRC Marketing Email