Slide 1
Slide 1 text
Mastering Email with Ruby
Julie Ng
RubySauna
Helsinki, Finland
8 October 2015
Slide 2
Slide 2 text
Julie Ng
• American Developer in Munich
• Previously Designer at
ancestry.com for European
Markets
• UX Email Developer, Consultant
• Refresh Munich e.V.
Chairwoman
• Runner, Climber
Slide 3
Slide 3 text
Email != hard
Slide 4
Slide 4 text
1. More Code
required to create bulletproof emails
2. Extra Build Step
inline css - thanks Google!
3. Manage shared code?
no best practice conventions when shared CSS
Email is tedious
Slide 5
Slide 5 text
Email Cut Offs
Source: Neil Bursnoll, Adestra
adestra.com/avoid-gmail-clipping-emails
Source: Geoff Phillips, Email on Acid
emailonacid.com
102 kb
Gmail Web
Source: Ros Hodgekiss, Campaign
Monitor
campaignmonitor.com
20 kb
Gmail iOS
15 kb
Mail iOS
Slide 6
Slide 6 text
Email = more HTML
Slide 7
Slide 7 text
Image
<%= " height=\"#{height}\"" if defined? height %>
<%= " align=\"#{align}\"" if defined? align %>
<%= " styles=\"#{styles}\"" if defined? styles %>
<%= " class=\"#{klass}\"" if defined? klass %>
hspace="0" vspace="0"
>
*required for Outlook
Slide 8
Slide 8 text
Bulletproof = more code
and
Slide 11
Slide 11 text
Tables for Layouts
Slide 12
Slide 12 text
Grid with s
… Column 1 …
… Column 2 …
Slide 13
Slide 13 text
You can use instead of
Can use display:block! on for
responsive layouts.
But seems wrong to me.
You can use Margin:5px; instead of margin:5px;
But then beware of CSS inliners (more later)
Bulletproof = NO hacks
Slide 14
Slide 14 text
Defensive Coding
this will not be in Helvetica :(
but this will :)
I will be Helvetica
![]()
Me too. But I might be purple in Gmail.
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
Tedious Builds
Slide 17
Slide 17 text
Compile CSS
Concatenate HTML
Upload images
Build
OK, it's not that hard…
Slide 18
Slide 18 text
Tedious Builds
Inlining CSS = Tedious
Slide 19
Slide 19 text
1. Inlined CSS
(Thank you Gmail)
2. Included CSS
CSS Resets
Desktop resets (e.g. grids)
Media Queries for responsive layouts
2 Layers of CSS
Same, same, but different is hard
Slide 20
Slide 20 text
CSS Inliners Compared
Styliner Juice Premailer Roadie
Language JavaScript JavaScript Ruby Ruby
GitHub Favorites 91 895 1466 865
GitHub Issues 6 10 93 4
Affects Markup? ? sometimes… sometimes… Nokogiri…
Shorthand CSS? ? Yes Yes No
Respects HTML Comments? ? ? ? Yes
Respects ? ? Supposed to Yes
Sometimes? Check issues. Try it.
Stats from September 2015
Slide 21
Slide 21 text
Not all CSS is inlined
/* Do not inline! iOS autolinks */
.ios-footer a {
color: #999999 !important;
}
MyCompany.com
123 Main St
Springfield, MA
Slide 22
Slide 22 text
to inline or not?
Source https://github.com/premailer/premailer/issues/242
Slide 23
Slide 23 text
Bug: Removed Comments
Source https://github.com/premailer/premailer/issues/238
Slide 24
Slide 24 text
No shorthand CSS
.example {
/* This works across all clients */
background-color: #ff0000;
background-image: linear-gradient(#111111, #222222 50%, #111111);
/*
But the same as shorthand does not
because Outlook does not understand linear-gradient, so
ignores all values for background.
*/
background: #ff0000 linear-gradient(#111111, #222222 50%, #111111);
}
Slide 25
Slide 25 text
Do not change or adjust HTML
Preserve comments (esp. if mso)
Do not use CSS shorthand
Inline some styles, but not others.
Include some styles, but not others.
CSS Inliner Checklist
Slide 26
Slide 26 text
A Build System
Slide 27
Slide 27 text
Inline and include CSS without mistakes
Build partials
Preserve Logic
Workflow Wishlist
Slide 28
Slide 28 text
Templates, support for partials
Development preview
Inlines CSS (Premailer)
Missing:
options for individual stylesheets
build partials
preserve logic
grunt-email-workflow
grunt-email-workflow
github.com/leemunroe/grunt-email-workflow
Slide 29
Slide 29 text
Can use Front Matter for custom stylesheets
Has useful content_for helper
Has Live Preview
Missing:
inlined CSS
build partials
preserve logic
Middleman
Middleman
middlemanapp.com
Slide 30
Slide 30 text
Why Partials?
<% @config.products.each do |product| %>
<%= partial :product, locals: product %>
<% end %>
Item
Qty
Subtotal
<%= image_tag url %>
<%= title %>
<%= quantity %>
<%= price %>
TEMPLATE
PARTIAL
Slide 31
Slide 31 text
emails are more than just newsletters.
have re-usable components.
we can easily port inlined partials with preserved logic
into any backend framework you use.
Conclusion
Just because email is more tedious, it doesn't mean we
can't apply general development best practices.
Partials because…
Slide 32
Slide 32 text
Faster Workflow with Ruby
Slide 33
Slide 33 text
1. Development
2. Upload Images
3. Inline CSS
4. Send Email
5. Test/Debug
6. Rinse and Repeat
Workflow
Slide 34
Slide 34 text
demo
Screenshots
Slide 35
Slide 35 text
Inlined Partial with Preserved Logic
Slide 36
Slide 36 text
Preserved Logic
with Regular Expressions
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
Example: Complex Partial
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
My Custom Workflow
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
1. Development: sinatra, sass, rack-livereload
2. Upload Images: fog, aws
3. Inline CSS / Build HTML: roadie, Regular Expressions
4. Send Email: mail
5. Test/Debug
6. Rinse and Repeat
Workflow
Slide 45
Slide 45 text
Julie Ng
@jng5
julie.io
Fin