About the email
This is a booking confirmed template that I created for Danny's Mobile Detailing, a business located in Phoenix, Arizona. At first it was just supposed to be a simple template with one section containing the booking details and a CTA to view or change them on the business's website but the business owner told me that they are familiar with HTML/CSS. After hearing that I felt free to go ahead and give them as many progressive enhancements as possible without bloating the code too much for this style of email. I coded in mobile image swaps and a faux reel preview they could update weekly with any new reels they create. I also took the opportunity to familiarize myself with horizontal and vertical faux absolute position, a variation of the original vertical faux absolute position technique. 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 business wanted a booking confirmed email that was engaging and stood out from other companies. They realized that to do this they needed to hire a developer that could design, code, and test the email rather than use a template builder. 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 getting the spacing correct on the faux absolute position section of the email, it took hours of testing and refactoring code. Another unexpected obstacle I ran into was that the business didn't have their logo on any of their detailing vans or employee t-shirts. To overcome that lack of assets I got creative and used the perspective crop tool along with lighting adjustments to make the logo look like it is part of the van and employee's t-shirt in the email images. Some of the main features are:
- A background that displays on mobile viewports
- mobile image swap at 480px breakpoint
- Faux absolute position 'contact' section
- Faux Instagram reel using a gif
- 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.
