Designing emails that render effortlessly across major email clients can be a challenge, but there are a few basic design principles for templates that will steer you in the right direction.
- 1 General Design Principles
- 2 Images
- 3 Links
- 4 Testing
- 5 Creating an Email Template from Scratch
- 6 Building
- 7 Testing
- 8 Sending
- 9 Best Practices for Pre-Formatted Email Template Layouts
- 10 Creating an Email Template from a 3rd Party Builder
- 11 Upgrade Existing Templates to Use Advanced Features
- 12 Email Template Flow Usage Notes
General Design Principles
- Design with tables: most email clients do not support the use <div> tags, so we advise the use of tables to portion out the design of your email.
- Specify cell widths: give email clients as little interpretive room as possible by setting the specific width of all table cells.
- Many major email clients do not support floats, margins, or padding; to work around this, use nested tables with specified cell widths to mimic margins and padding, and to absolutely position your images or text.
- For maximum visibility, we suggest making your designs around 600 pixels wide.
- Use inline styles: some major email clients (such as Outlook 2007) do not support CSS in emails, so default to inline styles to designate how text should appear.
- Define styles for every piece of text, including font-family, size, and color.
- Avoid Flash.
- Specify font families and sizes for all text in your template.
There are a few best practices to consider that are specific to the use of images in HTML emails:
- Avoid using too many images; some spam filters consider image-heavy emails spammy, but since not all email clients render images by default, err on the side of fewer images when designing your templates.
- Avoid using background images (as some email clients do not support them), and always set a background color as an alternative in the event that you choose to use a background image but the image does not load.
- Use alt tags for your images for clients that do not automatically load images. You can set the alt tag by clicking the Insert/Edit Image icon in the WYSIWYG editor.
- Use absolute urls for your image locations (for example, instead of <img src=”images/headline.gif”>, use <img src=”http://go.pardot.com/images/headline.gif”>
- Specify height and width for all images.
- Always use absolute urls for all your links (for example: instead of www.pardot.com/help use http://www.pardot.com/help)
- Avoid linking images.
- Avoid using too many links (as some spam filters consider too many links spammy).
- Always hyperlink your links (hide the url behind text with our asset chooser, or directly in the HTML with an <a> tag). Pardot re-writes all links beginning with http:// (or https://) to be able to track your prospect’s activities; if this link is “bare” (not hidden behind text as a hyperlink), prospects will be able to see the full re-written link in the sent email.
- Test, test, test! We encourage testing in multiple clients since not all clients will render the same HTML in the same way.
- If you are using variable tags to customize your message, please note that these tags will not populate in the “Test” step of the email template flow, but will only populate on a live send.
Creating an Email Template from Scratch
With over 50 great blueprints to choose from, we recommend starting with a pre-formatted layout, tweaking it, then using the resulting email template for regular emails, such as monthly newsletters. This will ensure you have consistent branding and styling in all of your email correspondence with prospects.
- After clicking the orange “+ Add Email Template” button you will be taken to the “Basic Template Information” screen.
- The “Name” field is where you will enter in your internal name for the Template; for example, “Events Template”.
- The “Tags” field is where you can enter in one or more tags to help organize your Pardot account by topic; for example, ‘Events’ , ‘Experiential Marketing’.
- “Folders” is another organizational feature to help you better segment and browse through your Pardot account; for example, you might create ‘Offline’ and ‘Online’ folders, nestle an ‘Events’ folder within your ‘Offline’ folder, and assign this “Events Template” in the ‘Events’ folder.
- Choose your “Campaign” for Reporting.
- Your “Email Type” will either be ‘HTML and Text’ or just ‘Text’.
- If you select ‘HTML and Text’ and check the ‘Start from a Layout’ box, you will be taken to another screen with over 50 pre-formatted Email Templates.
- If you select ‘HTML and Text’ (without checking the ‘Start from a Layout’ box) you will be taken to our WYSIWYG editor. *If you change your mind and want to take a look at the Layouts after you’re in the editor, simply click the “Apply a Layout” button on the right.
- If you select ‘Text’ you will be taken to our text-only editor.
- Lastly, in “Available for”, choose what type of correspondences you would like this Email Template to be available for.
- When you click “Save” from the “Basic Template Information” screen it will create an Email Template Draft and bring you to the Email Template Editor.
- Across the top navigational bar above the Editor:
- You will see the Name of your Template, Building, Testing, and Sending. You can navigate back and forth between these steps as needed (i.e. you can go straight from Building to Sending without going through the Testing step).
- You will also see the “Basic Info” button. Click this at any time to jump back to the “Basic Template Information” screen.
- Lastly, you will notice a gear wheel; this allows you to either delete the draft altogether, or to save and exit. If you click the “Cancel” button at the bottom of the Editor it will not delete your Draft (once saved).
- Across the navigational bar in the Editor:
- The “Editor” tab will allow you to edit different regions in your Email. When you click into a region, you’ll see the content populate in the right-hand window within the editor titled “Content Editor”. This is where you will make your changes, using the editing buttons:
- Use the green tab to the left of the “Content Editor” to jump back to the Editor tools. There you’ll see “Info”, “History”, and “Tools” tabs.
- Click “Info” to edit your Subject Line or Apply a Layout
- Click “History” to see a history of all edits made within the Editor. *NOTE: Adding a Snapshot is not the same thing as clicking “Save”. The Snapshot tool makes it easier to look at previous versions of your work, but does not save it outside the editor- clicking the “Save” button, or “Exit and Save” in the gearwheel, will cause it to save in Drafts.
- Click “Tools” to run an audit of some common problems.
- The “HTML” tab allows you to manipulate the code, or paste in your own.
- The “Preview” tab will allow you to see the Email independent of the ‘editing’. You can select “Enable Prospect Preview” to see the message with the Variable Tags populated (you can also open this in another window using “Open in Popup”). To reset back to the Variable Tag view simply click the “Reset” button.
- Make sure that you click into the “Text” tab before “Sending”! You’ll need to click “Sync from HTML” to ensure that the Text and HTML versions of the Email Templates match. Disregard this step if you are working from a Text-only Template.
- You can send Tests of your Email Templates to:
- A Test List (It has to be designated as a Test List in the List settings)
- Individual Email(s)
- You can also take advantage of Rendering Tests, if available with your Account.
- Choose who your Email will be sent From in the “Sender” step. You can personalize this step with our cascading send-from functionality: Send-From options
- Decide who you would like Prospects to respond to with a “Custom Reply-to Address”
- If you’d like, adjust your “Subject Line”
- Hover over the small, right-hand preview to have it populate in the larger section on the left.
- Click “Publish” to save and have for reference in future Email sends!
Best Practices for Pre-Formatted Email Template Layouts
- Customize the Layout using the main editor menu and section editor menu:
- Replace image placeholders with static branding images when applicable (e.g. a logo at the top of an email). The placeholder dimensions ensure proper rendering in email clients, so try to use similar dimensions when applying your graphics.
- Direct any social media or company homepage links in your header/footer to the proper URLs.
- Edit the text and link styling for each section in the WYSIWYG, using the Edit CSS Style or Edit HTML Source buttons for more advanced styling options.
- Copy repeatable sections of the template to customize the content blocks available for use. (To convert an unrepeatable section into a repeatable one, simply add “pardot-repeatable” to the respective div, tr, or td tag.)
- If you wish to lock certain sections down and only have specific parts of the email be editable, add “pardot-region” to the div, tr, or td tag of sections you wish to make editable. Once this is in the source, all sections without “pardot-region” will be locked and uneditable.
Creating an Email Template from a 3rd Party Builder
If you prefer to create your email in a 3rd party builder and import the HTML, copy that source code to your clipboard. In the Pardot email editor click the “Update Source” button in the top right corner. Remove all existing HTML and paste the source code from your clipboard into the email editor’s source code.
Upgrade Existing Templates to Use Advanced Features
When you open existing templates in the email builder, everything will by default be repeatable and editable.
- To convert a repeatable section into an unrepeatable one, simply remove “pardot-repeatable” from the respective div, tr, or td tag.
- If you’d like to lock certain sections down and only have specific parts of the email be editable, add “pardot-region” to the div, tr, or td tag of sections you wish to make editable. Once this is in the source, all sections without “pardot-region” will be locked and uneditable.
Email Template Flow Usage Notes
Make sure to include a text version of your email in the Text Content editor located in the tab next to the HTML email editor. We recommend using the Sync from HTML button and change any formatting to ensure the content looks correct when viewed as a text-only email.
Whenever an email template is opened for editing by multiple users, the last user to save their changes will overwrite any changes saved by other users. However, any proof email that you send from your open flow will reflect the edits you have made in that particular session.
Users must always click the “Publish” button, the “Cancel” button, or “Save and Exit” under the gear wheel to exit a flow. Navigating away from the page will leave that flow open, effectively locking out any other users from saving their changes.
If you notice that your email template appears differently when you preview it than when you open to edit the template, please contact our Solutions Team (click the “Support” tab on the left or the “Contact Support” button on the right) to clear out any open flows that may be interfering. See this helpful article for more information.