Email Enhancement - Automatic Inlining of CSS Rules

[Brice_Dunwoodie]

Making emails work consistently across clients is notoriously difficult, and one of the most popular platforms, Google App / GMail, only allows for inline CSS (CSS style rules embedded directly in each HTML element).

This can be very difficult to maintain, especially if you have CSS rules for links and have non-technical people editing your emails who might just copy and paste into an editable filed, versus editing the link href and text values. This scenario and many others can disturb, change or remove your inline styles that exist as children of the marketo editable HTML nodes.

The solution is to have the option to have Marketo automatically inline all CSS rules prior to any send. This could be a checkbox in the email settings for an email item.

This is not difficult and infact I believe it already exists in other platforms. There are definitely working examples out there in the wild, so this should be pretty easy from an engineering standpoint. The UX work is drop dead simple -- just add a checkbox to settings.

Here's one example from MailChimp:
http://beaker.mailchimp.com/inline-css

Here's another example:
http://premailer.dialect.ca/

Here's another example in PHP:
https://github.com/tijsverkoyen/CssToInlineStyles

This change would literally save us hours and hours of work each month, plus allow us to deliver a more consistent and high quality customer experience to our subscribers. Other enterprise email vendors already do this. Marketo, please prioritize this -- you seem to be behind the times in this department.

[Chris_Vanderma1]

This is a basic feature of many far cheaper solutions and really should be included in Marketo. Please add this!

[Anonymous]

Please implement this! Honestly, while Marketo is ahead of the game in terms of email analytics and segmentation, it is an absolute nightmare to develop responsive emails with carefully crafted css. Alternatives like Mailchimp make this easy by:

1. Automatically inlining css styles in template (these would need to be applied to each snippet as well) before sending email.
2. Providing support for repeater and variable-content regions, so developers & designers can build highly-customizable templates with several choices for how to layout content (instead of simply snippet blocks where you can stick whatever html you please). 

For a developer standpoint, this means my workflow goes from:

Mailchimp:
Bulid html & css template -> Add special tags & properties (e.g. mc:repeater) -> Paste into mailchimp -> (content editor then modifies editable regions w/ drag & drop tools and email is inlined before it's sent).

Marketo:
Build html & css template -> Add special tags & classes (e.g. .mktoEditable) -> Inline the whole thing -> paste the header and footer into Marketo as a template -> paste various other parts into snippets -> (content editor wades through vast swaths of html with inlined css (makes it very verbose) to fix tiny spelling errors and update images)

The bottom line about inlining late, instead of early, is that you (and your email editors) get to work with clean html at the template and snippet stage. If we have to inline first, then editing pieces of emails becomes very tedious and error prone. Inlining late also allows you to create html elements in snippets with relevant classes (defined in template):

<li class="my-list-item">some text<a href="#">my link</a></li>

instead of (at the snippet stage) trying to edit and duplicate this:

<li style="color: #666666; font-size: 18px; line-height: 1.5; padding: 10px 0;">some text<a href="#" style="text-decoration: none; color: #333333 !important; font-size: 15px; background: #f5f5f5;">my link</a>

Thanks!

[Chris_Vanderma1]

A big +1 from my end of things, Micah. As a former MailChimp user was quite dissapointed by how painful developing emails in Marketo can be. Especially responsive design for mobile and inlining to better support gmail.

If you're new to Marketo wait till you try conditional commenting to support Outlook and you'll see Marketo arbitrarily strips them out. It's maddening.

Markto, please listen up! Your users have spoken. You could be doing a lot better here!
 

[Grégoire_Miche2]

Hi all,

have anyone tried any of these tools ? :

• Premailer: pre-flight for HTML email
• HTML email inline styler

Best regards,

Greg

[Anonymous]

Greg,

There are many, many tools for manually inlining css. I personally use Ink: Email CSS Inliner , but these seem like valid alternatives.

This discussion is about automatic inlining as part of the email-sending process, so we don't need to do it manually.

- Micah

[Chris_Vanderma1]

Greg,

As Micah mentioned, to be truly effective this really needs to be built into Marketo. Using a 3rd party tool only slightly accelerates the process of doing it manually. Building, testing and editing emails is extremely tedious if you need to manage inline styles at the same time.

It also defeats the purpose of templating emails. Lets say your workflow is to create a new email from a template, drop in content, do your editing and then your ready to deploy. You then have to run all of the code through an inliner, and then what? You replace all of the code in the email with the output of the inliner, breaking the link between the template and the email.

I'm still surprised that this isn't included in Marketo which costs thousands per month when it is included with Mailchimp which is $50/month. At least we're being heard; conditional comments being stripped from templates was fixed in the last release. Maybe there is still hope for this idea.

[Grégoire_Miche2]

My idea was to inline the template, not the final email. That could do most of the job since no one is going to add css while editing the email, only inline css. So the template could be inlined.

IMHO, it is quite a complex issue, because it does not seem that inlining is compatible with media queries and responsive design.

Best regards,

Greg

[Chris_Vanderma1]

Hi Greg,

I think that true inlining would be impossible to do at the template level, unless you have found a method that works that I'm unaware of.

True inlining should take all of the styles being used at the stylesheet level and then inherit them down to the content level so that p, a, span, div, etc... have an inline style="" applied on each individual tag.

I have applied font styling to td containers with mixed results. This seems to help with some webmail clients but not all.

[Casey_Noland]

This has gotten even more critical with the new email editor 2.0 in Marketo.

The ability to use variables is great and *almost* has saved us from having to have multiple versions of each of our templates as our different channel teams use different color sets. However the dreaded Gmail issue plagues us as our classes changed by variables are stripped out... two steps forward 1.5 back...

Big vote for automated inlining prior to send.

[Grégoire_Miche2]

Hi All,

the editor 2.0 enables to inline the template before using it. Not as perfect as inlining the final email, but it is doing quite a good job already, from what I have been able to test.

-Greg