Custom email marketing template projects and course work
I went through a course on creating responsive HTML email to become aware of the modern front-end architecture involved in hand-coding an email template from scratch. The problem was to create a unique email template that is supported across as many possible major browsers, email clients, and devices (desktop, tablet, and mobile). Below are a few of the action steps I did along the way:
- Coded the media queries, tables, and in-line styling required.
- I was provided Photoshop smart object files to slice and bulk export as original graphics. The high definition graphics (ending with file extensions 2x) were created as well by doubling the number of pixels in those graphics.
- Implement HTML5 video into the video with appropriate breakpoints for medium and small screen sizes.
- Validation of HTML code using W3C's Validator
- Use Litmus to determine compatibility across different browsers and email clients
Using the free version of Litmus, I was able to pass compatibility tests across the 3 email clients offered - Outlook 2013, Gmail(Chrome), and iPhone 6s. The fundamental lesson I learned from this project is that if email clients do not support certain design features or elements, it is important that it does not sacrifice the design’s overall integrity. The more simple the email design, the more likely the email will render properly in the most number of email clients.
I also learned that there are certain limitations around HTML emails, such as that the layouts will not always be pixel-perfect in all email clients. So, from a marketing standpoint, it is best to prioritize what the most important email clients need to be supported by the email campaign sent.
View the responsive email templates below
| Template Type | Weblink |
|---|---|
| Main Email Template | http://vineyard-email.netlify.com |
| HTML5 Video Optimized | http://vineyard-video.netlify.com |
| High-res/retina display-ready | http://high-res-vineyard.netlify.com |