HTML Newsletters

Soldato
Joined
8 Oct 2005
Posts
4,184
Location
Midlands, UK
Have been given a rather snazzy newsletter design today and told to convert it into a HTML newsletter, for an email campaign. However, after a bit of googling it seems its fairly hard to get your email to display the same across the plethora of email clients in use. They advise against using CSS, inline styles and say use tables are far as possible :(

Using tables is fine, but I can invisiion getting some of the content to display correctly without using css is going to be a total pain in the ass. What do you guys advise?

I was also told to make the newsletter content rich (E.g. as much text as possible), is there any point in making a purely email based newsletter content rich? I can see the benefit for SEO, but not for a newsletter.

THanks for any comments
 
Email rendering of HTML is infamously poo. Really, it's so utterly foul. Blame MS and Outlook/Word for that.

So yeah, just pummel the page through FrontPage. Text rich is always good. No point sending a newsletter if there is nothing to read.
 
does anyone actually like getting HTML newsletters?

I think they're a pain in the backside and most people don't get to see them as the default settings in a mail client are likely to hide the pictures and make it look like crap anyway.
 
Well the design does have a bit of text but its mainly images and there to look good. I'm still not understanding why my boss wants the mail to be 'content rich'. I'm also going to have a link at the tiop iof the email, that goes to a a proper html coded version on the web.
 
"Content Rich" will be a way of saying that lead-in articles should have a good portion of the article itself included, so a person would know what they're getting into before clicking on the link. You should have 3 - 5 lead-in articles with pretty good descriptions, then 5 or so other links to other articles.

What kind of information are you handing out?

Hold on and I'll find some examples.
 
Well its not necessary a newsletter as such. It's a 'E-Flyer', kind of snazzy looking poster / leaflet with minimal text (a few lists and two very short paragraphs).
 
There's more to this than just the way the newsletter displays. Getting your newsletter past spam filters can be tricky and much of that depends on the way it is formatted, as well as the text it contains.

I send out a twice-monthly newsletter to about 75,000 of my site's readers and it's built in hand-coded XHTML with an internal stylesheet. Tables are the safest thing to use for layout, but you should avoid heavily nesting them and try to keep the code as light as possible.

Mine is sent using a professional email broadcast service which includes a built-in checker to see how likely the email is to get past spam filters. It analyses the code, the text and (importantly) the ratio of text to images/HTML and gives a score. If it's below the threshold it should get to most subscribers. If it exceeds the threshold, it sometimes needs to be redesigned. You also get built in tracking.

The classic things to avoid are the extensive use of images (about 50% should be text in order to get past most spam filters, according to the system I use), and when you include the obligatory legal unsubscribe link never use the words "click here" or similar. Putting words like "free" and "win" in the subject line can also be deadly...

That said, I've managed to get record traffic levels to my site while (legitimately) incorporating words that you'd expect spam filters to instantly bin - including viagra, penis and inserted - sometimes in the same news story.

I'd recommend subscribing to a few of the major magazine enewsletters to check out the best practice there.
 
Done a few freelance HTML newsletters and at work. Best practise is get the email looking as close as possible to the design without using CSS.
It is quite possible to get a perfect email without using CSS, obviously dependant on the design but you cant use background images. If you want an image behind text then either make the background a solid color or that cell an entire image.

Outlook 2007 is the one to watch for. AWFUL support for HTML emails
 
Don't bother trying to get it to look identical in all clients; it's ten times harder to do this than it is for cross-browser web pages :(

Best thing to do is to use graceful degradation techniques, and read up on which clients do - or don't do - each bit of styling.

Design it such that the more reasonable clients - Thunderbird, Yahoo - get the full whizz-bang, but the poor sods with Outlook 2007, Gmail, Live Hotmail etc, still get the key message when any background images or esoteric font stylings are stripped out.

The important thing is that the key message is readable no matter how much of a mess the client makes of the layout.

Even given the idiosyncratic support of it cross-client, inline CSS makes life much easier than pure ol' HTML. Tables for layout, though, definitely.

And remember that the two most important/influential aspects of an email are nothing to do with the design; recipients first check the Sender to see if they recognise them, and then read the subject line, which must be interesting enough to warrant further investigation.

Oh, and fishfishfish's advice is spot on, too. Speaking of this: which broadcaster do you use, fff?
 
Last edited:
Well its not necessary a newsletter as such. It's a 'E-Flyer', kind of snazzy looking poster / leaflet with minimal text (a few lists and two very short paragraphs).
Ah, so it's not a newsletter then. More of an 'e-shot', as marketing bods like to call them [while no doubt making pointy-finger gun gestures].

In this case, you want to keep it as short and sweet [and as narrow - some people have their preview panes in a thin column] as possible. Throwing in all manner of 'content' will just distract from the key message.

Incidentally, when you're coding up the lists, don't use <ul> or anything. Fudge it with a table [or a two-column table if the design uses bullet point graphics], as it's the only way to get consistent rendering of a list.
 
As part of a project I worked on we had to generate HTML emails and the majority of clients were using Lotus Notes.
Believe me Outlook is amazing at rendering HTML compared to the abortion of a job Notes makes of it.

Hopefully you won't have many recipients on Notes, but be aware if you do!
 
As part of a project I worked on we had to generate HTML emails and the majority of clients were using Lotus Notes.
Believe me Outlook is amazing at rendering HTML compared to the abortion of a job Notes makes of it.

Hopefully you won't have many recipients on Notes, but be aware if you do!
Indeed - one of our major clients used Notes, and every time we did a test send for approval we'd get all sorts of unique feedback from them because it renders stuff even more peculiarly than other clients.

Further, when we explained to them that it wouldn't look exactly the same in other recipients' inboxes, they took this as a failing on our part. In the end we included their personal email addresses in the list of test recipients as that was the only way to prove that we weren't incompetent.

Anyway, here's a nice resource comparing email clients and their code support: http://www.email-standards.org/
 
There's more to this than just the way the newsletter displays. Getting your newsletter past spam filters can be tricky and much of that depends on the way it is formatted, as well as the text it contains.

I send out a twice-monthly newsletter to about 75,000 of my site's readers and it's built in hand-coded XHTML with an internal stylesheet. Tables are the safest thing to use for layout, but you should avoid heavily nesting them and try to keep the code as light as possible.

Mine is sent using a professional email broadcast service which includes a built-in checker to see how likely the email is to get past spam filters. It analyses the code, the text and (importantly) the ratio of text to images/HTML and gives a score. If it's below the threshold it should get to most subscribers. If it exceeds the threshold, it sometimes needs to be redesigned. You also get built in tracking.

The classic things to avoid are the extensive use of images (about 50% should be text in order to get past most spam filters, according to the system I use), and when you include the obligatory legal unsubscribe link never use the words "click here" or similar. Putting words like "free" and "win" in the subject line can also be deadly...

That said, I've managed to get record traffic levels to my site while (legitimately) incorporating words that you'd expect spam filters to instantly bin - including viagra, penis and inserted - sometimes in the same news story.

I'd recommend subscribing to a few of the major magazine enewsletters to check out the best practice there.

That's a very good point and something I totally missed (haven't sent the actual campaign of approx 2500 emails yet.

There's a lot more this than I first imaged :)

Thanks for all replies
 
There's more to this than just the way the newsletter displays. Getting your newsletter past spam filters can be tricky and much of that depends on the way it is formatted, as well as the text it contains.

I send out a twice-monthly newsletter to about 75,000 of my site's readers and it's built in hand-coded XHTML with an internal stylesheet. Tables are the safest thing to use for layout, but you should avoid heavily nesting them and try to keep the code as light as possible.

Mine is sent using a professional email broadcast service which includes a built-in checker to see how likely the email is to get past spam filters. It analyses the code, the text and (importantly) the ratio of text to images/HTML and gives a score. If it's below the threshold it should get to most subscribers. If it exceeds the threshold, it sometimes needs to be redesigned. You also get built in tracking.

The classic things to avoid are the extensive use of images (about 50% should be text in order to get past most spam filters, according to the system I use), and when you include the obligatory legal unsubscribe link never use the words "click here" or similar. Putting words like "free" and "win" in the subject line can also be deadly...

That said, I've managed to get record traffic levels to my site while (legitimately) incorporating words that you'd expect spam filters to instantly bin - including viagra, penis and inserted - sometimes in the same news story.

I'd recommend subscribing to a few of the major magazine enewsletters to check out the best practice there.
Not disputing any of your points, but by golly does it read like a PR/Marketing manager wrote it :(
 
Don't bother trying to get it to look identical in all clients; it's ten times harder to do this than it is for cross-browser web pages :(

Because consistency isn't what the client pays for...

That's as silly as saying don't bother making a website look the same in IE6, you just have to as a lot of people will be using Outlook 2007. It does cause problems but you can't just ignore it and its not impossible to get it looking the same in the majority of the most used mail clients.

The only difference I've come across when coding for Outlook 2007 when compared to other mail clients is that you can't use CSS. Make everything using raw tables, using nested tables, v-align, td's, tr's, font size. Its quite possible to get it looking very near identical to the design this way, unless you're designer has made something ridiculous!

To get it looking the same you need to make compromises, you can't use background images, so use a solid colour. You cant use padding and margins, so use empty td's with set widths/height for spacing. It isn't that hard if the client is paying then try and do it properly!
 
Back
Top Bottom