Where to import emails designed in separate authoring tool?

[Dan_Stevens_]

Sometimes we'll create the complete email outside of Marketo (either within a separate tool like Dreamweaver; or provided to us by an agency using our design templates).  In order to use these within a Marketo program (and since you cannot import them directly to the program), do we need to import them into Design Studio and refer to them using the Smart Campaigns in the program; or would we import these as a template (even though they're not true Marketo templates), and create a local asset within the program based off of these "templates"?  Just looking for some best practices here.

[Anonymous]

Hey Dan -
I used to build all my own emails in Dreamweaver. Once I was finished I would open up the email and Replace HTML and paste in the new HTML. This will break it from being connected to a template, then you just have a solo email. It'll work that way. 🙂

[Anonymous]

It is fine to use authoring tools to create content. While I fully agree replacing HTML in Design Studio is a cool and handy feature, I woudl suggest creating the blank template, adding the CSS generated by the authoring tool and then copy all content between the body tags and paste into the email editor using the HTML button. 

The benefit is the consistency and other functionalities inherent to templates.

[freelancer]

How do we make the template editable? I also created a template in Dreamweaver and would like to import it and make my fields editable. Any suggestions? Thank you.

[Dave_Roberts]

Here's a link that I bookmarked and referenced a ton when I was learning to do email "the Marketo way": https://docs.marketo.com/display/public/DOCS/Email+Template+Syntax

Here's a few things to think about when going from a custom HTML email into a "Marketo-style" email:

1) There's a container element that's basically the wrapper for all your modules, kind of like the "canvas" or parent element that wraps around all the modules. I usually choose a <table> for this. There's a relationship between the parent element (container) and the modules (children) in that there can only be one container and all of the modules MUST be a child of that container. In my case, I work with the <tr> inside the <table> to use as modules. Check out the "Modules" section in the link (toward the bottom) to get more info on this bit.

2) Think horizontally in rows. It's much easier to code a big table w/ three columns (<td>) and use the left and right column as padding down the entire left/right side of the email. In Marketo, you'll want to include that padding inside EACH module so that you can cut the modules cleanly across the entire "page". 

3) I prefer to use a <div> inside a <td> for the "editable area" - ex. <div class="mktoText"> .... </div> - and try to use the <div> for ONLY the editable classes you need for Marketo. If you've already got your content in a <td>, just nest a <div> inside of the <td> instead and move your content into an editable <div>. I think it's easier to keep the styling stuff on the <td> and leave the <div> as vanilla as possible.

4) Make sure to read up on the difference between Global Variables and Local Variables, there's kinda two levels of control for the variables (user controls) in a Marketo email. Let's say you've got a color variable, at a Global scope - changing the color will update ALL modules in the email to use that color instead. Whereas if it has a Module (local) scope, changing the color input in the editor will ONLY change that color in this specific module. I think it's easiest to make everything local unless you've got a reason to make it global b/c then you can change everything in every module to be a little different. A case for a Global scope might be something like a button color that you'd want to be the same for every button in the email (and probably tied to your branding palette).

[freelancer]

Thank you Dave. This was helpful!