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 We 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.
Lets 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, dont choose a font color such as a muted gray on a gray background that makes your headlines and calls to action hard to read. Dont 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 ISPs 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 readers 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 images to direct the reader to your social media pages on these websites) and
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
References:
Websites
http://www.clickz.com/ www.flyte.biz
Books
The Complete Guide in Email Marketing by Bruce C. Brown
