Summary

Build a responsive email template that aligns with updated brand guidelines. Ensure compatibility with all major email clients and fallbacks for less prominent and/or unsupported ones. Allow non-technical users to be able to create and customize eNewsletters usingn the new template.

Process

I started with loose sketches/wireframes and made notes where potential code compatibility issues were prevalent. Things like applying a scaling hero image and general full-width regions were known incompatibilities in various email clients and would require extensive testing.

The intent of the white header region was to span the full width of whatever it was being displayed on so I wanted the email template to have the same capability. I also wanted the hero image region to scale proportionately to fill with width of the email client window.

Continual testing was done from the initial div/table wrapper to the final template code, which allowed me to more easily identify where things were breaking in various email clients and what workarounds or fallbacks were required. Image sizes were optimized to accommodate the best output across the most email clients.

Template tags were added around various regions to allow other users to pick and choose which regions to include in their eNewsletters using an email marketing software.