Anyone have email template best practices?

[Dan_Stevens_]

I'm looking for some input from this community on any best practices when it comes to email template design.  I'm mainly concerned with a scalable approach in a distributed environment.  We already are focusing on simplifying our templates so that they are very focused and contain a minimal amout of content.  For example, we want to minimize the number of editable areas but at the same time, provide enough flexibility so that the proper formatting can be included within those editable regions.  Let's take take the main body copy as an example.  Within that body copy will be regular text, bulleted items (sometimes) and sub-headings.  How would one format the sub-headings with our defined styleguide since there's no option from the HTML editor toolbar like there is for landing pages?  On the landing pages, we would use CSS for H1, H2, etc.  Would love to hear your thoughts.

[Anonymous]

Dan, you can use CSS to define your HTML tags in Marketo emails.  You would define your CSS in the email template.  Then when you create an email based on that template, in the Email Designer you can access the HTML of the editable sections and add in-line CSS if you want.

The Emails deep dive help article has a section of links to help articles about Templates.  Also if you search for "Email Template" in the Community, there are several help articles for Marketo's pre-defined templates, which you can download.  You can also use the Import Program function to download a large number of pre-created Responsive Email Templates that display well on many mobile devices.

[Anonymous]

Dan, 

You can actually force styles on editable areas if you are worried about staying on brand, as the mktEditable class can be added to most block elements. For example, this code below would render the H1 tag exactly how you want it:

<h1 class="mktEditable" style="color:#ff0000; font-weight:bold; font-size:24px; font-family:Arial, sans-serif">This text will be 24px Arial Bold in Red</h1>

If the end user simply adds text into this area (or uses a plain text token), the format will be rendered.

Just something to consider.

[Dan_Stevens_]

Thanks Elliott.  I have seen most of this - although I'm now checking out the responsive email templates.  But I'm still trying to understand how we can create flexible, editable regions for our marketers to use.  So let's say we create one editable region for the main email copy.  The copy will contain a couple paragraphs of normal text with a couple sub-headings in between the paragraphs.  How does the marketer select the formatting of those sub-headings?  If we were talking about landing page, we could use CSS to stylize the H1, H2, H3 tags and then it can be applied to the selected text (using the drop-down menu of heading tags).  But that option is not available in the email editor.  Would the marketer need to have some understanding of HTML and manually apply a <span> tag around those sub-headings using the HTML view?

[Anonymous]

I see what you're referring to now. The Landing Page Designer's Rich Text Editor has a Format drop down with options for various HTML style tags (e.g. heading levels, paragraph,etc.) while the Email Designer editor's Format drop down only has options for single and double spacing.  Not sure why Marketo doesn't provide the same options as with the Landing Page Designer, but you might want to submit an Idea for this. 

Your users would need to do what we do and that is to open the HTML editor and add HTML tags for the special formats you want on the various elements within an editiable section; although they may be able to achieve the same effect by using the Font Size and Font Family drop downs.

[Dan_Stevens_]

Thanks Elliott - that's what I was afraid of.  BTW, I did submit something back in 2012 (while I was with another company) regarding the lack of this feature in the email editor: http://community.marketo.com/MarketoDiscussionDetail?id=90650000000POAoAAO

[Anonymous]

Dan, in practice I see this solved by cloning emails with the right formatting for each section.  So you might conceptually have the Marketo templates acting as the wireframe (location, number of columns, default fonts) and then designate emails that should be cloned for style reference.  This will allow for flexibility while addressing your concern for simplicity.

[Anonymous]

Dan, Reza's response to your What happened to heading styles within the HTML editor? post brings up an important point.  For maximum compatibility, your CSS should be inline rather than defined in the HEAD section.  This is primarily because Gmail strips out the HEAD section, so any formatting based on styles defined in that section will be lost.  And as a result the Gmail client doesn't render responsively designed emails properly.