rethinking how we manage email development & delivery
TRANSCRIPT
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