AC - Email Build Guide

How to Create an Email Using the Framework Modules

To create an email from the framework template, we begin by selecting Email from the Create dropdown menu.

By default, the creation type is HTML, select Template. It will remember your previously selected choice.

Please select the template from which you want to build your email. The options will display the most recently edited templates, but if you wish to find a specific template, you can navigate to it using the "Folders" button.

In the current template, we have three different template options:
Two ready-to-use emails where only the final images and texts need to be added:

JJ_Newsletter_L4_Red Live Text Header_Template_SFMC_Email
JJ_People_News_Announcement_L3_Template_SFMC_Email Optimized

As for the third template, it comes blank, and you can add the modules you want to build the email in the most interesting way.
Johnson & Johnson_Framework_Template

On the Properties page, you must define a name. Best practice says that the name should not include spaces or special characters other than dashes and underscores. If the email name includes spaces, it can cause problems with tracking. The description will be visible within the application to help you distinguish the email. The location will show the folder where your email will be saved. The target language should be left as Unicode, as it handles special characters the best. Click save when you have filled out as much detail as you want on this page.

The content tab allows us to select predefined modules and drop them into place. Navigate to the Modules subfolders shown here to select the Framework modules.

Within the Header folder, we currently have only one option. For this example, I am clicking and dragging the View as a Webpage Link to the Header Contents section.
In the future, the idea is that we will have more options for the Header.

The content tab will change to show the editor window with the module I just added to the email.

You can edit the content directly in the editor, and the changes will be reflected in the email.

Here you can see that I added the "View as a Webpage Link" module to the Header and navigated to the Footer module folder. The three module folders reflect the three sections of the email. Each type of module should only be dragged to its corresponding section.

The Body folder has many options for content, here I have pulled in a full width image, body copy, and a cta.

Double clicking on the image in the editor will bring up a properties window which allows you to replace the image, add alt text, set dimensions and more. It is not recommended that you use the "scale to fit" checkbox, as the template already will scale this image on mobile to fit the screen.

The link properties window allows you to define the destination, the text, the color, decoration and more elements about the link. The tracking alias is the easy to read name in the link tracking report, if it is left empty the link tracking will show the URL instead.

Buttons also use the link properties, but have a bit more nuanced code behind them. It is recommended that you do not alter the link color here.

Testing your Email

While the Content Builder allows for easy content creation and a consistent look and feel to your emails, it is still very important that you test your content before deployment.

Software and websites serving emails change code with some regularity, and can introduce new and interesting behaviors that can affect the look and feel of your email.

Litmus testing is one of the recommended steps to verifying the email will look as you expect it to. You can sync your Litmus account and preview your email as it would render in many email clients from within the Litmus button under the Preview and Test tab.

In addition to Litmus testing, it is recommended that you send sample emails to yourself and check that everything renders as expected. Use this opportunity to also check the links, including the View as Web Page and Unsubscribe links. Make sure you do not unsubscribe yourself by continuing to the click through the page that loads!

You can also select the option to send all emails rendered from a data extension as test emails to one inbox. You would use this method if you have data driven or personalized content in your emails and want to validate that it is pulling in the correct values and content.