Getting Started

The best place to learn about the intricacies of HTML email is Campaign Monitor's "Coding Your Emails". This single document covers what you'll need to translate your HTML skills to email.

Inline CSS

One of the key pitfalls you should understand is the role CSS plays in HTML emails. If you're at all familiar with web development you know that CSS is what you use to style your web pages. Unfortunately many email clients (most notably Gmail) simply ignores traditional CSS syntax. It strips it out and pretends it never existed. Frameworks like Ink get around this by developing templates in HTML/CSS and then running the templates through an inlining process before using them. Inlining takes normal CSS rules and turns them into inline styles (yuck...). Here's an example:

            Normal CSS
            <style>
                h1 {
                    color: red;
                     font-size: 20px;
                 }
            </style>
            
            Inlined CSS
            <h1 style="color: red; font-size: 20px;">Title</h1>
        

As you'll see later Rock will do the inlining for you if you'd like.

You Don't Have to Start from Scratch

While you're welcome to start your template from scratch, most people prefer to start using a framework. One of the most popular is Zurb's Foundation for Email.

Enabling Wizard Support

There are two types of email templates in Rock: those that are used in the communications wizard and those for the simple email send (best used for things like leader toolboxes). For the most part you'll be wanting to create templates for use in the wizard.

In order for your email template to work with Rock's communication wizard you’ll need to provide a bit of configuration. First, the wizard will need to know what portion of your template is allowed to be edited (this is where the blocks can be dragged to). You’ll define this by using special "div" elements. Let's look at the structure of what is needed. Below is an example:

< html email layout / conent…..>
<div class="structure-dropzone">
    <div class="dropzone">
        <div class="component component-text" data-content="<h1>Email Title</h1>" data-state="component">
            <h1>Email Title</h1>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit, arcu 
               hendrerit mattis accumsan, quam sem tristique dolor, eget euismod enim tortor 
               sit amet augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. 
               Donec finibus tortor lorem, at malesuada justo feugiat ut. Nam ac pharetra eros, 
               nec feugiat nisl.
            </p>
        </div>
    </div>
</div>
</ html email layout / conent…..>

            

In this example, the "structure-dropzone" div tells Rock this is where you can drag new sections to (sections are the icons in the Communication Wizard with 1 column, 2 column, etc.). The "dropzone" div is an actual section. Technically, you don’t need to provide this, but then the people using your template will be required to start by dragging a section. Not very friendly. Finally, the "component component-text" div is an HTML component to use as a starting point. Again, you don’t need to provide this (technically, only the "structure-dropzone" div is required), but it provides a nice starting place. Note that the text you place inside of the "component-text" div is the default content. Feel free to modify this to be whatever you’d like people to see when they start. Also note that you can ‘pre-load’ as many components in the dropzone as you’d like. In this example we’ve only loaded one, but feel free to go hog wild.

With one of these sections your template is ready to be used inside of the Communication Wizard… but… you can provide more than one if you'd like. If you want to have several dropzones on your template (say for side bars, footers, etc.) you're more than welcome to wire-up as many dropzones as you'd like.

Inlining

You can determine if your template should be inlined. In most cases you'll want to ensure this is done, but we've left an option to disable this when adding your template to Rock. Sometimes though this is not an all or nothing decision. Sometimes you may want some of your CSS styles to be inlined but others not. If you mark your styles with an 'ignore' class the inliner will pass over the styles and not consider them for inlining.

Sample:

<style class="ignore">
     p {
          color: red;
    }
</style>
            

Configuring Theme Customization

Rock allows themes to be easily customized by non-technical users. It's up to you, as a theme designer, though to design your themes in a way that enables this. Don't worry though. It's super simple and borderline fun.

<img id="template-logo" src="/Content/EmailTemplates/placeholder-logo.png" width="200" height="50" 
data-instructions="Provide a PNG with a transparent background or JPG with the background color of #ee7725.">
                

<style>
      a {
          color: {{ linkColor }};
      }
</style>
                

{% raw %} {{ Person.NickName }} {% endraw %}
                

Final Tips and Tricks

Below are some other tips to keep your templates working well with Rock:

• Make sure you're using an HTML5 Doctype for your template. This will ensure that the inliner treats your markup with the respect it deserves. If you don't it may attempt to 'fix' your markup by providing closing tags and such. For example: <!DOCTYPE html>