About the email
This is an email I developed for New Ground Jiu Jitsu to help announce the seminar of a famous jiu jitsu practitioner they held on August 18th 2023. I wanted the email to really grab the attention of it's intended audience and help the business get a ton of sign ups for the seminar. I decided a good way to do this would be to use a linear-gradient background that shows on mobile viewports, a large CTA button with the same gradient, and aesthetically pleasing rounded corners on the email container holding all of the content. I went a step further and learned how to change the color of images pixel by pixel on Illustrator, which resulted in me adding a custom linear-gradient to the ADCC and 10th Planet images/logos beneath the "Who is PJ" summary. The business expected the intended audience to already know who the seminar instructor was upon receiving the email but I don't like to leave anything up to chance. I did my own research on the instructor so that I could write engaging body text. I then used the same linear-gradient as the background to make the content's headlines standout. 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:
- Adobe Photoshop
- Adobe Illustrator
- Parcel
- Figma
- Email on Acid
What was the goal of the email?
The goal of the email was to help the business get as many of their customers as possible to sign up for the seminar and make sure that the linear-gradients would work and have proper fallbacks for the email clients that don't support them. 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 creating a proper gradient fallback for the email clients that don't support them. I had to read documentation on VML and familiarize myself with MSO style attributes. Reading through caniemail.com I discovered what SVG images are and decided to use one as a fall back for the linear-gradient background due to the support SVG images have on most versions of Outlook. Figuring out how to create a SVG image and encode it to create a URL I could plug into my code was pretty daunting because there just isn't much information on how to create one and make it work for email development. Despite the challenges I was able to get it done and learned a rare skill because SVGs don't need to be hosted anywhere and they aren't just for creating gradients. SVG images could help improve my email' deliverability in future campaigns due to their little to no file weight. Some of the main features are:
- A linear-gradient background that appears on mobile viewports
- A linear-gradient background color on the main CTA button
- Linear-gradient headline text
- Custom linear-gradient images
- 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.
