go back
Manny B.

Email Development

Over the years as an email developer, I’ve encountered and solved a variety of technical challenges. Here are some key development hurdles I’ve tackled, along with the solutions that have helped create more efficient, accessible, and high-performing email campaigns.

Accessibility optimization.

For this project, I reviewed accessibility standards and best practices to enhance email usability. I then took it a step further by styling alt text, ensuring that recipients still had a visually cohesive experience—even when images weren’t downloaded by their email clients.

style="display:block; border:0; font-family:'SoDo Sans', Avenir, 'Roboto', Helvetica, Arial, sans-serif; font-size:21px; font-weight:bold; color:#1e3932; letter-spacing:1px; text-align:center;" alt="STARBUCKS®" title="STARBUCKS®"
Starbucks email accessibility side by side comparison

Dark Mode Emails.

This POC was created to explore the support for Dark mode across different platforms.

This technique is more suited for Email campaigns that have a defined structure and static layout.

While color schemes are supported by iOS only, there are some optimizations that can be implemented to mitigate undesired results for other email clients.

@media (prefers-color-scheme: light)
@media (prefers-color-scheme: dark )

Buttons that actually work.

Rounded corner buttons fully compatible with Outlook and dark mode optimized. Using just HTML and CSS.

A couple of Buttons with rounded corners.
Animation showcasing an interactive responsive email.

Interactive and Responsive emails.

As part of a R&D team I've spent quite some time working and testing new mobile experiences.

I can craft beautifully interactive emails with <form>...YES! Can you believe it!? And of course the appropriate fallbacks for email clients that do not support this.

<input type="checkbox" id="navbar-checkbox" class="navbar-checkbox" /> <label for="navbar-checkbox" class="menu" style="padding-top: 8px;"> </label> <label for="navbar-checkbox" class="close" style="padding-top: 8px;">