TRC Newsletter Email

A fully accessible and responsive newsletter email template that I designed and coded for TRC to showcase my development skills.

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

About the email

This is a rather simple email but I believe it's still worth showcasing because of the skills required to develop it. 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 surprisingly not a coding problem. It was a design problem, the yellow icons at the bottom of the email had to be removed from their backgrounds using a 1px background eraser tool with my screen zoomed all the way in on photoshop. It wasn't something I could just use the "background remove" tool for, the pixels were much too small. The task was quite tedious to say the least. However, I'm glad I was presented with that challenge because it forced me to improve my efficiency with several tools in Photoshop. Some of the main features are:

  • A background that appears on mobile viewports
  • Button hover effects
  • Image fade effects
  • Dark mode optimized

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 Newsletter Email
TRC Newsletter Email