homepage Welcome to WebmasterWorld Guest from 54.211.180.175
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

This 46 message thread spans 2 pages: 46 ( [1] 2 > >     
The Challenges of HTML Email
Proper coding for HTML Email Newsletter
Fess




msg:608562
 8:51 pm on Oct 3, 2005 (gmt 0)

Hello,

I'm interested in designing a email newsletter for a rc community (radio controlled planes, boats, cars etc).

Do I just make the newsletter in dreamweaver or FrontPage, upload it to the server and use Outlook to Message>New Using>Webpage?

Or is there another technique for this task?

Any input is appreciated
Regards
Fess

 

tedster




msg:608563
 9:29 pm on Oct 3, 2005 (gmt 0)

Prepare for a learning curve -- HTML email is much more challenging than designing cross-browser web pages because there's a large number of mail clients and their backwardness and peculiarities are legion.

Here's a thread from August that touches on a few issues.
[webmasterworld.com...]

Fess




msg:608564
 2:34 pm on Oct 4, 2005 (gmt 0)

Thanks for the info...

Regards
Fess

Fess




msg:608565
 8:55 pm on Oct 6, 2005 (gmt 0)

Hey,

Is Outlook to Message>New Using>Webpage the proper way to send the newsletter?

thank

Don_Hoagie




msg:608566
 2:10 am on Oct 7, 2005 (gmt 0)

Well you could also send it while looking at the page in your browser (in IE you would go to File-->Send Page as Email). A very popular way to send HTML emails is to use a third party email campaign tool (gives you stats too... fun!); in this case you may upload the code itself to the campaign's site, or reference a link. This might be good for you if you want to see how many people open the email, read it more than once, etc., and it streamlines the whole process. Even better, a lot of these third parties will let you send mass emails for free as long as it's less than 5 recipients... worth looking into. Google "mass email", "email blast", "email campaign" etc.

But as tedster said, there's a LOT to consider in html email. I do it on a daily basis for the customer base for my company, which is assumed to be "too leery of URLs in emails, too uninterested to take direction from an email, but too hard to impress to send a simple text email".

But if I had a known base of interested people- people who actually anticipate an email, like a newsletter, and trusted me as a purveyor of quality emails, then believe you me, there's nothing I'd rather do then simply send an email saying "go to this webpage... that's where your newsletter is". I would NOT send the newsletter in the email. It's simply too limiting right now.

That said, if you want to get the most out of using HTML/CSS in an email, I've done a lot of experimenting and have come up with some pretty solid rules... if you're interested in hearing them, just post a reply asking me to divulge the info, and i'll begin the lengthy tutorial.

If you don't reply, no hard feelings... i'll just eat this here frozen pizza.

Mr Bo Jangles




msg:608567
 4:23 am on Oct 7, 2005 (gmt 0)

One vote here Don to pls begin tutorial!

thanks in advance

Don_Hoagie




msg:608568
 1:56 pm on Oct 7, 2005 (gmt 0)

Very well… and if anyone, i.e. Tedster, wants to add or subtract from my comments here, you’re more than welcome…

So here’s your dilemma: you want to send a spiffy HTML/CSS laden email to a base of “customers”, but you’ve heard around town that different email applications treat HTML in their own quirky ways.

Unfortunately, you heard correct. The main issue here lies in the web-based email apps: Yahoo Mail, AOL/AIM Mail, Hotmail, Gmail, etc. Desktop email apps such as Microsoft Outlook and Mac Mail are much more forgiving (in fact I believe that Mac Mail by default will even show embedded macromedia flash), so we needn’t worry so much about those fellas. Get your email right in the web-based apps, and you’ll be good.

Two asides here: First, there are several avenues you can take as far as the physical act of sending the email… that has been discussed in previous posts on this thread and will not be brought up in this post. Second, Hotmail is, without a doubt, the biggest thorn in HTML email’s side… if you can somehow figure out that none of your customers are using Hotmail accounts, your life will be a helluva lot easier. Ok, on to the tutorial.

Web-based email apps (let’s call them web-apps here) fuss with your HTML email for two reasons: 1) HTML emails are notorious for also being spam, and of course they want to minimize any of that getting through; and 2) Since the web-app uses HTML, and YOU are using HTML, you have two sets of code fighting for some of the same elements, such as DOCTYPE, <head>, <body>, and CSS link styles. Bottom line: there ain’t enough room in that town for the both of you, and you’ll find that the web-apps start to muscle in on your code, changing it wherever they see fit. It feels a tad violating I must say.

CSS SUPPORT: General support is pretty cut-and-dry as it stands today… don’t use external stylesheets. Hotmail and Gmail strip <head> content, and even the web-apps that don’t are leery of all files called from another location. Embedded styles will also fall victim to the web-apps that strip <head> tags, but the nicer web-apps will let you have your precious styles, so long as they can rename all the elements to their liking. Avoid embedded styles whenever possible, unless you are darn sure that none of your customers are Hotmail or Gmail users. Inline is the way to go in all cases if you can afford to do it. Yes, it creates a whole lot of code. Tough.

DOCTYPE: Don’t use a DOCTYPE. Web-apps do one of two things to DOCTYPES; they strip it entirely, along with any other <head> content, or they supply their own (most use HTML 4.0 Transitional; Gmail opts for 4.01). For those of us who are big into CSS, and use XHTML, we need to remember that the DOCTYPE will likely read HTML 4, and so we ought to do away with our < /> tags and the like, to be on the safe side.

<HEAD> TAGS: Most or all of the information in head tags will be stripped or renamed. I would not put anything in your head tags that you’re not willing to see destroyed. That said, Yahoo and AOL will let embedded CSS come through in the <head>… they just rename the elements so they don’t interfere with the web-app shell (for instance, div a:link {text-decoration: none;} in your <head> will become #message DIV A:link {TEXT-DECORATION: none} when rendered in Yahoo). Hotmail and Gmail are not nearly as friendly.

<BODY> TAGS: Don’t style the body tag, as it often gets removed along with the <head> content. Yahoo renames your <body> tag as <xbody>(it does the same for meta tags), but strangely enough it does let the styles through. Still, don’t do it. If you want to style the entire email area, I suggest using a DIV to serve as the wrapper, and styling that instead.

CSS-P: I have not ventured to create too complex a layout in emails (floats and clears, fluid layouts, etc), but I can say that basic CSS-P looks pretty good in these web-apps. My suggestion is to use relative positioning, or use absolute positioning inside that wrapper div you created, which should be relatively positioned. Margin-auto works to center the DIVs, things go where they should for the most part… I’m happy. If anyone has used complex CSS-P successfully in an email, like creating rollover navigation <ul>'s that float to the right of a text div, I’d like to hear your findings.

CSS CLASSES: I heard this one from a friend, and have no personal experience with it, but I thought it was worth sharing. Apparently the (.) that denotes a CSS class gets stripped in Hotmail, so don’t use classes. Simply create selectors for any elements you have. This is more of a problem for the people venturing to use embedded CSS.

LINK STYLES: Like previous items, Hotmail and Gmail will give you trouble if you try to include link styles in the <head>. Other apps like Yahoo and AOL will rename your link styles so they don’t interfere with the web-app shell’s own link styles, and for the most part that seems to work ok. To be safe, I would create link styles that have their own flavor, but are not totally incompatible with the standard blue underline look… if you style white-colored links, and it turns out that your background-color styling doesn’t work… well, you’re screwed. On another note, I have heard that some apps will only accept link styles when they are placed in their “true” order, so it doesn’t hurt to apply them that way: link, visited, hover, active.

IMAGES: As a general rule, I would not include anything of informational value in an image. This goes beyond the web-apps’ HTML butchering, because users can set their own mailboxes to not allow images. When you do include images, note that Hotmail just plain sucks at showing images. It doesn’t show images located in the CSS (i.e., background-image: url(example.gif);), and even if you put your image in the HTML, Hotmail will render it as an attachment, and only show it after the user has clicked on and accepted the attachment. The other thing Hotmail does is re-route the URL of your image, apparently to some temporary image server or something that they use. Your www.example.com/example.gif image can instead be found at h**p://by108fd.bay108.hotmail.msn.com/cgi-bin/getmsg?&amp;msg=5EE39CCF-D… it goes on like that for about 250 characters. Other web-apps are pretty good about showing images, with one obvious caveat: since they’re effectively “localizing” your HTML, making it a part of their overall web-app shell, you shouldn’t use relative linking to your images… /example.gif would certainly not reference your website, but rather the web-apps’. So use absolute linking to images.

Hmm, that’s all I can think of for now. I should note that I got these results by creating a mail account for myself from all of the main web-based email providers, and then leaving the default settings on each app as they came. This is what most us assume happens when the general populous of soccer moms gets a mail account. As I stated before, these web-apps give users ultimate control- to not allow images, links, or even emails themselves that come from senders they don’t know or trust… you can NEVER be sure that your email is getting to every single customer; if your boss is looking for 100% penetration on the next HTML email, you ought to wake him/her up before even bothering with development. Hope you enjoyed, and again, all comments and corrections welcomed.

tedster




msg:608569
 3:27 pm on Oct 7, 2005 (gmt 0)

Wow, Don -- thank you. That post is a keeper (at least for a few years).

One additional factor I consider is that many email addresses on a list may be at work -- and therefore behind a company firewall, with strong security steps in place, and possibly on a mail client that you cannot test easily. For example, on of my clients uses a private collaboration platform -- FirstClass (now Centrinity) -- and what happens to html email there would make many html authors weep.

All of this points evend more to the KISS principle. One of the points I made in my last PubCon presentation was this -- things often break because someone is showing off. "Look how beautiful my graphics are! See how clever my script is! Look Ma, no tables!" and so on.

So in email, don't go for anything bleeding edge or complex in any way. Stay focused on (dare I say it again?) content -- a compelling verbal communication.

herb




msg:608570
 4:09 pm on Oct 7, 2005 (gmt 0)

Don, great post, but. Most coporate office are rejecting images and bouncing the mail or just deleating it at the server level. XP installs Outlook Express with graphics turned off as the default in most instances.

Build it in PDF and attach it to the mail, or just provide a link to the file on your web site.

On a personal note, my delete button is the first thing I reach for when I get any graphic email, but hey that's just me.

Bernard Marx




msg:608571
 4:22 pm on Oct 7, 2005 (gmt 0)

I have a friend who (against my repeated protestations) insisted on sending his mailshot from Outlook using white text on a coloured background. If you read Don's post carefully, you'll see why the result was so ridiculous. I think many web-based clients have that covered now.

Another thing to take into account is the "points system" (less=better) that many mail providers use to distinguish spam from mail. It's just as bizarre as SEO.

The well knowns are things like common marketing speak or exclamation marks in the title, or content. Some sources suggest that you get points for colour use - varying depending on colour, and extra points for not using the websafe 216 as the palette (this sounds very odd). I've also heard reference made to optimum file size too.

Using the word "unsubscribe" on a link is also a no-no.

A Question

Clients like Outlook, when sending in HTML mode, will send a mixed mime-type email that also includes a plain text version of the message for receiving clients that can't¦won't receive HTML email.

Are there any mail clients available that allow you to edit the plain-text part separately so that you can format it according to your own desires?

Mr Bo Jangles




msg:608572
 4:37 pm on Oct 7, 2005 (gmt 0)

Many thanks Don - very informative.
It agrees with cautions I've previously seen, safer to stick to tables and avoid CSS external.
I also like to see what the 'big boys' do when they send out an html e-mail - try and learn from them (I generally assume that they will have good advisors, but that's probably a risk in itself!)

Cheers,

Fess




msg:608573
 5:39 pm on Oct 7, 2005 (gmt 0)

Don_Hoagie,

You are a gentlemen & scholar.

I appreciate your time/attention to detail regarding this topic.

Also happy to see others expressing their interest in this subject as it is terse to say the least.

Regards
Fess

Don_Hoagie




msg:608574
 5:54 pm on Oct 7, 2005 (gmt 0)

To those who agreed, and to those who disagreed: you're right.

The corporate scene is definitely touchy at best, and it is where a lot of email gets sent(I certainly give out my work e-address more freely than my personal one). I would lump that in with my last paragraph, which basically says that this tutorial will not tell you how to "beat" spam filters and firewalls... just how to optimize your email for those that will accept it. It's a rough place out there in the email world- that is for certain.

Mr.Bo Jangles- Love the name. Actually, HTML in emails is not exactly a sure shot either... for one thing, I've found that you usually have to create an empty <table> to wrap around any content, much like the wrapping CSS div. It's definitely a little easier to get by with HTML than CSS, but they're both a hassle.

And again, since some of you may not have read my previous posts in this thread- I really don't suggest sending HTML/CSS emails. I don't have much choice as per my employer, which is why I've had to research the subject. But if you can afford to, definitely send as plain-text an email as possible, or send a URL to the HTML page you want the recipient to view (though URLs also get blocked by many a corporate spam filter. GOSH!).

Thanks for the replies folks

surfin2u




msg:608575
 6:06 pm on Oct 7, 2005 (gmt 0)

I suggest skipping html email unless you have a really compelling reason to use it. The number of people, who will not receive the email because of the formatting as html, has got to be a real drawback.

Think about sticking with plain text if the newsletter is something that you do for a hobby, as opposed to financial gain. If you want the recipients of the email to look at nice graphics then use attractive wording to get them to click on a link to a page on your website that displays the nice graphics.

Even a simple solution like plain text email has issues. AOL people will not see that link in your plain text email as clickable and may wonder why nothing happens when they click on it. They ask, "how do I get to that page on your site? I click and nothing happens."

If you send an HTML email to an AOL person, their spam catcher may block it. I've yet to find a nice way to deal with AOL. I tell my AOL newsletter subscribers, who complain about problems, to open up a free email account somewhere else and give me that email address to use for my newsletter to them.

Reflect




msg:608576
 6:34 pm on Oct 7, 2005 (gmt 0)

On the SPAM solution I have setup for our orginzation the three MAIN pitfalls are:

-Invalid headers
-Sender is not verfiable at the domain level (Unqualified domain)
-Graphic tags (<img=)

On the last point that is what gets most newsletters quarantiend here.

I did implement a nice feature though I set HTML filters not to delete, just quarantine. This helps our end users make their own decesions. This however is a duble edged sword as sometimes end uses make silly decesions.

Out of the box our solution came with over 14,000 "rules" that we had to balance.

Take care,

Brian

ronin




msg:608577
 7:42 pm on Oct 7, 2005 (gmt 0)

That's an excellent post, Don, thanks very much indeed.

I don't yet send out any newsletters - though I'll be looking to in 2006 - and any potential problems with rendering in different email clients (especially webmail clients!) never even occurred to me.

Here's a possibility which strikes me as a workaround.

1) Have a url on your site:

http://www.example.com/newsletter/newissue.html

2) Send out an email reminder every week, always with the same link just so that people can click on it and read this week's newsletter. You could include a tiny amount of text bait just before the link to get people to click.

3) Set up an associated RSS feed:

http://www.example.com/newsletter/newissue.xml

This way:

1) You'll get email subscribers to click on the link and read the newsletter

2) RSS subscribers will see the feed updated and also click through

3) Casual passers-by who don't want to necessarily commit straightaway to an email reminder, can always simply type in the url and just see what the latest issue is about.

4) Your newsletter is, in fact, just a regularly updated webpage, so search engines will love spidering it and all you have to worry about is normal standards compliancy and cross-browser rendering.

5) Your "newsletter" web page can, itself, promote the text-based reminder email to those who initially discover the page through a search engine. (Presumably those who discover it through RSS will not need any sort of email reminder).

[edited by: encyclo at 12:45 am (utc) on Oct. 8, 2005]
[edit reason] switched URLs to example.com [/edit]

Fess




msg:608578
 9:56 pm on Oct 7, 2005 (gmt 0)

1 think I noticed is....

In outlook express, a new newsletter I recieve always only shows 'text' & the image are broken.

I have to click on the top "Frame" which says "Some pictures have been blocked to help prevent the sender from indentifying your computer. Click here to download pictures"

If I send my newsletter to myself via outlook. I got no such warning.

What's going on?

Fess

encyclo




msg:608579
 12:51 am on Oct 8, 2005 (gmt 0)

Fess, in many modern email programs, including later editions of Outlook and Outlook Express as well as alternative email clients such as Thunderbird and also some webmail services, all disable third-party images (ie. those called from a remote server) within messages by default. This is because remote images can be used to confirm email addresses as they act as a "beacon" if used with a unique ID for each message.

As this is becoming the norm, it has become another of the many challenges with HTML emails - ensuring that nothing important is contained within a graphic, and that the email still looks good and works well without images.

lajkonik86




msg:608580
 12:32 pm on Oct 8, 2005 (gmt 0)

wouldn't it be nice to have a mass-emailing program. Which uses wysiwyg editor to create the code for each comonly used email program out there.
In a sence automatically changing the email to display well for hotmail, yahoo, gmail and all larger email services. Maybe with some statistics on how well your current look will still display on the adress list you selected.

Not fond of wysiwyg editors, but an automatic coding process could be very nice when you are trying to style for many different email services. Don't try to create one version which works in all just create a different one for each.

amznVibe




msg:608581
 3:56 pm on Oct 8, 2005 (gmt 0)

I personally, and for all my clients, block all html email. 99% of spam is html. Put the information on your website and send a link to your website. Forget trying to put it all in an email - a short text email with one URL will get through AOL filters but your HTML newsletter never will.

mrMister




msg:608582
 5:19 pm on Oct 8, 2005 (gmt 0)

If you want to get your message across, send a Latin-1 (assuming an English speaking audience) encoded text email.

Anything else is usually ignored, filtered out, mistaken for spam.

If you don't want your message to get across then don't bother sending it.

Fess




msg:608583
 8:17 pm on Oct 8, 2005 (gmt 0)

encyclo,

Thanks for the info

I'm getting quite fustrated with this Email Newsletter encoding.

I asked about 3rd party programs and my hosting guys recommended 1. Can anyone recommend any or is that now allowed in this forum?

Fess

dataguy




msg:608584
 11:58 pm on Oct 8, 2005 (gmt 0)

Great information Don_H!

My company has been sending out about 250,000 emails a month to members and subscribers for the past 2 years. Our stance on mass-email design has been the same as our stance on web site SEO: Design for the best end-user experience, not for flashy-splashy looks, and not centered around anti-spam tactics. Email is what it is, and first and formost has to be deemed worth reading by the end-user.

I should mention that our response rates have always been much higher when the email is in HTML format. We only use plain text when returning requested information, such as password resets or confirmation emails.

One thing I would add is that since many email clients may try to strip the HTML in order to show an email in plain text, your email will be more successful if you send as a multi-part email with the plain text version specified as well as the HTML version. This way you will have better control over what the end-user sees as there are many, many people who have their email clients set to show only plain text email if the email looks at all like SPAM.

In some of our email we have a link added to the plain text version which allows the reader to click to see the HTML version of the email on a web page. This also helps in tracking open rates, as there is no way to track opens if there is no images shown.

surfin2u




msg:608585
 1:04 am on Oct 9, 2005 (gmt 0)

dataguy, you wrote:

In some of our email we have a link added to the plain text version which allows the reader to click to see the HTML version of the email on a web page.

What percentage of your people click on that link?

dataguy




msg:608586
 1:40 am on Oct 9, 2005 (gmt 0)

What percentage of your people click on that link?

Since we can't track how many people read the email in plain text, we can't really get a percentage of people who see it and click through. What we do track, though, is the percentage of confirmed opens that are confirmed through clicking on that link, and it runs about 20%.

The other 80% is either confirmed through the display of a tracking image (about 68%) or by the reader clicking directly through a link to an offer in the email (12%).

Mr Bo Jangles




msg:608587
 2:16 am on Oct 9, 2005 (gmt 0)

I actually disagree with some of what is being stated here.
Firstly, I do in fact look at most HTML e-mails I get - and in the overall quantity of e-mail received, the number is very low.
I look at them for a couple of reasons:
a) I'm interested in the design of HTML e-mails as a genre, and;
b) by far the greatest percentage of HTML e-mails I get, were actually, one way or another, solicited by me - for example, ticking the box to be kept informed of further product updates, or news from my Hosting companies, or Domain providers etc.

The vast majority of spam I get is not HTML e-mails.
THe vast majority of HTML e-mails I get aren't unsolicited spam.

I would definitely not be often likely to 'click a link' in a plain ol' e-mail to take me to a web page - as some are suggesting as a replacement for a HTML e-mail, I think this is a poor substitute, but added as one more feature to an HTML e-mail i.e. come view this Newsletter >>here is a good feature.

I also think that generally, the problem with HTML e-mails is that the medium and e-mail readers and clients can't adequately support the 'message' - the item itself is surely desirable! I'd rather look at EVERY e-mail as a work of art, just like I like to view each web site in that way.

wsp9




msg:608588
 8:39 am on Oct 9, 2005 (gmt 0)

Why don't you Just Do It?

rogerd




msg:608589
 3:56 pm on Oct 9, 2005 (gmt 0)

>>I personally, and for all my clients, block all html email

If I did that, I'd miss quite a few emails from clients and other business contacts who happen to like to send formatted emails, or, in some cases, send them without really knowing or caring what format they are in.

As bandwidth and storage costs decline, more email will be sent in this format. You wouldn't create a business proposal in Notepad if you had Word, why would you send a text email (except for quick notes) if you could send a formatted one?

Mr Bo Jangles




msg:608590
 8:16 pm on Oct 9, 2005 (gmt 0)

agree 100% with Rogered.
Amazon don't want to send you a scrappy old plain text message in response to your ordering a book; my big-time hosting company wants to impress me and also try and sell me something new to upgrade to everytime they contact me; etc. etc. - and when I contact my clients, and prospective clients, I want my image to look the very best.

I think its a nonsense when companies IT depts target all HTML e-mails as spam material (and largely unnecessary) - and definitely will cause some grief with lost messages that were important to the intended recipient.

jetnovo




msg:608591
 12:54 am on Oct 10, 2005 (gmt 0)

Apologies if someone has already mentioned this (I don't have an opportunity right now to read all responses), but it's important to check an HTML email in web-based clients such as Hotmail, Yahoo! Mail and Gmail. This is because webmail clients tend to delete the <HEAD> section of HTML emails - and often this also therefore deletes any CSS styles.
Ergo it's important to include online inline CSS.
Good luck!

This 46 message thread spans 2 pages: 46 ( [1] 2 > >
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved