I worked with a copywriter to develop some modular email templates for email campaigns across many clients.
We looked at common modules like headers, logo sections, footers, lists with images, and call to actions. We used these to design a variety of html modules formatted to work on all email clients across all digital displays.
I used the responsive table method to display the emails across desktop, tablet, and mobile devices.
Responsive features include:
Click to call buttons hide on desktop
Images scale for device width
Listed items and images remain sorted on mobile devices
Content wrappers disappear to create more space on mobile devices
I tested and proofed each module format across all common email clients: gmail, android, apple, outlook and microsoft products, and yahoo.
Cross-client features include:
All styling is in-line
GIF animations have backup still images for display
Background images have backup background colors and microsoft specific coding for display
The email is easily styled with consistent variables for brand colors, fonts, logos, and social media links.
Content is also easy to search and replace using consistent placeholder content.
Marked up and commenting helps describe each module for those unfamiliar to HTML and CSS.
Modules are added to the template as they are created for new campaigns. Click tracking helps us split test different module styles and formats across campaigns to refine these modules over time.