Email Marketing Best Practices

Guide to a Better HTML Email Design – Part 12

11. Create a Web Version of Your Email Newsletter

 

Although the vast majority of email clients and email Web interfaces (e.g., Yahoo, Hotmail) render HTML correctly, your recipients could be using an older version of Lotus Notes or AOL, which might not render your images properly. Giving readers a link to a Web version or offering a text option ensures recipients see the message as you intended.
Three tips:

  1. Include a “View Online version of this message” link at the top of your email. Also, include a link to the Web version in the footer or admin area of your email message. The link can automatically direct to a Web-hosted version (your email software should be able to automatically generate this link for you) or to a link to your Website where you’ve posted the message (perhaps along with back issues for newsletters). Most of the Kenscio clients report that approximately 4% of recipients click on the Web version link. This is a significant number if you have a large list.
  2. Include “Format Preference (HTML or Text)” on your opt-in form. Also, include a note worded like this: “Choose text if you use Eudora Light, Eudora Pro 3 and below, Lotus Notes versions below R5 or AOL 5.0 and under”.
  3. Include a link to a Profile Update page allowing recipients to change their preferred format from HTML to text at any time in the future.

 

Read earlier blogs on this subject “Guide to a Better HTML Email Design” on Kenscio Blog.

 

Share

Guide to a Better HTML Email Design – Part 11

10.Use Image Alt Tags

 

HTML “alt” tags display a text description of an image either when the image does not display or when a cursor rolls over a displayed image. Using alt tags in your HTML emails is important for three reasons:

Recipients using dial-up or other slow connections might not see images for several seconds. Displaying alt tag text can convey what is to come.

Many email clients (Outlook and Outlook Express) and email services (AOL, Yahoo and Gmail) disable images by default or display a warning message or command to download the images.

Gmail uses what it calls “snippets,” which display the first few text words it sees in an email, following the subject line. Gmail will also display the text from alt tags, so it is important to use this to your advantage – as an addendum to your subject line, for example.

A sample alt tag looks like this:
<img name=”index_r2_c2″ src=”http://mailer.aghreni.net/imgproxy/img/809298233/index_r2_c2.jpg” width=”163″ height=”85″ border=”0″ alt=”Aghreni logo” border=0>

 

Tips on using alt tags
Newsletters:
For logos, headers, section titles and other uses of images, describe the logo and image, but consider adding a brief teaser that explains that section of the email. If your email is a newsletter, an example of an alt tag that serves as both a teaser and a text version of the image might be: “Optimization — Strategies for improving email marketing performance”.

E-commerce Email:
Include short but complete descriptions of product photos or offers such as “50% off”.

Charts and Graphs:
Include enough text to explain the value and contents of the chart or graph, such as “Chart: Open Rates from A/B Split Test”.

Gmail Snippets/Preview Text:
Use an appropriate image in your header to display key teaser info. For ec-ommerce emails, the information might expand on special offers mentioned in the subject line, reinforce Free Shipping or promote additional products. For newsletters, consider mentioning additional articles beyond what is in the subject line, or expand on the existing topic.

While this sounds like a lot of work, at most it probably adds 5 to 10 minutes to your email production. Most importantly though, marketers who don’t use alt tags appropriately risk lower open and click-through rates because recipients might decide not to display images or act further.

Read earlier blogs on “Guide to a Better HTML Email Design” on Kenscio Blog.

Share

Guide to a Better HTML Email Design – Part 10

9. Images in Emails

 

You can use as many images in an email message as you wish – the right number depends on the purpose, type and focus of the email. For instance, e-commerce emails often have more images than promotional emails.

Consider using graphic images and buttons to draw a reader’s attention. These images can convey concepts in combination with your copy. Make sure your call-to-action is not only supported by an image but also by text. This way, if the images are turned off, the call-to-action is still clear.

Images for emails should be hosted on a Website and not embedded within the email to ensure proper rendering and to minimize the email’s file size.

Important note:

Define the size and parameters (horizontal and vertical height in pixels) of each graphic in the <IMG SRC> tags.

For example:
<img src=”http://www.companyabc.com/image.gif” width=”75” height=”60” alt=”Titleof Image”>

 

Read earlier blogs on “Guide to a Better HTML Email Design” on Kenscio Blog.

Share

Guide to a Better HTML Email Design – Part 9

8. Style Sheets

Many Web designers use Cascading Style Sheets (CSS) to simplify the coding process and ensure a consistent style throughout a Website. Use of CSS in HTML emails can be problematic, however, as many email clients will not render style sheets correctly.

Here is a handy reference on whether an email client renders certain types of style sheets correctly.

CSS and Rendering in email Clients

 

Avoid using CSS if possible; but if you must use them, choose the embedded styles also known as ‘inline’. Embed the style within the two container tags and not within the header because some email clients will truncate or strip out the header.

So, add the style within the body tags, like this:

<body>
<div style=“color:#000000;font-weight:bold;“> Main Text </div>
</body>

 

 

Read earlier blogs on “Guide to a Better HTML Email Design” on Kenscio Blog.

Share

Guide to a Better HTML Email Design – Part 8

7. Buttons, Charts & Other Supporting Images

 

Buttons, charts, and other supporting images should use the colors of your design elements to pull the reader’s eye to the images.

Make sure the text color used on your images stands out and is readable. Most importantly, make sure the recipient understands the action. See the examples below:

 

Shop Now button

Buy Now button

Free Shipping button

 

Read earlier blogs on “Guide to a Better HTML Email Design” on Kenscio Blog.

 

Share

Guide to a Better HTML Email Design – Part 7

6. Color and Background Color

 

In everything from images to fonts, colors play an important role in the email design process but can also create problems. For example, don’t choose a font color such as a muted gray on a gray background that makes your headlines and calls-to-action difficult to read. And don’t run the risk of hiding valuable information in your emails by blending the content into the background.
Men and women react differently to colors, but several polls on color preferences by gender and age yield interesting results:

 

Target Audience Favorite Colors Least Favorite Colors
Females Blue, Purple, Green
(all “cool” colors)
Orange, Brown, Gray
(“warm” & “neutral” colors)
Males Blue, Green, Black
(two “cool” & one “neutral” color)
Brown, Orange, Purple
(“neutral”, “warm” & “mixed” colors)
All Genders Preferences for Green decrease with age;
Preferences for purple increase with age
Dislike of Orange increases with age

 

For more information on color preferences and perceptions, check out these resources:
http://desktoppub.about.com/cs/color/a/symbolism.htm
http://desktoppub.about.com/od/howcolorworks/l/aa_colorsee.htm

 

Background Color

Use a white or very light-colored background with a dark to medium font color to make it easy for recipients to read your email message. Also, if you use background colors in sidebar boxes contain them within tables and avoid using a body background color, because Web-based clients remove the body tag and typically place its attributes within a table. Email clients such as Microsoft Outlook might retain the specified background color when replying to or forwarding the email, but other clients use their colors, making message text difficult to read in some instances.

 

Read earlier blogs on “Guide to a Better HTML Email Design” on Kenscio Blog.

Font, Font Size and Font Color – Guide to a Better HTML Email Design – Part 6

Using Forms in HTML Emails – Guide to a Better HTML Email Design – Part 5

Validate HTML Content and Avoid Using Scripts – Guide to a Better HTML Email Design – Part 4

HTML Email Coding Guidelines – Guide to a Better HTML Email Design – Part 3

HTML Email Layout – Guide to a Better HTML Email Design – Part 2

Guide to a Better HTML Email Design – Part 1

Share

Guide to a Better HTML Email Design – Part 6

5. Font, Font Size and Font Color

 

In general, only universally-supported fonts such as Arial and Times New Roman should be used in email messages. Arial is a font that was specifically designed for onscreen readability. Studies indicate that Web users prefer Arial, Verdana and Tahoma to others when viewing Web pages and email.

If you include fonts that are not loaded on your recipients’ machines, their email clients will substitute different fonts, which can affect your design. When using a special font (such as the unique font for a company logo), place it within an image.

Fonts can be specified in pixels, points or HTML font size value. Use a point size no smaller than 10 pixels, 10 point, or size “2”.

Beware of using white as a font color. While it is tempting to use a dark background and white font to make the text stand out, many spam filters identify the use of white (#FFFFFF) in a font tag as a possible spam trigger. Spammers often use a white font on white backgrounds to hide information from recipients. Use your color wheel to find contrasting colors that can accentuate your message and readability.

 

Read earlier blogs on “Guide to a Better HTML Email Design” on Kenscio Blog.

 

Using Forms in HTML Emails – Guide to a Better HTML Email Design – Part 5

Validate HTML Content and Avoid Using Scripts – Guide to a Better HTML Email Design – Part 4

HTML Email Coding Guidelines – Guide to a Better HTML Email Design – Part 3

HTML Email Layout – Guide to a Better HTML Email Design – Part 2

Guide to a Better HTML Email Design – Part 1

Share

Guide to a Better HTML Email Design – Part 5

4. Using Forms in HTML Emails
We generally discourage the use of forms in email to prevent delivery or usability problems. However, at times you might still need to use a form in an email instead of directing readers to your Website. Consider these factors before you use a form in your next email message.
Those recipients of your email who use Hotmail or those who use Outlook 2007 will not be able to use the form because:

  • Hotmail displays the form but strips all values from your <FORM> tag and removes the name values of all form elements, rendering the form useless.
  • Hotmail recipients can complete the form, but nothing will happen when they hit the submit button so they will not know it has not been received .
  • Outlook 2007 has limitations when viewing forms in the mail client. Outlook 2007 cannot see data in a “form tag”, when a form is passed via email and viewed in Outlook 2007 as outlook strips out form elements.

Refer:

http://help.isu.edu/index.php?action=knowledgebase&catid=38&subcatid=39&docid=1058
http://www.sitepoint.com/blogs/2007/01/10/microsoft-breaks-html-email-rendering-in-outlook/

Some email clients do not support forms that use “POST” method, which allows form data to appear within the message body. Instead you will need to replace it with the “GET” method, which will write all form content to the query string of the page to which the form is posted.
For example: <form method=”get” action=”http://…..>

Most email clients that provide a preview pane don’t allow you to tab between form elements. This means that when a recipient completes the first field in your form and clicks the TAB key, the focus is automatically shifted to another part of the software. This hinders usability and can confuse your recipient.

 

Form based mailer Format

1. Form tags needs to be defined for the section that has the form details/elements to be captured.
2. Specify relevant names for the data capture elements.
3. All the data validations should be done on the server side at the client’s end.
4. Specify the form Method as GET.
5. Define appropriate action for the form. The action should ideally take them to the page which captures and validates data on the server side at the client’s end.

Once data is validated then appropriate action needs to be taken, the process should be as follows:

– Data should be captured from the GET parameters.

– Once the data is captured, validate the data.

– If everything is fine, then it should take the user to a Thank You page hosted by the client.

– Else, it should redirect to the same or similar form page which will be hosted by the client, where all the errors should be highlighted and data should be pre-populated if needed

6. There should be no Javascript code present in the email html.

Sample code snippet

<form method=”GET” action=”http://” >

<table>

<tr>

<td>Name : <input type=”text” name=”name” value=””/></td>

</tr>

<tr>

<td>Email : <input type=”text” name=”Email” value=””/></td>

</tr>

<tr>

<td><input type=”submit” name=”submit”></td>

</tr>

</table>

</form>

 

Read earlier blogs on the same subject.

Validate HTML Content and Avoid Using Scripts – Guide to a Better HTML Email Design – Part 4


HTML Email Coding Guidelines – Guide to a Better HTML Email Design – Part 3

HTML Email Layout – Guide to a Better HTML Email Design – Part 2

Guide to a Better HTML Email Design – Part 1

Share

Guide to a Better HTML Email Design – Part 4

3. Validate HTML Content and Avoid Using Scripts

The vast majority of HTML emails do not comply with World Wide Web Consortium (W3C) HTML standards. This can cause rendering and delivery issues, particularly at AOL, MSN and Hotmail. AOL, for example, has a that is an HTML validator, which scans incoming messages for HTML syntax and formatting errors. If it detects invalid HTML, it will reject the message.
If you use HTML in your messages, make sure your code is error-free and follows W3C HTML standards. Popular HTML-editing software such as Homesite or Macromedia Dreamweaver already offer effective validation tools and will highlight any errors as you create your message. For a complete reference spec of HTML formatting, visit the World Wide Web Consortium documentation pages. Also, you can use the HTML validator in your email application or a third-party validator such as W3C Markup Validation Service.

Also, avoid scripting. Scripting languages, which can be imbedded within HTML, are often used to add dynamic functionality to a Web page. However, security risks due to script vulnerabilities in email browsers have increased over the years. The result is most scripts, such as JavaScript and VBScript, get stripped out of messages. Some email systems reject messages outright if they detect scripting. For greatest compatibility, avoid using scripts in messages. Instead, drive your readers to your Website, where dynamic components are easily rendered.

 

Read earlier blogs on the same subject.

HTML Email Coding Guidelines – Guide to a Better HTML Email Design – Part 3

HTML Email Layout – Guide to a Better HTML Email Design – Part 2

Guide to a Better HTML Email Design – Part 1

Share

Guide to a Better HTML Email Design – Part 3

2. Email HTML Coding Guidelines:

a. HTML Coding Do’s

  • Code HTML emails as a single Web page with the basic <HTML>, <HEAD>, <TITLE>, and <BODY> tags.
  • Code emails by hand where possible, as WYSIWYG (What You See Is What You Get) editors typically add extra code that creates havoc with certain email clients. If you must use an editor, use Dreamweaver or Homesite, which do not add extra code to the design process.
  • Use HTML tables for the design layout.
  • Keep emails at a fixed width of between 500-620 pixels wide.
  • Instead of defining percentage widths use fixed widths. While this is not optimal, because people can and do resize their email windows when reading, sometimes using a fixed width is the only way for a layout to display properly in multiple email software.
  • Use only the ASCII character set. More advanced word-processing software often inserts odd characters, such as the trailing dot characters or smart quotes (curly instead of straight), which can hamper display or create delivery problems in some email software.
  • If you use CSS, include inline styles. Do not link to an external style sheet nor use embedded styles, as this code is often stripped out by email clients, creating display problems.
  • Make sure all tags have supporting closing tags. The most common HTML errors come from not having a closing </FONT> tag or having open <TD> or <TR> tags in the HTML. While your HTML might render properly in a browser, these errors can cause problems with many email clients.
  • Use the HTML table attributes within the TABLE and TD tags.
  • For example: to set the table border=0, valign=top, align=left (or center, if that is the design), cellpadding=0, cellspacing=0, and so on. This primarily helps older email readers to display the html email in a minimally-acceptable way.
  • Put general font style information in the table TD or DIV or P tags closest to the content. This can mean repetitive style declarations in multiple TD cells or DIV’s or P tag. Put font style definitions into heading (e.g. H1, H2), P, or A tags only when necessary.
  • Use DIVs sparingly to float small boxes of content and links to the right or left inside a table TD cell. Google Mail appears to ignore the CSS Float property but Yahoo! and Hotmail work fine. Outlook 2007 ignores floats.
  • Sometimes it is better to code a more complex table layout than rely on the Float property. Since email is easy to clutter, ask that the design put the floated content in the narrow side column. Floats are the one part of an email design that might require the design be reworked.
  • Animated GIF files are acceptable, but use them sparingly.
  • Use of images maps is acceptable.
  • If there is a spacing issue with the columns in the email design, first tweak the cellpadding and cellspacing attributes of the HTML tables. If that does not work, use CSS margin and padding attributes. HTML spacing works better with older email software than spacing with CSS.
  • If an image is cut up and spread across several HTML table cells, test the email with many test accounts. Sometimes it looks great in Outlook but shifts by 1 pixel or more in Hotmail and other services. Also consider putting the image as a background image on a new html table that encases all the table rows and columns that would display parts of your background image. sometimes this achieves the same effect as cutting an image up but with less code and better results.

 

Note that Outlook 2007 does not display background images. Be sure to test your email code with your target email client software.

  • If you use background images, use the HTML table attribute background= instead of CSS. It works more consistently across email software except Outlook. Define appropriate bgcolor for the TD’s so that the color is displayed when the images are blocked.
  • Be sure all your images use the alt tags, height, and width parameters. This helps with Google Mail as well as when a reader has their images turned off. However, Outlook 2007 does not recognize the alt= parameter.
  • Use the target=”_blank” attribute for the HTML A tags so that people reading with a webmail service don’t have the requested page appear within their webmail interface.
  • Avoid a big image above the fold in the email. This is another classic spammer practice and can increase the likelihood an email will be tagged as spam.
  • Make sure your email content displays fine without images.

For example: if you use a background image to provide a background color with white font color over it, make sure the default background color for that part of the HTML table is dark, not white. Also be sure your alt=, height=, and width= parameters are set for images so they can help readers understand your content without images. Turning off your images will help you catch these issues and ensure the HTML email will display effectively if people see your email with images off.

  • Test your HTML code. Make sure your code conforms to World Wide Web Consortium (W3C) HTML standards
  • When sending a multi-part message, remember to create the text version. Most email clients send HTML as a multi-part alternative by default. Failing to include the text part of the message can cause some filters to treat your email as spam.

 

b. HTML Coding don’ts

  • HTML should not contain any JavaScript or any other script embedded in it. Some email clients do not support JavaScript, and others view it as a security risk.
  • Avoid using CSS for positioning. The support is very limited and will, more than likely, result in a broken layout for most of your recipients.
  • Avoid nested tables if possible. Some email clients, especially Lotus Notes and Netscape Messenger, might not render them correctly.
  • Do not use canvas background images. Most email clients do not display canvas background images. Background images for individual table cells are generally acceptable but might not appear in some clients such as Lotus Notes.
  • Do not apply attributes to the <BODY> tag. Attributes placed in the <BODY> tag are often flagged by spam filters and increase the likelihood of your message getting bulked or blocked.
  • With multiple embedded images, which also might cause the email to be blocked
  • Do not use EMBED tags.
  • Avoid embedding forms, such as surveys, into emails. Some email clients such as Hotmail might not pass the data through to the collection point. Instead, link to a Web form through which the recipient can complete the survey.

 

 

Share

Copyright © 2017 Kenscio Blog. All rights reserved.
iDream theme by Templates Next | Powered by WordPress