HTML E-mail Design & Development


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)

Screenshot of marketing campaign e-mail portion

A Customer Communication E-mail Example

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

Screenshot of a mostly-text customer communication e-mail

Coming Soon

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


Examples deployed with Github Pages.

View the repository on Github.