JENN CUNNINGHAM
Product & Visual Designer

HTML Email Design & Development

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

Image alt tag

HTML email design & development is a beast.

Think back to 1999, when we called ourselves “webmasters” and used Frontpage, WYSIWYG editors, and tables to mark up our websites.

Coding HTML email is like that. Old school.

Not much has changed in email design. In fact, it has gotten 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.
<![endif]-->
🤦🏼‍♀️

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 for the purposes of this presentation, I'll spare you the details.

So what did I do?

At Hologic, I owned the design and development of all Surgical Division communications end-to-end; from creative 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.

Roles

Art Direction
Visual Design
Code Development
CRM Integration
Testing
Deployment
Metrics Reporting

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

Results

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?

In 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.