Best Practices of HTML Designing in Email Marketing

Email marketing is one of the most powerful and effective forms of marketing today. Email campaigns can be quickly deployed, offers measurable results, allows one-to-one communication and personalization and delivers a very high return on investment relative to other marketing options.

Achieving maximum results from HTML emails, at least from the standpoint of message construction, does require adherence to sound HTML design techniques. Simple mistakes in your HTML code can adversely affect delivery and usability --- and ultimately hamstring your ROI. For this reason netCORE has compiled this guide to HTML design.

Also, avoid scripting. 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 outright reject messages if that contain scripting. For greatest compatibility of emails avoid using scripts. Instead, drive recipients to your website, where dynamic components are easily rendered.

Designing a template plays a vital role in the success of a particular email campaign. If your HTML interest the reader and if it communicates the message clearly to your end user, then surely you have won the battle and your purpose of engaging the customer with your brand name was successful.

Let’s look at some of the aspects which we need to consider before designing a HTML

Image and Text Combination:

It is very important to use a combination of images and text in the email content. Generically the industry standards state usage of 60% - 40% usage of image and text combination respectively.

Using Forms in HTML Emails

We discourage embedding forms into email because of delivery and usability problems. However, when you do need to use a form, consider the following:
Hotmail will not allow a working form in an email. 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.

Font and Font Size

In general, use only universally-supported fonts such as Arial and Times New Roman for your message. If you include fonts that are not also loaded on your recipients’ computers, their email clients will substitute different fonts, which can effect your design. If you must use a special font (such as within a company logo), use it with an image. Arial is a font that was specifically designed for onscreen readability. Studies indicate that Web uses prefer Arial, Verdana, and Tahoma to others when viewing Web pages and email.

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

Color

From images to fonts, colors play an important role in the 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 hard to read. Don’t hide valuable information in your emails by blending the content into the background.

Background Colors

Firstly we should avoid the usage of dark background colors as the probability of ISP’s blocking the particular email content is more. We should Use a white or very light background with dark to medium font color to provide easy readability for your recipients. Also, email clients such as Microsoft Outlook might retain the background color when replying to or forwarding the email but use their default font color (usually black), making the text difficult to read.

These are certain observations made at our end which often tend to hamper the inbox delivery, that is the probability of the delivery getting hampered increases. It would be wrong to conclude saying that these factors would surely lead to spamming, but

Buttons Charts, etc…

Buttons, charts, and other supporting images should use 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.

Keep HTML Emails 500-660 Pixels in Width

Most HTML emails are 500 – 650 pixels wide. Early email clients were developed before HTML and were not designed to render wide web page-like emails. More recently, the message windows of popular web-based email services like Yahoo Mail, Hotmail and Gmail will typically present 600-750 pixels, although this will vary according to users’ screen resolutions.

This means that HTML messages wider than this range require the recipient to scroll horizontally to view the whole email. Forcing a user to scroll horizontally might be OK on your website, but you should avoid it in an email.

Images

Images for emails should be hosted on a web site and not embedded within the email to ensure proper rendering and minimize file size. It is preferred to avoid attachments in the mailer. You can use as many images as you wish (but be sure to keep each image size at or below 50kb to avoid filtering) – the right number depends on purpose, type and focus of the email.

Consider using graphic images and buttons to draw readers’ attention. These images can convey concepts such as Free Shipping, Email-Only Special, Buy now and Limited Supply 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 recipient can still find your call to action.
Call to Action
Call to action is one of the crucial aspects of the email content without which an email is incomplete. Call to action is a hyperlink which is given on the images in your content. Now we may not be able to highlight all the aspects of our product or the various product lines in the email content, this is where call to action plays a crucial role in directing the reader to your website or any other landing page. (Social Media hyperlink is commonly used on and  images to direct the reader to your social media pages on these websites)


Use Image Alt Tags

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

1. 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.
2. Many email clients (Outlook 2003 and Outlook Express) and email services (Hotmail and Gmail) disable images by default or display a warning message or command to download the images
3. When the email is viewed from on handhelds/mobile, Alt tag gives an option to user to refer the text and understand whether it is important to download the image or not.

Added suggestions on HTML

Use Table for layout. It is very essential to declare Cellspacing and cellpadding for each table. The Style should be defined in specific table cells or <td> tags. Usage of colspan and rowspan should be avoided.

Background images should be avoided; inserting them in the HTML is preferred with <img> tags.

Avoid paragraph and heading tags. Paragraph tags <p> and heading tags (<h1><h2><h3> etc.) sometimes tends to adversely affect the design of the email in a particular mail client . Instead it is preferred to style text within div or span tags to avoid such discrepancy

Use of tables:

Use tables instead of div tags and alignment should be define according to tabls intead of margins.

Background images should be define in styles in <td> tags.

References:
Websites
http://www.clickz.com/
www.flyte.biz
Books
“The Complete Guide in Email Marketing” by Bruce C. Brown