Rethinking the transactional emails approach

HELLO!

I am Cedric DugasProduct manager & senior front-end dev

(worked 3+ years at CakeMail, building 2 emails wysiwyg)

@posabsolute

A small bit of historyWhy is it so hard to do emails?

A bit of history

It’s 2007.

A bit of history

“We’ve made the decision to continue to use Word for creating e-mail messages because

we believe it’s the best e-mail authoring experience around…

William Kennedy

Corporate Vice President, Office Communications and Forms Team

The power of Word in Outlook

The Outlook madness

OUTLOOK

2000 2003 2007 2010 2013

The Outlook madness

OUTLOOK

2000 2003 2007 2010 2013

IE? IE?

Outlook 2000 & 2013 use the IE version installed on your computer, to this day it is possible to have it with IE11 (but it majorly fails)

Litmus seems to show with IE6 which should be the most used version.

The browsers madness

OUTLOOK

2000 2003 2007 2010 2013

Custom Custom Webkit Custom

Mobile

Custom (no responsive) WebkitWebkit

The Browsers madness

You thought that integrating for IE6 is hard?

The Browsers madness

Give it to the intern!

Let’s fix our emailsWith some nice (javascript) tools

Zurb Ink

Zurb Ink

Ink responsive trick

When you view an email on a device with a viewport less than 600,

Ink use the row table & put all wrapper td to display block

Zurb Ink

Ink is not a silver bullet

1. Weird reset rules on img & margins on elements2. Still LOTS of tables3. No SASS or LESS structure, one big mangled css file4. Will not save you on everything else you write

outside of ink like background images

But you should still use it

CSS Inlining

Premailer

1. Generate an html version with your styles inlined2. Fix stuff you don’t even know3. Warn you when you use stuff you should not.

Premaier

Premailer

Premailer

Stop copy pasting! There is a grunt plugin

Automation Tools

Stop wasting time doing these things by hand

1. Litmus

grunt litmus:dist/output/sidebar_hero/index.html

2. Send test emails (grunt-nodemailer)

grunt email --fileSrc=dist/output/example.html

Thinking about how we manage & send email

Processes & Architecture

Processes & Architecture

Processes & Architecture

“Hey guys,

We need to change our email header everywhere, we are changing of identity, it’s going to be awesome!”

Processes & Architecture

?*(&#$(*&$(*#$& ?*(&#$(*&$(*#$&

?*(&#$(*&$(*#$&

Processes & Architecture

Processes & Architecture

Other things to think about

1. Failover! sendgrid goes down, what happen to your forgot password emails?

2. Asynchronous, your customers should never wait for your provider response.

3. Logs, you really want to know when you stop sending email or if your provider is down.

4. Providers have poor templating languages, do not get stuck in them.

Is there a silver bullet?

Yes & it’s called Inker.

Inker

Coding

1. Base templates goodness2. Sane CSS components structure 3. Sane HTML components 4. Localization5. Keep it clean, generate templates

with inlined CSS6. Auto deployment on litmus7. Auto deployment to any email

address for testing

Email Delivery API (nodejs)

1. Automatic Failover2. Asyncronous3. Generate emails with custom data

on the fly4. Integrate all major email delivery

providers5. Logs! hipchat, slack, logtenries,

winston, push notifications.

inker.position-absolute.com

Processes & Architecture

inker.position-absolute.com

THANKS!

Any questions?You can find me at:

@posabsoluteposition-absolute.com