Product, UX, & Visual Design

HTML Email Design & Development

HTML Email. Two words that, when combined, bring tears to a developer’s eyes.

Image alt tag

The year: 1999

We called ourselves “webmasters”, some used Frontpage, WYSIWYG editors, and tables to mark up our websites.

Coding HTML email today is still pretty much like that. Old school.

Sadly, not a lot has changed in email design. In fact, some may argue that it's worse.

HTML Email Design & Development

Technology has evolved.
Email development hasn't.

I mean, if we're writing target statements like this:
<!--[if gtemso 9]>
oh boy. let the fun begin.

With the introduction of mobile devices and more and more email clients, we have even more caveats to deal with when building HTML email.

I could go on about the challenges of targeting browsers, devices, and platforms in HTML email design, but I'll spare you the details.

So what did I do?

I owned the design and development of all Surgical communications end-to-end; from concept and visual design to coding/development, testing across all platforms/devices, to the integration with the CRM system, to distribution list management and deployment, to metrics reporting.


Art Direction
Visual Design
Code Development
CRM Integration
Metrics Reporting

All HTML emails shown here were developed in responsive design to accommodate:


Identified an annual divisional savings of $1.17M in one fiscal year by streamlining workflow and reducing vendor expenses in the HTML email design and development process.

(Integrated Marketing Budget of $2.1M)

What did I learn?

Two words? A lot.

Basically, if you're not using a platform such as Campaign Monitor or MailChimp with WYSIWYG editor and templates for your HTML email design, you need to know what you're doing. A few key things that will keep your customers happy:

  • Account for mobile-friendliness. Use media queries to increase text sizes on small screens, provide thumb-sized (~44x44px) hit areas for links. Make an email responsive if the design allows for it.

  • Test, test, test. And test. Create email accounts across various services, and send emails to yourself. Do this in conjunction with services such as Litmus.

HTML Email Design & Development

Thanks for reading!

Be sure to check out some of my other projects below.