Re: Converting a Landing Page Template to an Email Template?

Anonymous · ‎04-30-2018

I've created several guided landing page templates for Marketo which work well. These templates use SCRIPT and STYLE tags in the HEAD and footer area to link to external css and scripts.

I converted a landing page template to an email editor 2.0 template and all seemed well, at first glance, Marketo shows me these templates as rendering fine. However when doing an actiual test send and checking in GMail, none of my styles render.

Is this because I am linking to external styles?

Where should my styles be placed and how complex can then be?

Is there a best practice rule for CSS in emails?

All the email templates I have looked at use tables and inline CSS, I am sure this is done for a reason, why, is this the way to go?

Jay_Jiang · ‎04-30-2018

There is a ton of content on how to create html emails all over the web. The challenge is creating a single email that is compatible and looks good across multiple clients and platforms.

Succinctly in reply to your questions though:

Delete any <script> in an email template. Don't link to external stylesheets. Generally, spam filters don't like these in emails.

You can use CSS in the <head> tag. You should put what CSS you can inline as well for compatibility. There are a few email building frameworks which are complex in combining inline and media query CSS to deliver heightened compatibility and good looking emails.

Certain clients will ignore certain style rules, it all depends on how good you want your email to look and how perfectly you want your email to display across platforms and clients, it's going to be very hard to cater for everything.

Tables and inline CSS are used because they're a good compromise of simpleness and compatibility.

Google is your best friend to learn more about email templating.

Grégoire_Miche2 · ‎05-01-2018

Hi Gaird,

developing for landing pages and developing for responsible, multi client email is such a different technique that I strongly recommend you do not try to take the LP code and make it a email template. It just cannot work.

The position of the CSS (that should be in the template itself) is just one on the problems. You should also get rid of any advanced CSS, all of the JS and inject all the code needed to support older email clients.

Far better to start from your graphical design and have an email template developer create that email template for you.

-Greg