18

Email templates

Embed Size (px)

DESCRIPTION

Your email templates require a fine balance: they must adhere to your organization’s general design, yet be simple enough to display on finicky email clients. This webinar will talk about the basic requirements for an email template (and how to avoid some of the most common mistakes), as well as using standard templates as a jumping off point for your own forays into HTML coding. This webinar includes: using WYSIWYGs or other software to design your template, template editable tags, the difference between editable and uneditable templates, using one of Salsa’s standard templates to make a specific branded template, and using basic HTML to add links and images to your template.

Citation preview

Page 1: Email templates
Page 2: Email templates

EMAIL BLAST TEMPLATES

Jake Patoski

Training & Learning Manager

Page 3: Email templates

Email Blast Templates: Agenda

• Considerations before starting• Starting with a stock template• Basic setup - Create a new

template in Salsa• Customizing your template• Using your new template• “Oh hey, don’t do that…” – Tips to

keep in mind.

Page 4: Email templates

• The goal of an email template should always be simplicity – for the sake of the recipient, and to improve your own deliverability.• How many times have you opened an email and exclaimed,

“Wow, that’s a beautiful email!”? 1 in 100? 1 in 10,000? • No matter what, you’re going to have to learn some HTML.

• The basics: <p>, <br>, <a href=“”>, <img src=“”>, and then formatting with HTML and CSS.

Considerations before starting

Page 5: Email templates

• http://bit.ly/stock-templates• Pick your basic layout of choice, then copy the source code to…

• A new template in Salsa• A WYSIWYG or other editor to make changes

• It’s that easy (to start…)

Starting with a stock template

Page 6: Email templates

• Email package -> Create an Email Template• Pick an identifiable name for the Reference Name• Leave the default setting for Select a predefined template:

“Create from scratch”

Create a new template in Salsa

Page 7: Email templates

That “From Information” tab is important

• From name: Best practice - email campaigns do well when recipients build familiarity with a person’s name, not just the company name. • Often the ED, comms. mananger, or someone else close to the action• Do identify your organization though!• Ex: Jake Patoski, Salsa Labs

• From email: Make it either same person as above, or info@, action@, or similar.• Doesn’t have to be real! But smart supporters may email that address

directly, instead of reply-to.• Reply-to email: default address email clients will use if supporter clicks ‘reply’.

• Probably don’t want hundreds of out-of-office autoreplies coming to your personal inbox, right?

• Set the address to an unmanned account, or set up filters ahead of time

Page 8: Email templates

• Subject line – Set this field if you want part of your subject line to be in every new email.

• Example: “Take action today [Salsa Action Team]”

• Subject line can be reset on email blast setup.• Edit Template –

• Check this box if you like making changes to your design on the fly.

• Leave it blank (default) if you’re afraid others might screw up the HTML/CSS. (You would never screw it up yourself, even accidentally. You are infallible; we know.)

That “From Information” tab is important, cont’d

Page 9: Email templates

• Click the Source button to insert your copied stock template code. (You’re in the ‘code’ mode when all the other buttons are greyed out.)

• Decide where to insert your Editable Content tags:• <!-- TemplateBeginEditable name="content" --><!--

TemplateEndEditable -->• Start and end wherever you want – but code within

those blocks will be editable. • Let’s see an example in Salsa.

Insert stock code

Page 10: Email templates

Header (Bun)

Footer (Bun)

Message Content (Meat)

<!-- TemplateBeginEditable name="content" --> 

<-- TemplateEndEditable -->

Viewable content that is pre-populated from

template whenever the template is chosen in

Salsa.

Think of your templates as hamburgers:

Page 11: Email templates

• Update banner image• Set up your unsubscribe link• Add any other permanent content• Create a call-out box (optional)

Next steps

Page 12: Email templates

• Make sure your image is the right size ahead of time.• In our example, look at source: 600px• Resizing with HTML from 800pixels to 600pixels isn’t a big

deal… but from 2,000 pixels to 600 is.• Host your image on Salsa’s servers.

• Website package -> Images and Files• Insert image using WYSIWYG or fine tune with HTML source.

• Copy URL of image.• Insert URL into image code:

<img src=“URL HERE” width=“600px”>• Want to put a link around the image? Try:

<a href=“THE LINK”><img src=“URL HERE” width=“600px”></a>

Add your organization’s logo/banner/image

Page 13: Email templates

• Salsa can add an unsubscribe link by default, simply by clicking the link:

• Make your own unsubscribe page for advanced features (only specific lists, provide reason, etc.)• Email Blasts -> Unsubscribe pages -> Create an

unsubscribe page.

Add an unsubscribe link

Page 14: Email templates

Add a callout box, and any other permanent content

<table style="margin-left: 10px; margin-bottom: 10px;" cellpadding="0" cellspacing="5" border="0" align="right" width="135" bgcolor="#fff"><tr><td style="font-size: 12px;" valign="top"><a href="http://www.LINK-TO-PAGE.com"><img src="https://lh3.googleusercontent.com/-bCvme-1gzPc/AAAAAAAAAAI/AAAAAAAAAAA/b5CGUidJJDo/s100-c-k-no/photo.jpg" alt="Image alt-text" border="0" /></a><br /><br />Your call-out box text here.<br /><br /><a href="http://www.LINK-TO-PAGE.com" >Put a link (or button graphic) here.</a></td></tr></table>

•Anything else for the footer? Any other perma-nav links?•Call out boxes are the “too long; didn’t read” summary for email blasts.•Adding one into your template makes it easy to update in new emails. •There are many forms… most important is to style=“float: right;” or align=“right”

Page 15: Email templates

Use your new template

Check it out!

Page 16: Email templates

• Keep it simple (1998 simple).• Don’t reference outside style sheets (CSS). Do it in declarations at the top,

or inline.• WYSIWYG: Shift+Enter creates a <br> instead of <p>• If you use a free service for creating templates, look at the code (or have

someone check it out) for proprietary/advanced code.• Check this out: http://bit.ly/html-template-tips

“Oh hey, don’t do that…”

Page 17: Email templates

CONTACT INFO

Read, learn, discuss – help.salsalabs.com

Training & Learning Team – [email protected]

Salsa Support – [email protected]

Page 18: Email templates

THANK YOU!