About the email
This is an email I developed for an event called "Open-Mat" that New Ground Jiu Jitsu holds every weekend where practitioners from other schools are welcome to go train. It's pretty much a big training session where you get to test your skills against people you've never seen before instead of your usual training partners. The business owner wanted a template he could send out to new members inviting them to attend open-mat as well as reminding them to follow the school on their social media pages. I went ahead and added a rule section pertaining to the event and a section where the business owner could easily swap out the text and image to promote a new item in their store. 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 project was to invite new members to open-mat on Sundays and remind them to follow the business so that they can receive daily updates. The business owner wanted a responsive template he could easily swap images and links with. 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 making the email more than just a plain hero image with double buttons. I had to collaborate with the business owner and decide what sections would make sense to add. They decided that the "Rules to remember" and "Submit them in style!" sections I proposed were acceptable. I edited the hero image collage to have rounded corners and gave it a blue hue using Photoshop to remain on brand with the rest of the email. A nice little trick I learned during development was how to swap images from desktop to mobile, giving the email a different feel on smaller viewports. Some of the main features are:
- Mobile image swap at 480px breakpoint
- 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.
