Design a Custom Email Template - Part 3 - Ending

In the final part of this mini-series, I begin/finish adding realistic content to the custom email template design I created in Part 2.

I also spend time refining the design to be a bit more minimal. In general, I opted to include a full white background to let the content come forward rather than let the interface get in the way. After some trial and error I landed on a decent concept I think my agency can start with for our monthly newsletter.

Where to now?

The plan from here is to utilize a service like Mailchimp to create editable fields where content may live. This is achievable by modifying the HTML a little further on the theme which builds by example in the Web Designer Depot article I wrote. You can follow along with that article to get an idea of how I first used Foundation for Emails to create a responsive email template.

Extending the template

I'm almost certain my work isn't complete on the template. We may want to feature different content and/or offer more transactional emails rather than just a newsletter format. That said I plan to build more of a working style guide of which I can create reusable components. These components will be branded and will make my life easier as we build custom emails down the line.

Rounding out the series

I hope you found this short series beneficial. Emails can be a big challenge today (they always have been actually…). You'll need to go back in time to refamiliarize yourself with HTML tables and the limitations between common email applications.

From that point forward you can begin designing for such limitations and hopefully produce something you are pleased with despite all the drawbacks. Foundation for Emails is a huge help when coding emails. I strongly recommend that framework to make the process extremely easy.

Watch the complete series

• Part 1
• Part 2
• Part 3: You Are Here