Articles from Christian Marketing Done Right
HTML Email and Newsletters
What is HTML email?
HTML email is a form of email communication which contains HTML code similar to web pages.
HTML email is employed by countless marketers and email delivery services announcing a new or
discounted product, grand opening or upcoming event.
Differences between HTML email and web pages
HTML email is not a web page. Although they look the same, they're very different when you look at their code.
How they're viewed is very different as web pages appear on computer screens with web browsers, HTML email is viewed in email software such as Outlook or Gmail and is visually limited regardless of the software. Web page code is easier to read as their styles are placed in style sheets while HTML email places styles everywhere. Additionally, while web browsers display web pages somewhat similar across platforms, this is not true for HTML emails. At present, major display problems exist with email software.
Why use HTML Email and Newsletters
Because graphically, it's a way for email recipients to receive email news, which (when clicked)
allows them to view graphical elements of your website along with your sale, announcement or news.
HTML email can be very effective in branding, campaign launches and keeping you connected with your all-important audience.
Avoid Spam Creation
One of the most important tasks which you need to continually be aware of is NOT creating spam.
It makes little to no sense for you to take the time in designing an HTML email, developing a list
and paying for the email to be delivered - just to have it sit in a SPAM folder, never to be read, destined for the TRASH.
To avoid creating SPAM, follow these basic guidelines:
- Use HTML tables - this protects the display of the HTML email
- Include in your emails: Identify yourself and your business,
tell recipient how you got their email, make the "unsubscribe link" easy to find, give name, address and phone number
- Read the CAN-SPAM Act here: Law against spamming from the Bureau of Consumer Protection Business Center
- Send a text version of all your emails - this avoids being labeled a SPAMMER
- Key Steps - plan ahead: Set goals, identify audience, set frequency and timing, track results,
where will you get your email addresses, etc.
Choose a software tool to create your HTML email. Options range from using a template,
do it yourself or automate it using CMS (like WordPress).
With a template you can modify it to meet your needs (www.campaignmonitor.com/templates).
If you use software like WordPress, you can use a template to display your site content as an email.
You can also hand-code using an HTML Editor (Coda, Notepad++, Crimson Monkey, etc.).
Tips to keep in mind when coding HTML email:
- Email needs to be under 600 pixels
- Three basic HTML email designs: one column, two column or multi-column
- Plan HTML email layout (example: grid, colors, widths, heights)
- Code layout into HTML tables
- Add inline styles to your HTML Table layout and content
- Set margins to lowest possible level: TD cells not table
- No floats, no padding
- Use as few HTML tables as possible
- All IMG tags need: style="border:none;display:block;"
- Is something broken? For CSS, check colons, semi-colons and double quotes in style declarations.
- Layout broken? Always use border=1 in the TABLE tags as you build your HTML email layout.
- Alphabetize your CSS definitions: color goes before font
- NO CSS shorthand.
These are the most common inline CSS styles you will use:
- Font-family: Arail, Helvetica, sans-serif;
- Font-size; 14px; font weight: normal; line-height: 28px;
- margin-left:0; margin-right:0; padding-left:0; padding-right:0; margin-top:0; margin-bottom:0;
- padding-top:0; padding-bottom:0;
Website Resources: Before Sending HTML Email
- Premailer: Premailer is an online service
which takes CSS styles and puts them inside of paragraph tags, data tags and so forth. It converts your class
and id declarations into actual inline CSS.
- Campaign Monitor - Articles & Tips.
This is just one of many email delivery service which provides template designs as well as the option to code your own HTML email.
The site is rich in content and resources for anyone looking to better understand HTML email.
- Email Standard Project - Acid Test:
The Acid Test tracks how different email software supports CSS and HTML properties. It uses an acid test email
(most commonly used HTML and CSS). The acid test is used to test email software fairly across a range of HTML and CSS styles.
You can see how one email looks across a range of software clients.
What to look for in an email delivery service?
- Pricing: Is it pay by month or pay by number of emails sent?
- Do they fire or unsubscribe customers for spammy activity (knowingly on unknowingly)?
- Do they have at least one staff person who actively works with blacklists and whitelists?
- Can you talk to them?
- Do you like their reporting tools?
- Do you like working with their application?
- Who are their customers?
HTML Email Delivery Services: MailChimp, Campaign Monitor, Constant Contact, iContact, Vertical Response and more.
Testing HTML email to see how it will display in different software:
Test locally by using different web browsers: Internet Explorer, Mozilla Firefox, Chrome, Safari, etc.
Once you test your HTML email locally you need to test with a service like Mailchimp's 'run inbox inspection'
service.
Online testing services are an inexpensive way to test thoroughly how your HTML email will look in other HTML email software.
It's an important step to take prior to sending emails.
Other testing services include:
Litmus,
Browsercam, and
Campaign Monitor.
All three provide services to test how your HTML email will display in a variety of email software.
Regardless of which service you choose, it's important that your HTML email is easily read for all your recipients.