Email Templates

Example Previews.jpg

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.

 
responsive-device.jpg

Responsive

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

 

 

Litmus approved

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

litmus-testArtboard 1.jpg
 
markupArtboard 1.jpg

Newbie Friendly

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.

Always improving

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.

 
 

Check out my most recent email on CodePen