New Ground Transactional Email

A fully accessible and responsive Transactional email template that I designed and coded for New Ground Jiu Jitsu's store page

New Ground Transactional Email
Client
New Ground Jiu Jitsu
Services
Email Development
Technologies
HTML/CSS

About the email

This is a transactional email that I developed for New Ground Jiu Jitsu online store purchases to let buyers know that their items have shipped. There's nothing really major going on here but I still feel like it is worth sharing because it demonstrates good email code with my proper usage of tables to create the "items shipped" section. 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 email was to create a simple white background transactional email template that could be used both ways if the headline said "Order confirmed" or "Order shipped". 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. I didn't really face much challenges during the development of this email which means that there is room to improve it. I'll be working on a new and improved template and will update this page in the near future with a design that was difficult and took a lot of time to complete but is still streamlined to work as a transactional email. If nothing else, the development process improved the confidence I have in my skillset because it taught me that I am getting faster at both designing and coding emails out. No imposter syndrome here! Some of the main features are:

  • 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.

New Ground Transactional Email
New Ground Transactional Email