This is a more technical than usual post about sending emails that look great on mobile devices as well as the web.
I spent some time this weekend making HUGE improvements to our default layouts.
If you’re a customer, you can just grab the HTML to update your layouts.
https://github.com/customerio/skins
Otherwise, if you’re an adventurous soul who wants to learn more about email layouts, read on!
Most email code is a dirty mess
If you’ve ever built an email layout (or looked at someone else’s) you know that it looks like someone put a bunch of CSS in their mouth and spat it all over all of the HTML tags in the email.
It is frankly, atrocious.
All of the good practices of design for the web get thrown out of the window. This drives me crazy but…
Inline styles are a necessary evil in email
I’m assuming you have just a little bit of email history and know that for styles to show up, you need them to be inlined.
Not all styles are supported by all clients.
The ideal
<p class="caesarquote">Veni, vidi, vici</p>
What html in email actually looks like:
<p style="font-size: 24px; font-weight: 600;">Veni, vidi, vici</p>
How can we have the code that we maintain be more like the ideal?
You can keep layouts clean by inlining CSS on send!
We use the Premailer gem (monkey-patched to ignore @media queries). Premailer’s inlining of styles when we generate an email allows us to keep our layouts super-clean.
Here’s the code for one of our layouts
You should also keep things really simple. Complex layouts are more work for you and won’t necessarily convert better.
Add just enough @media query magic to render great on mobile
The magic line that allows you to specifically target mobile devices is:
@media only screen and (max-device-width: 480px)
After that the strategy is to make sure the tables and cells within the email are resized to be no larger than 320px.
The problem I often ran in to is that images would bust out of my templates. So there’s this magic line:
td img { height:auto !important; width:100% !important;}
That will make sure the image fills the space but doesn’t break the layout.
Check out the minimal amount of work you need with @media queries in our ridiculously basic layout
Keeping things simple lets you build great, resilient email templates over time
If you keep things simple, you can make great responsive email layouts for mobile. Stick to single columns, resize the images automatically, and focus on using great words, rather than flashy layouts.