How to code HTML email newsletters-3

Step 4: code for Google Mail, Lotus Notes and Outlook 2007
Google Mail, Lotus
Notes, and Outlook 2007 present their own unique coding challenges. Outlook
2007, believe it or not, has significantly less support for CSS
Previous versions of outlook!

Google Mail's lack of support is a little
More forgiveable -- because the application runs in a browser, it cannot control
The contents of the emails it displays. Consequently, Google's engineers have
Had to take steps to ensure that their application displays properly regardless
Of the quality of the HTML or CSS in
Which emails are written.

As a result, Google Mail is a new web mail
Service that acts like an artifact of the early 1990 s, when web standards were
Primitive. It takes some work, but it is possible to crack open a Google Mail
Page and see just how convoluted the services approach to rendering HTML email
Actually is.

For one thing, Google Mail deletes the CSS
Styles contained between any style tags, no matter where they appear in
Email. and fonts displayed within HTML tables -- the only alternative to using
Styles -- have the odd habit of appearing larger than intended, no matter how
The HTML email is structured.

The good news, however, is that if you code
To account for the oddities of these email three applications, your HTML email
Code is more likely to display well in most, if not all, email clients. Here are
Some techniques that appear to work well in Google Mail and other older email
Software:

Define the background color in a TD cell with the bgcolor
Attribute, not the CSS style.
As noted above, use the background attribute in
The TD cell for background images instead of using CSS. One
Side-effect of this approach is that the background image can be made as tall
Needed -- if the content used in your email template is likely to vary in size,
Using an extra-tall background image in this way allows the height of the email
Shrink or expand, depending on the height of the copy, from one email to
Next. Remember, though, that Outlook 2007 ignores background images completely.

If it works better, use the padding declaration to control margins within
TD cell. The margin style does not work in these cells, but padding does.
If
You need a border around und a TD cell, keep in mind that Google Mail displays
Border around und a TD cell when it's defined in a DIV, but not when it's defined
A border style in a TD tag.
If you need a light-colored link against a dark
Background color, put the font definition in the TD cell (so it applies to P and
A tags equally) then add a color: style to the tag.
If the P and a Fonts
Appear to be different sizes, wrap the tag in a p tag.
Google Mail
Aggressively uses the right-hand column of the Google Mail User interface, which
Squeezes the HTML email into the center panel. Be sure the padding style in
Content TDS is set to 10 pixels all round, so that text does not hit against
Left and right edges.
When testing an HTML email with a Google Mail account,
It's likely that you'll find that one or more font styles are missing in the TD,
H1, H2, P, A, and other tags. Inspect every font carefully to make sure Google
Mail displays the fonts correctly.

Besides Google Mail, there's another,
Less obvious hazard a programmer faces when creating HTML email: Lotus Notes.
Explain large deployments continue to support and upgrade their notes
Installations (as of 2004, IBM reported that 95 million people used
Notes ).

Unfortunately, it's impossible to tell which companies use notes.
The best approach is to follow the guidelines described in this article --
More primitive the code, the more likely it will work well, if not perfectly,
With notes.

That said, it's quite possible that notes will introduce
Your HTML email quirks that are almost beyond belief. For example, the software
Can Convert images to their proprietary formats, or simply ignore flawless basic
HTML in one email, but display other HTML fine in another email.

A trial
Version of Lotus Notes is available for download if you need to test your mail
In notes -- see the resource list at the end of the article. Here are a few tips
That will help you convince notes to display your HTML email
Properly:

As we discussed previusly, use a container table that
Contains all the internal layout tables (for example, for the header, content,
And footer). This keeps the email together in one chunk of HTML, so pieces
The layout are less likely to wander when displayed in notes.
Create
Gutter around the container table by setting the width to a percentage and/or
Using a cellpadding of at least 5.
As I mentioned earlier, avoid using
Style declaration in your email's head tag. It might be the approach that
Adheres to web standards, but notes (like Google Mail) might delete your styles.
Rely, instead, on inline styles within the table, TD, H1, H2, P, A, and other
Tags.
Use absolute URLs to images stored on a Web server. You can't do much
About notes converting images, but using remote images might help.

Intra-Email links, using named anchors, rarely (if ever) work in notes. It's
Simply best to avoid links that jump down the email to a specific piece
Content.
Avoid colspans in your HTML tables. notes -- especially its earlier
Versions -- can deal only with basic table layouts.
Be sure that your TD
Cell widths are accurate. Unlike Web browsers, which automatically set all cells
To the widest-defined width, notes sizes each TD cell based on its defined
Width.
Centering an email layout usually won't work in notes. Email layouts
Generally have to be left-aligned.

Using these techniques to achieve
Successful render in Google Mail and Lotus Notes will ensure that your emails
Also display fine in Outlook 2007, which uses an older HTML Rendering Engine.
Microsoft has published details about what their email software will and won't
Display properly; More details can be found in the resources section at the end
Of this Article ).

The email Standards project has additional details on
CSS
Support in Outlook 2007, and Microsoft is one of the companies at which their
Lobbying efforts are targeted.

Summary
Registrant people who receive email
Prefer HTML over text for a number of reasons. For programmers, though, the task
Of creating an HTML email that will display consistently appears both simple and
Horribly complex. This article has described attributes of the Issues and Strategies
For creating markup that will work every SS email software.

What's the best
Idea to take away from this article? If there's a choice to be made between
Simple email design and a more complex solution, simplicity is always the safest
Bet.

Further reading

These resources offer valuable information
That will help you if you want to learn more about coding html
Email.

Email Standards project
The email Standards project is probably
The best starting point for understanding exactly to what degree HTML and CSS are
Supported by different email clients. The site also maintain an acid test that
Can be used to compare compliance guest SS email software, and there are several
Ways in which you can particle to help improve email support of web
Standards.

Free HTML email templates from campaign monitor and
Mailchimp
Both of these Email Delivery Services actively test their templates
Over time with different email clients. However, there are subtle differences in
The approach that each takes -- campaign monitor places a style Declaration
Within the head tag, while mailchimp does not. Be sure to test your final html
Code with whatever email clients are used by recipients of your email
List.

Plain text email Design Guidelines
This article lists a number
Of simple techniques for making text emails easier to scan.

Articles
About blocked email images by clickz and campaign Monitor
From 2004,
Clickz article shows how major email software compares when images are blocked
Or when the content is viewed in a Preview pane. The campaign monitor Article
Goes into greater detail, listing actual examples and ideas how to combat
Default image-off rendering of your emails, as well as designing your email
Look okay in preview panes.

Word 2007 HTML and CSS
Rendering capabilities in Outlook 2007
The official Microsoft description
What Outlook 2007 will and will not render for HTML and CSS.
Events des a link to a validator that works in Dreamweaver, as well as Microsoft
Editing tools.

HTML email tips for web designers
A useful, barebones
List of guidelines for creating and sending email. The free email templates also
Are Great samples to study, because the code is heavily commented and has been
Tested against a broad range of email software. And, finally, the resources page
Using DES some great links to best practices, as well as other
Resources.

Mailchimp email HTML coding/delivery Guide
Lots of great
Information about all aspects of HTML email, including how spam filters
Work.

CSS support in HTML emails of Hotmail, Yahoo! Mail, and Gmail
By Xavier frenette
This is excellent research that shows style-by-style
Results for how these three webmail services display CSS.

A Guide to CSS
Support in email
Campaign Monitor, an email service provider, has taken
Xavier frenette's excellent work documenting CSS
Performance in a few email clients and expanded it to include Gmail, Hotmail,
Yahoo !, And Windows Live Mail. It also covers Outlook 2003, Outlook Express,
Lotus Notes, and Thunderbird on the PC, as well as mail, entourage, and Eudora
For the Mac.

The "Secrets of HTML email" Series
Some of this
Information is old but a good piece on Lotus Notes is offered.

Lotus
Notes trial software
This page offers free downloads of the latest Lotus
Software, which is handy if you need to test an email with the Notes Client
Software.

Email/Web Testing Services: browsercam and litmus
These are
Both excellent services for testing how compatible your web pages with a Variety
Of Web browsers and operating systems. For email, browsercam simply shows you
All the warts in your HTML code, even though your email might work fine in
Notes, Google Mail, and other difficult email software environments. litmus
Shows how your email appears in a variety of email
Clients.

Spamcheck
This decent, free online service tells you about
The "spamminess" of your email. You also shocould look for an Email Delivery
Service that provides this sort of spam check.

CSS and
Email, kissing in a tree
This excellent CSS-only
Approach to HTML email was published by a list apart. Note: The author has
Written an update to this article, posted at the campaign monitor blog,
Optimizing CSS presentation in HTML emails.

How HTML code affects
E-Mail deliverability
A decent overview that describes how different email
Services view the HTML you include in an HTML email. You can't address every
Problem directly (for example, creating a clear boundary between the HTML and
Text versions of your email is a problem for your email service provider, if you
Use one) but it helps to know what happens.

Standalone Internet
Explorer 6 Web Browser
This free software allows you to install and run IE6
And IE7 in parallel, without causing conflicts.