HTML E-mail Design & Development

Background

Believe it or not, sometimes we need to send styled e-mails without a fancy service.

E-mail development is actually pretty tricky.

For example, when developing e-mails for Safrapay, I had to revert to using an html <table> layout instead of a modern layout like css-grid.

Between how the html was handled in the Salesforce tool we were using at the time (we didn’t have access to their more modern marketing suite) and how different e-mail clients (Outlook only reads inline styling. No stylesheets or even ids!) display html, I had to creatively go backwards.

The E-mails

Select an item below to view examples of e-mail templates I’ve developed from scratch with vanilla html & css.

A Marketing Campaign E-mail Example

Github: A Marketing Campaign E-mail Example (Safrapay)

A Customer Communication E-mail Example

Github: A Customer Communication E-mail Example (Safrapay)

Coming Soon

The e-mail they send you when a comet is about to hit Earth. ☄️

Github

Examples deployed with Github Pages.

View the repository on Github.

By Jason James

Design, systems thinking and business for the common good. http://jasonmjam.es Twitter: @jas0nmjames

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s