16. Navigation and Search in Email Message

Your email is basically an extension of your Website so, where appropriate, make the navigation of your email message consistent with your Website — but also highlight key areas of your Website that are likely to get customers to take action. If you have Bargain Basement, Closeouts, Featured Products and other areas on your site — use them in your email.

If your Email Service Provider provides the feature of visually providing the user attention through the links clicks, You can analyze which sections of your email message are generating more clicks and optimize the offer placements to areas where the users are more likely to click.

You can also use multi-variate testing to test the email content and subject lines that provide the highest open and click through rates, before sending the email message to the entire audience.

If you have a search capability on your Website, add it to your email. Your customers can type in their search phrase, hit submit, and it will take them to your Website’s search-results page. You now have those people on your Website, where you have the potential to convert them to customers.

Allow your landing pages to be searchable by the search engines and look for user search phrases. This can provide what users are looking for on the web and this will provide very useful information on the subject lines for your email message.

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

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.

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.

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.

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.

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:

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

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:

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

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

Email marketing is one of the most powerful and effective forms of marketing today. It is quick to deploy, offers immediate and highly-measurable results, enables advanced segmentation and personalization, and delivers a high return on investment.

However, achieving maximum results from your HTML email requires experience and expertise. Simple mistakes in the implementation of HTML emails can seriously affect delivery or usability and cripple your ROI.

To help marketers optimize results from their email marketing efforts, Kenscio has created this complete guide to create effective HTML email. These technical and design best practices give marketers the ability to improve their own email marketing campaigns. This guide is best shared amongst email marketers and the HTML coding staff that supports your email development efforts.

In this guide we will cover:

1. Email Layout
2. HTML coding do’s and don’ts
3. Validate HTML content and avoid using scripts
4. Using forms in HTML emails
5. Font and font size
6. Color
7. Background colors
8. Font colors
9. Buttons, charts & other supporting images
10. Style sheets
11. Images
12. Image alt tags
13. Creating a Web version of your email newsletter
14. Preview panes and blocked images
15. Number of hyperlinks
16. Phishing and HTML Links
17. Message file size
18. Length of email messages
19. Personalization
20. Individualization
21. Navigation of email messages
22. Search capability in email
23. Email format/Versions
24. Add to Address Book
25. Forward-to-a-friend functionality
26. Rich Media/Flash
27. Video email
28. Tips Email Deliverability to Inbox
29. Five common flaws that you can avoid in Email Marketing Campaigns

Everyday we will cover the above topics in details. Keep visiting the Kenscio blog to learn in depth of each topic.

Your feedback and comments are most welcome!

Happy Reading!

@Kenscio Email Design Team

Copy rights to articles on Kenscio blog reserved. Any article from Kenscio blog can be reproduced by providing credits to Kenscio or providing a link back to Kenscio blog.

Guidelines for Email Design – Create effective HTML Emails keeping current best practices in mind.

Long gone are the early days of HTML email marketing, when we could just drop one big graphic in our files with an image map defining the different areas the graphic would link to. Over the years, as a range of email readers multiplied with varying support for graphics, and spammers abused the support of imagery, the rules of using graphics in HTML emails have changed considerably.

Read the entire article on Kenscio website at http://www.kenscio.com/resource-center/Guidelines_for_Email_Design.pdf