HTML Email - Images will not display in Gmail when sending email newsletter

Here we are, in our HTML Email Laboratory again with another Gmail-specific problem.

Symptom:

Gmail does not display images in an HTML Email.

Culprit: Border Styles. 

Example: style= “border:none;

Because Gmail and other web-based email systems tend to strip out styles - it looks like using a style reference in your IMG tag will cause Gmail not to render the entire image.

What you should just do is use border=”0″ to accomplish the same thing, namely you want to avoid that little blue border that surrounds an image when an anchor link is placed around it. Our tests rendered just fine in Hotmail, Horde, Yahoo and a few other web-based clients.

Add comment December 3rd, 2007

Email Marketing and Campaign Agreement

Specialty Project/Service Contracts : Email Marketing and Campaign Agreement
View Document Sample

Document Length: 5 Pages

Usage:

Email marketing agreement.

If you are going to perform email marketing and campaign management services for your customers, use this contract. This agreement covers creating design mockups, HTML, Flash, text emails, proofing services, and more.

View All Proposal Kit Products

Add comment September 4th, 2007

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