How to code HTML email newsletters-2

Step 2: Add CSS styles
Did I say CSS
Support was poor in mail clients? Well, it is. But you can (and shoshould) still
Utilize CSS for the styles in your email once your nested table layout
Is in place. There are just a few things to watch out for. Here are the steps
That I use.

First, use inline styles to store all of your style
Information, as shown here:

<P style = "color: red;">

This
Except des table, TD, P, A, and so on.

Do not use the CSS
Style declaration in the HTML head tag, as you might when authoring web pages.
Instead, place your style declaration right below the Body Tag -- Google Mail,
In particle, looks for any style in the email and (helpfully) deletes it.
Also, don't bother using the link element to reference an external style sheet:
Google Mail, Hotmail, and other email software will ignore, modify, or delete
These external references to a style sheet.

For your container table --
The one that houses the header, content, and footer tables -- set the table
Width to 98%. It turns out that Yahoo! Mail needs that 1% cushion on either side
In order to display the email properly. If side gutters are critical to your
Email's design, set the width to 95% or even 90% to avoid potential problems.
Course, the tables inside the container table shocould be set to 100%.

Put
General font style information in the table TD, closest to the content. Yes,
This can result in repetitive style declarations within multiple TD cells. Put
Font style definitions into heading (e.g. H1, H2), P, or a tags only when
Necessary.

Use divs sparingly to float small boxes of content and links
To the right or left inside a table's TD cell. Google Mail, for one, seems
Ignore the CSS float Declaration (yet Yahoo! And Hotmail starts with it
Just fine). Sometimes it's better to code a more complex table layout than
Rely on the float declaration. Or, since it's all too easy to clutter up
Email, ask your designer to put the floated content in the narrow side column
Instead. flaky support for floats is one issue that may cause an email design
Be reworked.

While divs appear to be barely useful, spans appear to work
Almost every time, because they're inline elements. In some cases, spans can be
Used for more than just coloring or sizing text: they can be used to position
Text above or below content.

Note that some Email Delivery Services will
Unpack style definitions to make them more explicit and, therefore, more
Readable by all email software. For example, the CSS
Shorthand style = "margin: 10px 5px 10px 0;" may be expanded into the long style
Declaration shown earlier. test each email and look to see what happens to
Email code. Start with CSS shorthand because, in the worst case, it appears to work
Well with all email software.

If you 've downloaded and studied the email
Templates from campaign monitor and mailchimp, you'll see that they treat
Container table as if it were the html body tag. The campaign monitor team refer
To this table as the "bodyimposter," which is a great way to think about
Frame or wrapper table. From a CSS
Perspective, the container table does what the html body element wocould do if
Services like Google Mail didn't disable or ignore the body tag.

Step 3:
Adopt best practices
Knowing that you 've created valid HTML email using
Guidelines I 've suggested is only part of the solution -- there are several best
Practices that you shoshould follow to ensure that your email is well
Already ed.

The next step is to test your HTML email in a variety of email
Clients. Often this will identify problems that require workarounds.

The
First test tools to use are the Firefox and Internet Explorer Web browsers. If
The email displays well or perfectly in both browsers, there's a good chance
That testing the email in outlook, Yahoo !, Google Mail, and other services will
Reveal only minor problems. I 'd also recommend testing your email in Internet
Explorer 6 -- This shoshould give you a good indication of how your email will
Render in Outlook 2003 (refer to the list of resources at the end of this
Article for information on running Internet Explorer 6 ).

Once the email
Appears fine in those two Web browsers, use an email delivery service to send
The email to a range of test email accounts. Ideally, this shoshould include
Accounts with the Yahoo !, Hotmail, and Google mail services.
The test
Accounts you use shocould, of course, be determined by the domain names in
Mailing list of people who will receive the email. For example, if there are no
AOL subscribers on this list, it's probably a waste of time and money to set up,
And test with, an AOL email account.

Here are the most common code tweaks
That I 've found necessary during this test phase:

Sometimes, a switch
From percentage widths to fixed widths is needed. While this is not ideal --
Because readers can and do resize their email windows while reading --
Sometimes, using a fixed width is the only way to have a layout to display
Properly in multiple email clients.
If there's a spacing issue with
Columns in the email design, first tweak the cellpadding and cellspacing
Attributes of the HTML tables. If that doesn't work, apply CSS
Margin and padding attributes. html spacing works better with older email
Software.
Image Displacement can occur when a TD cell is closed right below
An IMG tag. This is an internal ent HTML problem. Putting the </TD> tag right
After (on the same line as) the IMG Tag eliminates the annoying and mystifying
1-pixel gap.

In addition, the following best practices are
Recommended:

Avoid using JavaScript. Most email software will disable
It anyway.
If an image is sliced up and spread into SS several HTML table
Cells, test the email using test accounts. Sometimes, it might look great
In outlook but be shifted by one or more pixels in Hotmail and other services.
Also consider making the image a background image on a new HTML table that
Encases all of the table rows and columns that wocould display parts of your
Background image; this often achieves the same effect as slicing an image up,
But uses less code and can provide better results (see below). Note that Outlook
2007 does not display background images; Be sure to test your email code
Your target email software.
For background images, use the table's
Background attribute instead of using CSS.
This works more consistently implements SS email software than other potential
Solutions.
Store the email images on a Web server -- preferably in a folder
That's separate from your Web site's images (for example, in a folder called
/Images/email), and don't delete them. Some people open emails weeks or months
Later, the same way people use bookmarks to return to web sites.
Be sure all
Your images use the ALT, height, and width attributes. setting values for these
Attributes improves results in Google Mail, as well as maintaining your layout
When a reader has their images turned off. Note, however, that Outlook 2007 does
Not recognize the alt attribute.
Use the target = "_ blank" attribute for
Tags, so that people who read with webmail services don't have the requested
Page appear within their webmail interface.
While a 1x1-pixel image can be
Used to force spacing to create a precise email layout, spammers often use
1x1-pixel images to determine if their email has been opened. As such, using
This practice will increase the likelihood that your email is classified
Spam.
Similarly, avoid using a large image "above the fold" in the email.
This is another classic spammer practice and may cause your email to be
Interpreted as spam.

It's important to make sure your HTML email
Displays acceptably with images turned off. Thunderbird, outlook and other
Email applications set the display of images to "off" by default. For example,
If you use a background image to provide a background color with white font
Color over it, make sure the Default background color for that part of the html
Table is dark, not white.

When I'm testing how an email displays
Images off, I usually use my text editor to replace each image's src attribute
With a unique combination of characters such as "xsrcx", and then revert it back
Again after the test.

As part of testing an email, also include a test
For potential "spamminess". spamcheck is a useful service that highlights issues
That might cause an email to trigger spam filters. While it comes bundled as
Tool called site build it, that is available for purchase, the online version
Spamcheck is a free service, and no purchase is necessary to make use
It.

Once the HTML email has been tweaked so that it displays well in your
Test email accounts, the next step is to go through a checklist. For example,
Verify the following:

Does the FROM address display properly (as
Name, not a bare Email Address )?
Is the subject line correct?
Is
Contact information correct and visually obvious?
Does the top of the email
Display the text, "you have Ed this email because... unsubscribe instructions
Are at the bottom of this email ."?
Does your email contain text asking
Readers to add your FROM address to their email address book?
Does the top
Of your email include a link to the web version of the message?

If it's
Important for you to know absolutely everything that cocould go wrong with the way
Your HTML email is rendered, try a service like browsercam.com. For a small
Hourly failed, you can post the email as a web page on a server, then point
Browsercam at the page. browsercam will take snapshots that show how the email
Appears on a wide range of browsers and operating systems. While the snapshots
Don't show how email software will display an email, please email clients use web
Browser components to display HTML email, so browsercam is a good way
Increase the chances that you will spot any rendering issues.