DESIGNING YOUR FIRST
EMAIL TEMPLATE
John Heinrichs
Associate Professor
Information Systems Management
Students are expected to …
• Have access to a designer HubSpot account
• You'll need to first sign up for a free Designer account here:
http://offers.hubspot.com/hubspot-developers-and-designers-free-hubspot-account
• Possess a working knowledge of HTML5/CSS3
Important links …
• We’ll also be using this …
http://academy.hubspot.com/projects/customer-projects-create-email-newsletter
https://marketplace.hubspot.com/templates/email-templates/sonata
http://knowledge.hubspot.com/email-user-guide-v2/how-to-create-a-custom-email-template
http://designers.hubspot.com/docs/cos/email-template-markup
EXPECTATIONS + IMPORTANT LINKS
1. Introduction to Email
2. Tour the Email Tool
3. Creating Your Email Template
4. Creating Your Email
5. Styling Your Email
6. Tips and Best Practices
7. How to …
AGENDA
1
INTRODUCTION TO EMAIL
WHAT IS CAN-SPAM?
• CAN-SPAM (Controlling the Assault of Non-
Solicited Pornography and Marketing)
• Passed in 2003 …
1. establishes the rules for commercial
email and commercial messages,
2. gives recipients the right to have a
business stop emailing them, and
3. outlines the penalties incurred for
those who violate the law
http://blog.hubspot.com/marketing/what-is-can-spam-ht
Spam Email
https://www.ted.com/talks/james_veitch_this_is_what_happens_when_you_reply_to_spam_email?language=en
WHAT ARE EMAIL TYPES?
• Gives contacts the ability to decide what kinds of
email communications they want to receive
• If you have a Basic Information email type where you
send most of your communications but also a Blog
Notification email type which alerts your contacts of
new blog posts, wouldn't you want your contact to be
able to decide to hear from one or the other?
• Give your contact the power to make that choice
• Perhaps, the blog post will entice them further to
come back to your site for more content
• Each time you send an email, you must choose an
email type.
• Email types are the category of emails you send
http://knowledge.hubspot.com/email-user-guide-v2/how-to-create-and-edit-email-types
2
TOUR THE EMAIL TOOL
Email Dashboard
1. Search by email name
2. Create a new email
3. Filter by email types and/or campaign
4. Filter by All rates, Click Rate, Open Rate to
change what appears in your graph.
5. Display All emails, Sent, Scheduled, Drafted,
or Archived emails
6. Quick access to more tools.
7. Click into existing folders or create new
folders for email organization.
8. Look at Spam reports, unsubscribes, and
unknown users within recent email sends.
9. List of recent email drafts.
Email Tour
http://knowledge.hubspot.com/email-user-guide-v2/a-quick-tour-of-the-email-tool
Preview in Inboxes
Email Tour
http://knowledge.hubspot.com/email-user-guide-v2/a-quick-tour-of-the-email-tool
Personalization
Email Tour
http://knowledge.hubspot.com/email-user-guide-v2/a-quick-tour-of-the-email-tool
Analytics - Performance
Email Tour
http://knowledge.hubspot.com/email-user-guide-v2/a-quick-tour-of-the-email-tool
Analytics - Recipients
Email Tour
http://knowledge.hubspot.com/email-user-guide-v2/a-quick-tour-of-the-email-tool
3
CREATING YOUR EMAIL TEMPLATE
Create an email template like this one!
Statements
• used to create …
1. editable modules,
2. define conditional template logic,
3. set up for loops, &
4. define variables
Expressions
• set/print values stored in the
context of the template
Comments
• non-executable code
HubL Delimiters
{# #}comments
{% %}statements
{{ }}
expressions
Module To Change CSS
{% set linkColor = "#2C6674" %}
{% set hoverColor ="#5C96A4" %}
{% set brightColor ="#1081d5" %}
<style>
#contentTableOuter {
background-color: #ffffff!important;
border: none!important; box-shadow: none!important;
padding: 0px!important; }
.table { padding: 0px !important; }
h1 { font-size: 26px; line-height: 1.3em !important; }
Universal Customizations
Module To Change CSS
.feature-item h2 { text-align: center!important; }
img { max-width: 600px!important; max-height: 350px !important;
margin-top: 10px; margin-bottom: 20px; }
.logo img { width: auto !important; height: auto !important; }
.articles-listing img { margin-top: 7px; margin-bottom: 20px; }
.articles-listing .hs-cta-wrapper img { padding-top: 0;
background-color: transparent; }
.title-image { max-width: 100%!important; }
.articles-listing p { max-width: 79%; margin:0 auto !important;
float: none! important; }
.articles-listing h1 { max-width: 79%; margin-left:auto !important;
margin-right:auto !important; float: none !important; }
a:link { color: {{ linkColor }}; text-decoration: none; }
a:visited { color: {{ linkColor }}; text-decoration: none; }
a:active { color: {{ linkColor }}; text-decoration: none; }
a:hover { color: {{ hoverColor }}; text-decoration: none; }
Universal Customizations
Module To Change CSS
.further-action-section table { margin: 0 auto 30px; float: none;
text-align: center; padding: 15px 30px;}
.further-action-section table tr { border: 1px solid #dfdfdf;}
.further-action-section table tr td { padding: 30px 50px;}
.further-action-section h2, .further-action-section h3 {
color: {{ brightColor }} !important;}
.further-action-section p { max-width: 79%; margin: 0 auto; float: none;}
.further-action-section table p { max-width: 100%;}
.date-area p { max-width: 79%; margin: 0 auto; float: none;}
Universal Customizations
Module To Change CSS
@media only screen and (max-width: 480px)
{
.feature-item td[class~="column"] { padding-bottom: 10px!important; }
.further-action-section table { max-width: 90%; }
.further-action-section p { max-width: 95%; }
.articles-listing p, .articles-listing h1 { max-width: 95%; }
.date-area p { max-width: 95%; }
}
.social-icons img { max-width: 24px!important; height: auto;}
</style>
Universal Customizations
1. Navigate to your Design Manager
2. Click on the New Template Button
3. Select Template Builder & Email, then
Create
4. Name the email template
Step 1.1: Create a new email template
http://knowledge.hubspot.com/email-user-guide-v2/how-to-create-and-edit-your-email-template
When you’re finished, you should
have a template that looks like this:
Step 1.2: Create a new email template
1. Module Edit CSS
Step 2: Unique CSS
4
CREATING YOUR EMAIL
• Navigate to Email
• Click Create New Email
• Choose Template
Step 1: Add Email
1. Create Email
2. Edit Email
Step 2: Edit Email
Details
Text Version
Step 3: Email Details
Step 4: Email Settings
Step 5: Preview Email
Step 6: Test Email
Step 7: Optimize Email
Step 8: Send Email
Step 9: Send Email
5
STYLING YOUR EMAIL
ASSIGN CSS CLASSES
Styling your modules:
6
TIPS AND BEST PRACTICES
Common Email Best Practices
1. Content in King
– Design is important but content is king.
2. Work within the Editor
• do is work as much as possible within the email editor
• If not possible, write your content in a simple text editor
• copy and pasting from Microsoft Word brings over extra code/formatting that can cause styling conflicts
3. Responsive Design
• Most people are reading their email on-the-go
4. Email will NOT look the same across different email clients
• Each mail client renders based on their own CSS and HTML standards
• http://knowledge.hubspot.com/email-user-guide-v2/common-email-design-questions-and-best-practices
Common Email Best Practices
Email Tools
• Keep your template simple – focus on the Message
• Keep email width under 600 pixels
• email clients such as Outlook can view your email in their vertical preview pane
• Abide by CAN-SPAM rules
• include an unsubscribe option in every email, as well as company name & address
• Create templates with HubSpot template builder
• Use code-friendly software
• Design with tables
• Use inline CSS
http://knowledge.hubspot.com/articles/KCS_Article/Email/HubSpot-Email-Tool-Best-Practices
7
HOW TO …
How to …
How to perform various email tasks
1. Create responsive email templates
2. Set email body widths
3. Customize email footer for Can-Spam compliance
4. Create and edit email types
5. Set From Name and Address Personalization
1. Responsive Email Templates
Email templates are responsive by default
1. To convert the email template to a fixed width template:
Locate the template layout in Design Manager
Click Actions > Make Basic
2. To convert a basic fixed-width template to a responsive template:
Locate the template layout in Design Manager
Click Actions > Make Responsive
http://knowledge.hubspot.com/articles/KCS_Article/Email/Does-HubSpot-have-responsive-email-templates
2. Set Body Width for All Emails
1. Change your email Body Width for ALL emails
navigate to: Testing > Content Settings > Email
scroll down to Email Size
2. Set any numerical value for the Email Body Width
click Save changes
http://knowledge.hubspot.com/articles/KCS_Article/Email/How-do-I-change-the-body-width-for-all-emails
2. Set Body Width for a Particular Email
1. Change your email body width for a Particular email:
navigate to: Testing > Content Settings > Email
scroll down to Email Size
2. Set any numerical value for the Email Body Width
click Save changes
http://knowledge.hubspot.com/articles/KCS_Article/Email/How-do-I-change-the-body-width-for-a-particular-email
3.2 Customize CAN-SPAM Email Footer
The 5 tokens that must be included in a
CAN-SPAM footer in order to send an
email are:
Company Name
Company Street Address 1
City
State
A link to Email Preferences OR
Unsubscribe All
http://knowledge.hubspot.com/articles/KCS_Article/Email/What-information-is-required-in-the-CAN-SPAM-footer
4. Create and Edit Email Types
1. Change your email body width for ALL emails:
navigate to: Testing > Content Settings > Email
scroll down to Email Types
To edit an existing email type, click Actions > Edit …
make the changes to your email type Name or Description
(or making the email type active/inactive)
click Save changes
To create a new email type …
http://knowledge.hubspot.com/email-user-guide-v2/how-to-create-and-edit-email-types
4. Create and Edit Email Types
1. Change your email body width for ALL emails:
navigate to: Testing > Content Settings > Email
scroll down to Email Types
To edit an existing email type, click Actions > Edit …
make the changes to your email type Name or Description
(or making the email type active/inactive)
click Save changes
To create a new email type …
http://knowledge.hubspot.com/email-user-guide-v2/how-to-create-and-edit-email-types
5. Email Personalization
1. Change your email personalization:
http://knowledge.hubspot.com/articles/KCS_Article/Email/How-do-I-personalize-the-From-name-and-address-in-an-email
EMAIL RESOURCES
1 What is Can-Spam – FAQs
http://blog.hubspot.com/marketing/what-is-can-spam-ht
2 HubSpot Design Forum
3 HubSpot Designer Documentation (and HubL Resource)
4 Email User Guide
http://knowledge.hubspot.com/email-user-guide-v2
5 Email Newsletter Project
http://academy.hubspot.com/projects/customer-projects-create-email-newsletter
Homework
1 Sign up for a free Designer account:
http://offers.hubspot.com/hubspot-developers-and-designers-free-hubspot-account
2 Add -- John Heinrichs – [email protected] – to your portal
3 Create your Email Template / Email
4 Email me – ai2824@wayne.edu – your email template url for grading
QUESTIONS?
