View
218
Download
0
Category
Tags:
Preview:
Citation preview
Email Basics & HTML
Overview
• Subject line best practices• Email best practices – content &
formatting• How to navigate HTML• HTML email demo• Q&A
Subject Line Best Practices
• 50 characters or less• Concise & informative – but show your
personality!• Avoid spam filters:
– ALL CAPS– Multiple punctuation!!!– Dollar signs $– “Spammy” language – “free,” “percent off,”
“act now”
Subject Line Best Practices
35%of email recipients open
email based on the subject line alone
(Jay Baer, Convince & Convert News)
x Too long: 106 charactersx Boring!x Important information is toward the end
Shorter: 49 characters Actionable Concise
Shorter: 51 characters Catchy Relevant Informative
Email Best Practices - Content
• Use common sense! – Communicate:
• Clearly• Succinctly• Consistently• With personality
• Keep most important content “above the fold”
• Include a call to action• Include physical address in the footer• Unsubscribe option• Test, test, test!!!
the “fold”
Email Best Practices – the bad
Are you excited to read this??? After reading it, do you have a clear picture of what to do?
Email Best Practices – the ugly
Yes, I’ve seen emails like this. Just don’t let them come from your office!
Email Best Practices – the good
More communication, fewer words
Visually appealing
Email Best Practices - Formatting
• Font size: 13px and up• Avoid using red text – can trigger spam
filters• Use “alt” tags for
all images
“alt” text
Keep mobile in mind!
From line becomes more prominent
Subject line length
First few lines of your email are important
Mobile now makes up the majority
of email opens at 51% (Litmus)
<body><!--HEADER START--><div id="header"> <div id="header_logo"> <div id="outcomes_logo"><a href="http://www.theoutcomessurvey.com"><img src="../images/logo.png" alt="The Outcomes Survey" width="560" height="97" border="0" /></a></div> <div id="cso_logo"> Powered by<br /> <a href="http://www.csoresearch.com" target="_blank"><img src="../images/cso_logo.jpg" alt="CSO Research" width="90" height="38" border="0" /></a></div> </div> <div id="top_menu_bar"> <div id="top_nav"> <ul> <li><a href="http://www.theoutcomessurvey.com">Home</a></li> <li><a href="http://www.theoutcomessurvey.com/why_outcomes.html">Why Outcomes?</a></li> <li><a href="http://www.theoutcomessurvey.com/the_survey.html">The Survey</a></li> <li><a href="http://www.theoutcomessurvey.com/team.html">The Team</a></li> </ul> <div id="demo_button"><a href="http://www.theoutcomessurvey.com/demo.html" class="demo_button"><img src="../images/icon_demo.png" alt="" width="21" height="20" />Request a Demo</a></div> <div id="grad_nav"><em>Taking the survey and need help? Read our <a href="http://www.theoutcomessurvey.com/grads/faq.html">FAQ</a></em></div> </div> </div></div><!--HEADER END-->
When you see this
Do you feel like this?
HTML Overview
• Syntax<p>Your text here</p>
• Nesting tags<p><u>Your underlined text here</u></p>
opening tag
closingtag
displayed content
<p> tag is outside
<u> tag nested inside
Your text here
Your underlined text here
Live Demo - Email
Q&A
<p>I have a <strong><em>question!</em></strong></p>
I have a question!
Recommended