Tag: best practices

Guide to a Better HTML Email Design – Part 15

14. Phishing and HTML Links


Many email clients are being updated to detect phishing attempts. “Phishing” is the industry nickname for the effort to collect sensitive personal and financial information by sending forged emails that look as if they come from an authorized agency, such as a bank, financial service, ecommerce provider or government agency.
Both Mozilla Thunderbird and AOL 9.0 feature phishing scam detection that will affect how your email is treated. To determine whether an email could be a phishing scam, the client looks for a link in your HTML campaign where the display text is a URL.

If the displayed link is different from the actual URL, the client alerts the user.

Most email service providers encode your URLs for tracking, and change the URL within the <HREF> tag.

<a href=”http://www.yoursite.com”>http://www.yoursite.com</a>

The change might look like this:

<a href=”http://ESP.com/c.html?rtr=on&s=3d2,l8xr,pt,37e5,6bav”>http://www.yoursite.com</a>

To avoid having your emails erroneously tagged as phishing attempts, don’t use a URL as the display text for a link in any HTML emails. Instead, use a word or phrase which describes the link itself.

<a href=”http://www.yoursite.com”>Visit us here</a>

Most of the email clients also mark the mails with Phishing tag, if the email message contains any hardcoded IP addresses in links, instead of domain name.

Hence it is advised to use only domain names in all links.

Now a days more and more ISPs are recommending the email senders to implement DKIM for authentication of the sending domains that actually send the mails, to restrict senders to use the sender address to the email sending domain or DKIM to be setup for each sender address. ISPs give higher preference for such senders for inbox deliverability and provide spam complaint feedback loops.

Hence Marketers are advised to get the DKIM setup for their email infrastructure through their service providers.

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


Share Button

Guide to a Better HTML Email Design – Part 14

13. Number of Hyperlinks


The main job of your email is to motivate recipients to click through to your Website. Hyperlinks in an e-commerce email, for example, should not be like in-store retail salespeople — there when you want to be left alone, but nowhere to be found when you need help and are ready to buy.

Be sure to place text, image and navigation links throughout your email so that a customer can’t go anywhere without tripping over a link. Make sure that all images, especially your logo, are clickable links. Consumers are trained to click on images and expect them work.

In fact, it’s been proven time and again that increasing the number of hyperlinks in an email message leads to increased open and click-through rates. Even if you are promoting a single product, you should still have multiple links throughout the email, including your logo, navigation links at the top and bottom of your message and the call-to-action. The key is to make the links relevant to the message and the recipient.

Emails with 25 or more links have an open rate 12% higher than those containing fewer than 25 links, and a click-through rate that was 29% higher than that for emails with fewer than 25 links. However, you should not merely list a bunch of links at the bottom of the email. Doing this could hurt delivery, as it is a common spam tactic.

The more links there are, the greater the chance that one or more will resonate with recipients and motivate them to click through. And while 25 links might sound like a lot, navigation and administrative links in best-practices newsletters can easily reach 15-20 links by themselves.

Although these findings are compelling, it is essential that you conduct a/b split (multi-variate) tests across key variables to determine what works best for your customers and subscribers.


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

Share Button

Guide to a Better HTML Email Design – Part 13

12. Preview Panes and Blocked Images


The two advances in email clients are combining to deliver a double whammy to email marketers:

  1. the horizontal/vertical preview panes which allow a reader to view just a narrow strip or square of an email message without actually opening it, and
  2. a blocked-images feature that prevents images from downloading unless the reader requests them. Around 75% of people who use preview panes prefer the horizontal version, while the remaining 25% prefer the vertical version. You can cover both pane configurations by placing the most important information in the top left corner.

Email Newsletter - Blocked Images
The Sprinklr India Newsletter in the Outlook preview pane: although the images are blocked, recipients can preview the email’s contents from the teaser text and a concise subject line.
Individually, each of these features can throw off your open rate and prevent users from seeing your most critical information. In tandem, it means your email performance may be reduced significantly if you don’t redesign your emails to deliver key information as quickly as possible. In fact, you should assume that you have only 2 to 4 inches of space to tell your story and persuade viewers to open your email instead of just previewing it.

Although this has implications for both business and consumer email marketers and publishers, the problem is especially acute for B2B emailers, because a significant portion of their readers are likely using Outlook and Lotus Notes — the two email clients that combine preview panes and blocked images.
Some email industry observers have even attributed drops in open rates to widespread use of blocked images, because an “open” is generally counted when a small, clear image within an email message is called from a Web server. If the image is being blocked, the “open” is not counted.

While most Web-based email clients don’t use preview panes, Yahoo Mail has a relatively new Web client that behaves more like a desktop client with a preview pane and default image-blocking. Yahoo Mail and other Web email clients also use image blocking as a default setting.

Take these steps to make your email more preview-pane/disabled-image friendly:

  1. Redesign the top of your email template so that key content shows in the preview pane even if images are disabled or blocked. Content-oriented newsletters should include headlines or “In This Issue” teasers. Newsletters with banner/image-based ads should switch to text ads and content teasers. Ecommerce and other promotional-type emails should summarize or highlight the key proposition, offer or products right up top.
  2. Study your click-tracking reports to understand where readers are clicking most often. Use this information to determine the best placement of images and links.
  3. Ask to be added to your subscribers’ address book. Images are displayed by default if you’re in the address book for all AOL and Hotmail recipients as well as anyone using Outlook or Outlook Express. Always send from the same address, since that is the address the recipient will add to the address book.
  4. Move less critical administrative information to an Admin Center at the end of the email or newsletter, especially if it draws few clicks. But consider keeping or including text links to key actions below your “In This Issue” or teaser text. At Sprinklr, we saw a fairly high number of newsletter subscribers clicking the “View Message Online” link. So, we kept that and added “Update Profile” and a few other key actions.
  5. Your From and Subject lines become much more important in this new reality. Sixty percent of readers told us they consult subject lines to decide whether they’ll scan the message in the preview pane or just delete it without a glance.
  6. In this new preview-pane format, the From and Subject lines become the top two points of a triangle, with the third point being the top of your newsletter or email. All three have to work together to snag a reader’s eye.
  7. Remember that email clients vary in how they show From and Subject lines in the Inbox. You should keep both to no more than 50 characters each.
  8. Use both text and HTML in advertisements, logos and branding messages rather than live images linked to your Website, such as JPEGs or GIFs. You’ll still be able to deliver key information even to readers whose email clients block images.
  9. Use alt tags that describe an image’s content or action.
  10. Review your HTML coding to make sure it complies with W3C standards.
  11. Review how well your format complies with the quirks and nonstandard rendering of Lotus Notes. Depending on your B2B readership, your Lotus Notes subscriber base might range from a low of 5% to as high as 15%.
  12. Eliminate skyscraper or vertically rectangular ads that go deeper than the pixel equivalent of 3 or 4 inches.

Whether your email subscribers are B2B or B2C, use of the preview pane will only increase. You should act now to redesign your emails for a world of blocked images and small preview panes.


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


Share Button

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 Button

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
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 Button

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 Button

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 Button

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:


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 Button

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 Button

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.



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://” >



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



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



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





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 Button

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