AOL Formatting Tips for HTML Email

America Online™ is a source of frustration to a great number of Developers and Web Marketers around the world. When you consider AOL you have to remember that you are not just dealing with a custom web browser, but you are also dealing with the manner in which AOL runs their Network.

AOL’s browser is basically just a custom “skin” or “branded” version of Internet Explorer. It is the AOL proxy server that makes the web browser behave differently than through a normal dial-up or LAN connection. Two primary reasons for these differences involve how AOL processes graphics and handles caching.

One of These Things is not Like the “Others”

Another common complaint is that images can often look blurry on AOL’s Browser and in many cases have black bars, distortion, or lines running through your graphics.

America Online utilizes a compression software on any graphics which run on their network in order to speed up the delivery of web pages & HTML to it’s members. It accomplished this by compressing images and various multimedia applications which run across it’s network. AOL uses the proprietary Johnson-Grace image format .ART. All images that are BMP, GIF or JPG are automatically converted into the ART format by default. An AOL member must deselct the “Use Compressed Graphics” option under their Web Preferences in order to avoid this.

Cache Me if you Can!

One you’ve selected not to use AOL’s compressed graphics option, then you still must clear out your cahe in order to see any sort of difference. In your WWW preferences you can set your history to “0″ pages and then clear the History. After you do this, then you must also delete the files in your Temporary Internet Files folder. AOL offers the follwing instruction on how to accomplish this:

“By holding down the “Control” key on your keyboard and simultaneously mouse-clicking on the Browser Reload icon while the browser window is active will also clear your proxy cache and display the latest data from the website.”

Some Background Information!

Often, backgrounds used in designing both HTML Email & Webpages will display as “tiled” when viewed in the AOL environment. This is due to the compression algorithim which is used by the the Johnson-Grace compression software. A JPG which is wider than 640 pixels will be scaled down by AOL. You may use a GIF as a replacement for large background JPG’s, or try to save your JPG as “Progressive 3-pass” which the current version of the Johnson-Grace software does not recognize.
AOL Has It’s Own Format

Character formatting is only mildly supported by AOL. In order to format your email for AOL and get an idea of how your email will look to AOL recipients, you should start by eliminating all of the hard returns at the end of each line.

Justify my Paragraph
All paragraphs are left justified and have no indentation. There should be 2 spaces between each sentence as it provides white space. Every place you want to indicate a hard return, place
at the beginning of the next line. For paragraphs, use

, notat the beginning of the line. There should be no space between the
and the first character of the line.
Tabs
Do not use

, the tab key, , or other tab formatting methods. You will not like what you see, or what your recipient will see for that matter. It is far better to just use spaces whenever you wish to create an indentation or tab.
Character Emphasis
You may use your normal character emphasis tags as you think are neccessary for your mailing & message.(, , etc..)
Bulleted, Ordered and Unordered Lists
Unfortuanately, you cannot create lists using the traditional

or
, Unordered & Unordered List tags. The common workaround seems to be to simply put your number, followed by several spaces.

1) Whatever

2) Whenever

For bulleted lists, you merely need to replace the above numbers with an asterisk or other ASCII character.

* So on..

‘ And so forth..

“Don’t Quote me on this…”

Quotes and Apostrophes do not translate well into AOL Email. When entering these types of characters into AOL Email, be sure to usee ASCII Low characters. Furthermore, if you are using a program like Microsoft Word or other Office product to prepare your text/HTML before entering it into your mailing, you should be aware of Office’s Autoformatting feature.

If you cut and paste from Microsoft Word, there is always a chance that some formatting will not carry over into HTML very well. This is most often seen in the case of Auto formatting, when MS Word converts common keystrokes into symbols. -, “”, © and a host of others. These are called Windows Characters, and are not interpreted by your browser.

Word represents these ASCI characters as numeric values which a browser cannot understand.

This is why it is best to always work in text mode, or save your document as a dos text document and lose all formatting before transferring it to your HTML email.

Strange characters may inadvertenly wind up being inserted into your Email if you do not use a text-only editor such as Notepad or TextPad.

For more information see: HTML Email: An Introduction
Isn’t That Special

You will need to treat all special characters, those which are generated through an escpae sequence (™ ) as plain text. There is not currently a known workaround for getting special characters into your AOL Emails effectively.

Additional Resources

For more information on AOL issues visit: http://webmaster.info.aol.com/

Add comment November 8th, 2006

HTML Email & using Javascript in your Messages

Since Javascript’s are mainly a unique and proprietary element, and by this we mean that you can write 100 different scripts which all do basically the same thing but in a different manner, complex JavaScripts will always have trouble in your HTML email.

Due to the wide variety of email clients, browsers, security settings, updates, and service packs installed, it is difficult to predict how a script will execute against any given email client. Javascripts can cause browsers & Outlook 2000 to disable and active scripting contained in an email document (there has been an increase in email security due to malicious scripts).

For more information on Microsoft Outlook & Office Security visit:

Outlook E-mail Security Update Information
http://support.microsoft.com/support/kb/articles/q262/7/01.asp

How Outlook Renders HTML
http://support.microsoft.com/support/kb/articles/q249/9/72.asp

You would be wise to test any Javascript you wish to include in a mailing. Not all email clients can handle the scripts, and most web-based systems disable scripts as a general rule to prevent malicious code from being executed on a system.

Javascript Navigation forms such as jumpmenu forms can easily be use, but even these will only work in non web-based email clients. Most other navigation forms are not supported because they do not work on the majority of web-based email clients.

Most Forms, which use the GET/POST method, will render and test correctly in web-based email clients.. You can often use this to get around many Javascript problems in HTML email.

This one comes up often - so the sooner you understand that scripts are bad in email - the better. 

Remember! Most web-based email browsers are a

Add comment November 8th, 2006

How to send HTML Email with Entourage (Mac)

In preferences, you need to have “Display complex HTML in messages” and “Allow
network access when displaying complex HTML” checked. Also uncheck and rechecked
to see if that makes a difference.

Entourage Product Support information:
http://kbase.info.apple.com/cgi-bin/WebObjects/kbase.woa/wa/query?searchMode=Assisted&type=id&val=KC.113039

You may need to download the “send complex html” applescript from http://www.applescriptcentral.com

should let you use absolute/full pathnames for the files. Be
sure it is the *server* pathname and not your local machine.

Using a base href tag will help as well.

MAC OS X Mail - FAQ
http://kbase.info.apple.com/cgi-bin/WebObjects/kbase.woa/wa/query?searchMode=Assisted&type=id&val=KC.61154

To send HTML email messages using, you need an additional header in
your outgoing mail. To set an additional header, go into Entourage,
pull down from “Tools” to “Accounts”, double-click on your account,
then click on “Options”. From there, type in the following values:

Header: content-type
Value: text/html

The best thing to do is create a separate account for sending HTML
mail only, because Entourage will try to encode ALL of your outgoing
messages as HTML from that point forward, so anything that doesn’t
have HTML code will be all squished together and become unreadable.

Now remember, your message should be written as HTML code, so the
message would start off as:

and end with

Everything else within the HTML tags would be standard HTML code, and
be sure to make ALL of your links ABSOLUTE LINKS (include the full
URL).

http://www.holymac.com/news/office2001entouragef23.shtml

Mac Client List
http://www.emailman.com/mac/clients.html

Add comment November 8th, 2006

Flash Email – Update for 2007

Flash Email: Dateline: 2 years ago: Everybody wanted to do it, no one seemed able to pull it off correctly.

Flash Email: Dateline: Now – See above.

It’s time for everybody’s favorite Flash Email update once again! It’s been a few years since we took a long, hard look at Flash Email, the promises of those pushing Rich Media technologies and those pesky little things like “Email Clients” or “Firewalls” that seem to get in the way.

The short of it.

Flash email is still very much an Enterprise-class solution at this point. There are a lot of marketers who say they can design it. There are many who say they can send it. But very few can guarantee that any large group can view or interact with it. Seriously, this author tested almost every demo, sample, preview or other “test” he could find and could not find a single instance where their Flash content showed up 100% correctly in my normal, everyday use, email client(s) (Outlook 2000 - 2007 and several web-based email clients as well).

Nada. Zero. Zilch. Nothing. I received garbled content or “alternate” content such as links, static images or .gifs.

So, as you can plainly see… most of the providers who claim to be able to specialize in Flash Email, are really just specializing in delivering alternate content. Anyone can set up a “best case” scenario as a demo.

Know you Recipient.

Now, I am not saying that these providers are not returning value for their customers. However, for the average developer, designer or businessperson who wants to utilize Flash Email in some capacity, it really is not all that simple. It’s just that some of these businesses are touting their Flash Email solution as foolproof and throwing around the phrase “99% of all recipients have Flash” as meaning that 99% can receive your Flash Email message correctly in their email client.

The following is a quick run-down of a Flash Email test we did, with an enabler that delivers alternate content (GIF Image) if the user could not display Flash. We sent it to 26 Different Email clients that we have here in our “lab”, and here are a few of the major email client results:

All email clients were set to receive HTML Email, Windows XP Professional SP2. Latest version of Flash installed.

And this is just one person’s test on the subject. There are a ridiculous amount of variables that can come between you and having the flash email work out. Some of these issues include: Security settings, restrictions in your browser, anti-virus, firewall, ISP’s firewall, email client, operating system or any number of third party software you may have installed along the way (Email forwarding, SPAM blockers, Dynamic DNS, etc.) The point is that even under very controlled circumstances, it doesn’t work out very well.

Doing it Right.

That doesn’t mean you should do a wholesale abandonment of Rich Media email, campaigns or other marketing ideas. What more and more companies seem to be doing is a bit of a hybrid approach to their Rich Media email and this is where designers and developers can help their clients by thinking more about the message rather than the medium.

Many of the best practices that we put forward in our first column, Flashing your Email (2001) – seem to have been copied and adopted extensively by Email & Flash Email marketers, kudos to you! Just go a google search on “flash email” – and see how may lists of 10 seem to crop up with the same practices. If you are designing for Flash email, consider the following:

Use an action to start the Flash Email

Preview panes, Outlook alerts or any other little email client quirks will either

1) Start playing the email immediately

2) Not only start playing it in preview mode, but play a simultaneous copy when you open the email (Becomes a wall of noise., that’s a bad marketing message)

3) Start playing, only to have the recipient notice it and then miss ½ the message to begin with.

A simple “Click here to play this message” can go a long way to preserving your messages intended delivery.

Animated Gif + Click through to Flash = Effective.

Nothing can replace the value of a well though out and effectively designed dual HTML Email & Text Campaign that combines Flash elements. Why not try an eye catching animated .gif file that has a “Call to Action” to let your recipient click through to your website? That should be the whole intention correct?

Track it. Study it. Improve it.

You should not limit yourself to just tracking the opening of the email or the click on an HTML Link. Flash MX 2004 allows for easy tracking of interactions within your flash files, or grab a copy of something like APT Launcher which aggregates data for you for larger projects. If all of your clicks are coming from the HTML, that is one thing, but some data points I would insert for tracking or more “blunt” metrics I would look for would be:

1) When did they get bored enough to stop the flash. (“Hmm… I don’t want to refinance)
2) When did they get interested enough to click through (“You had me at hello…”)
3) Did the Flash file start correctly? (Place a data point that starts when the flash successfully plays.
4) How far did the Flash file play before it stopped/quit/crashed/etc? (Put lot’s of data points)

Stop trying to close the deal in the email.

No one completes a sale within the email; no one fills out a mortgage/insurance/request for heartburn medicine or whatever the new “thing” is, so quit trying to design your emails to do so. You WANT them to click through to the website where all of your normal & “stable” actions and events “should” be. Certainly if you’re even thinking of investing in Flash or HTML Email – it is because you’ve already turned your website into a lean, mean revenue or lead generating machine.*

You do this because:

• The Flash movie will play perfectly.
• The contact and order forms are all set up.
• The data collection devices are in order.
• Nothing is left up to chance or a recipient’s email client.
• Nothing will “trash” the recipient’s computer or garble the message and associate you or your client’s brand with doing so.

[Editor’s Note: Why is it that the only thing that does seem to get through unscathed IS the logo or corporate url – like a giant “beacon of blame”. ]

It’s the offer silly.

Yes, “duh”, you know this I’m sure. Quit annoying your recipients with silly, boring, inane stuff. You can only make the word “Mortgage” stand out so much against the backdrop of everyday life.

Our most successful Flash email campaign was an animated .gif driven push to our site using a viral game as the “offer”. “It’s not in the Contract” – which was presented as follows:

1. A Dual Text/HTML Email sent from Constant Contact, so that the recipients either got the animated .gif email I described above, or a simple text email to tell them about the game.
2. We designed the game so that it was NOT intended to be played in the body of the email. You cannot control the recipient’s email client, nor should you try to.
3. Constant Contact recorded the number of opens, clickthroughs, etc all of the normal metrics you would expect from an email campaign.
4. The game was played on our website with a forward to a friend feature on the webpage located just under the game.
5. The Flash file was encoded with our Flash-tracking software to record some internal metrics, as in the number of unique plays, repeat plays, clickthroughs to website, etc.
6. The coupon code was tied into the order system to flag a discount and further track the sale.
7. The game itself contained a coupon for a 10% discount and was designed to present our message to the user as they played (Presents branding and the idea that working without a contract loses you time, money profit, etc.
8. Our normal affiliate system was in place to record cookies and server-side tracking for visits and sales.

Results:

• The game was emailed to 12,890 recipients.
• 6,879 opened the email
• 4,990 clickthrough to the game.
• The email was forwarded 512 times.
• The game was forwarded from the webpage 217 times to 534 people (multi-email fields)
• Importantly, the game was played 187,900 times.
• More importantly… the game generated 512 sales, 40 new affiliates, a number of new newsletter signups, multiple business partnerships, new clients for services and an all around general feeling of quantifiable success*****.
• Even more importantly… the game generated brand awareness and sales that we could not even track 100%. Phone sales, delayed sales, sales through our affiliates and so on.
    

  This is where you need to be if you do not have the resources to employ an Enterprise application for your Flash and Rich Media email needs. Nothing can replace a well thought out campaign, offer or creative piece of marketing. There is no reason why you cannot concentrate more on your time, money and effort on improving your message and offer, rather than taking a more “flashy” approach.

  HTML Email Design:

  An Introduction to HTML Email

  Unnece ssary Elements in HTML Email

  For more information on troubleshooting HTML Email, visit our article archive here:

  
  Additional links to Flash Email case studies, news, benchmarks or campaigns

  
  Case Study Follow-Up: Flash and E-Mail

  Fun @work: Viral Marketing for the Office

  *	Seriously, if you could hear the sarcasm dripping from my internal monologue.
  **	This is a common “skinned” web-based email client that is common with a lot of hosting packages.
  ***	This is another web-based email client you will find with web hosts.
  ****	This particular client was running “ChoiceMail” spam filtering.
  *****	It’s that warm fuzzy feeling you get when you absolutely know something you did worked out successfully, and you didn’t “guess” that it made the phone ring or sales increase.

   

   

   

1 comment November 8th, 2006

Lotus Notes & HTML Email Newsletters

Lotus Notes & HTML Email Newsletters

Lotus Notes seems to be a source of frustration for many designers, marketing “folks” and other people who generally have a “tizzy” each and every time their email or marketing message comes across looking less than perfect.

As evidenced by this email message we received recently from one reader:

Tom,

Lotus Notes [DELETED] won’t display [DELETED] properly. I’m ready to [DELETED] throw the [CENSORED, DELETED, ETC] using a hockey puck.

-Ted

We feel your pain Ted, we really do.

Lotus Notes can be a tough Email client to test your HTML Email & newsletters against. There is a general lack of information on how the Lotus Notes client renders and displays HTML for the end-user. Many designers and firms tend to skip over the whole Lotus Notes compatibility issue due to the fact that they believe that the majority of recipients using Notes is considered small.

The problem is that there can be a tremendous amount of corporate Lotus Notes users on any given mailing list. One client of ours found out after a brief survey (and all of the negative feedback from their mailings to users who received a hodgepodge of mismatched code from them) - that nearly 40% of their entire mailing list were Lotus Notes clients. This was due to the fact that their mailing list was made up of larger corporate clients who account for a signifficant portion of Notes usage.

So, whether you realize it or not, Lotus Notes may play a very significant role in your email marketing. Unlike AOL recipients, who you can easily filter and send alternate content to when you mail, Lotus Notes users look and act just like the rest of us. According to IBM, 95 million people currently use Lotus Notes. Scary.

That being said, let’s dive into some of the more common concerns we get on an almost daily basis. The following is a guide that you may find helpful in diagnosing and trouble shooting common Lotus Email Marketing issues. Due to the wide variety of settings, open source tweaks and other variables that separate the Lotus Environment from your more common Exchange & Oracle systems, you’ll need to consult some of the resource links & forums we’ve collected below for additional help. However, with the little bit we are going to arm you with, you’ll be able to fake it just fine.

Little Red Boxes around Images in Lotus Notes Email

“Dear Template Kit,

A handful of employees that receive different emails in HTML format cannot seem to be able to view the pictures or images in Lotus Notes. The text seems to retain its HTML formatting, but the images appear as a box with a red “x” in them. What is going on?”

-Judy

Usually, this is caused by the absence of an absolute url (such as http://www.templatekit.com/img/spacer.gif,) for that particular image resource. We say “usually” because at times perfectly formatted and linked up images produce this same effect for no real explanation other than Lotus Notes has converted the image to Notes Rich Text and it isn’t present in the Notes Database. Depending on your version of Lotus Notes, you may see a text representation of that image lick so: [Image]. The best thing to do in this case is look at your HTML reference to that image character-by-character. Load your code into a Text Editor such as TextPad, and turn on the “visible spaces” feature. This will allow you to see every space, carriage return () or other character representation which could be fouling the interpretation of your HTML in the Lotus Notes Environment. Even a single space or carriage return can trigger this conversion, which of course brings us to:

Other strange boxes, lines, distortions & “not supposed to be there’s” in Lotus Notes

Ok, this one is somewhat easy to fix, and when I tell you what is causing this you’ll slap your head with a huge “Ohhhh” and we’ll be done.

99% of the time you are using a GIF file that has a matte or background that is showing through as an extra border. Either you should:

1) Remove the matte or change the matte to match your background color.

2) Switch to JPEG

One of these things..looks not like the other

If you are a current user of Lotus Notes, whether R5.07 - R5.10 or even the new R6 release, you’ve no doubt heard much of the following:

“We opened an HTML Email which looked fine in Outlook, but expanded to fill the entire page in Lotus, distorting the intended design, what happened?”

We’ve documented numerous accounts where Lotus Notes has completely ignored some HTML coding during rendering, while displaying other HTML coding just fine. This is especially true when it comes to width parameters for TABLE tags, nested TABLE tags and finally, TABLE tags that are not constrained within another table.Example:

Foo on you!

Foo on you too!

One of the “Best Practices” we’ve established in consulting for clients is using one master table to constrain your entire email. Often, clients will be taking bits and pieces of code from various projects, emails, websites, catalogs, etc and placing them into their HTML Email Marketing. All of the various parameters can easily conflict with one another when rendered. By “wrapping” your HTML Email in one master table, you help reign in all of those various width=% and other “ambiguous” attributes and parameters which can wreck havoc on how your HTML Email is rendered by the viewer’s browser.

Wrapping your HTML Email message in a master table and then setting the TABLE Padding to equal at least “5″ is also a good way to thwart certain Web-based systems that only render your code after what comes after the BODY tag. What often happens is that your HTML Email message gets smashed up next to the Web-based console (Compose, Inbox, etc). By comparison, our TemplateKit.com newsletter uses cell padding of “12 - 18″. While you do not have to be as zealous as we may be in this regard, it is better to be safe than sorry.

Lotus “Punts” our Stylesheet!

HAH! The most common complaint we get around the office. Disappearing style sheets when rendered in Lotus Notes.

You send an email to a Lotus client and suddenly the text appears incredibly HUGE, or really small. Your beautifully designed masterpiece, lovingly handcrafted 14pt, Helvetica with slight shades on the sidebar tables can completely come undone. Almost exactly like we’ve displayed to the left. The nice looking table below the picture was originally supposed to be a nice looking table on the left of the picture. Since the design was dependent on having text size and attributes exactly as designed, it shifted things around pretty quickly. Our design could survive that, so it wants that big of a deal. Could yours?If you are going to be relying on style sheets to format your HTML Email, then you must be aware that Lotus just doesn’t like them. Most common style sheet applications are ignored by Lotus Notes nearly each and every time you try to use one. The same is often true for many Web-based email systems (Hotmail, AOL, Yahoo, etc) who want to avoid any style sheet conflicts between their own and yours.If you are going to send HTML Email to a Lotus recipient, and your design is fairly dependant on that style sheet to keep the continuity of your design in place, then you can count on problems. Except, if you do the following:

A normal Entry in the section of your HTML document looks like this:

Even if you link to your style sheets, you are still using the above format which is called into your document when rendered by the email client.

The above style sheet will immediately be ignored by most Lotus Notes clients, ruining your email. However, if you were to comment out each line of the one by one, then your style sheet is suddenly recognized by the Lotus Environment, like so:

Viola! It’s that easy!

Well, granted, that can take a while if you are using 25 different styles in your simple little HTML Email

Your Website may use 25 - 40 different styles and define ALL of them in the of your web page. This may be the decree, edict and final word from Marketing that these are the official styles for. All corporate communications, but you do not need to define all 25+ styles in your email if you are only going to use maybe 3-4 of them. Seriously, we once received a 5 page document detailing all the various styles a particular company used in their corporate communication, the style sheet in the was as long as the content in the HTML Email.

If you are going to use style sheets in your HTML Email then please remember two things:

1) Test your HTML Email message without your style sheet to see if it could service suddenly not having the style sheet render for you. A prime example to watch for is whether suddenly having your 10pt text suddenly expanding to the users 12 pt Arial default. In many cases you have a lot more text start wrapping and pushing all of those carefully arranged elements around your Email Message.

Click for Example #1

Click for Example #2

Click for Example #3

Example 1 & 2: Proposal Kit Newsletter as seen in Lotus Notes with & without stylesheet

As you can see, the titles have all reverted to their default state, essentially ruining the headings and the sidebar of the newsletter.

2) Code some backup HTML attributes to help the above problem in case of style sheet failure. Relying on the User’s default settings can be disastrous. Examples of good backup coding would be;

Example 2: Viola! The stylesheet is still being blocked, but now there is formatting being applied to the newsletter and the day is saved!

Named Anchors do not usually work in Lotus Notes

No. they do not. Next question?

When you click on a named anchor in a “normal” browser, such as Internet Explorer or Netscape, it will jump you to a predefined point in the document. This is often used win Table of Contents, Menus and other navigation pieces.

When Lotus Notes encounters a named anchor, such as , it tries to open a new window and display what it perceives as a new document, in this case http://www./#2 document, which, of course does not exist.Final “Notes” While the above article is by no means a definitive guide to Lotus Notes, it should help you troubleshoot some common Lotus Notes Email Marketing issues. As people finally get around to upgrading their version of the Notes client, you will start to see many of these issues simply go away. However, as most of you are more likely to be the sender rather than the receiver, you pretty much have zero control over this. Learn to live with it. Learn to love it. Pray to the upgrade gods often.

Feel free to contact us if you have a specific Lotus Notes HTML Email issue. (See below).

Additional Resources

Lotus Notes Discussion Forums - Developer Domain

NotesTips.com - Tagline: “Think Lotus Notes and Domino”

Frank Cseh’s Lotus Notes Page

SearchDomino.com - Their editors scour the Web daily and summarize articles and resources!