We’re ramping up our emailing efforts and decided to start sending out HTML newsletters to customers. (We’ve always sent out plain-text emails but figured some minimal styling would help liven things up a bit.) So we designed a nice, simple email using clean code. The first one is this brief Basecamp Newsletter.
It took a while to get to this version though. First, we ran our simply styled email through Mailchimp Inbox Inspector (demo), a useful tool you can use to view HTML newsletters in a variety of email apps.
It came up perfect everywhere except Outlook 2007, Windows Live Mail, and Lotus Notes. Strangely, it looked fine in Outlook 2006 but busted in Outlook 2007.
The reason? As Campaign Monitor put it, Microsoft decided to take email design back 5 years.
As I type this post I still can’t believe it. I’m literally stunned. If you haven’t already heard, I’m talking about the recent news that Outlook 2007, released next month, will stop using Internet Explorer to render HTML emails and instead use the crippled Microsoft Word rendering engine.
First things first, you need to realize that Outlook enjoys a 75-80% share of the corporate email market, which is similar to Internet Explorer’s share of the browser market – they make the rules…The reality is that many of us are going to have to scale back our email templates to years past and stick with tables and inline CSS if we want consistent looking emails in Outlook and Windows Live Mail.
No background images, no float or position (tables only), really poor support for padding/margin, etc. For real!? It’s like a time warp to making web pages in 1999. But what can ya do when Outlook’s got a 75-80% share for corporate email?
So we dove into the world of bulletproof, “work anywhere” templates. You can find them at Campaign Monitor, MailChimp, or elsewhere.
But the code is real gobbledygook. Lots of this sorta thing:
span style="font-size:20px;font-weight:bold;color:#CC6600;font-family:arial;line-height:110%;"Totally drops the “beautiful code” limbo bar to the floor. Bummer.
What can be done to make this situation better? Check out these posts from Campaign Monitor that seek to improve the situation: Why we need standards support in HTML email and Help us form a baseline for standards support.
Matt Linderman wrote this on Sep 20 2007 There are 39 comments.
Phil Baines 20 Sep 07
Man, it seems like Microsoft’s left hand doesn’t know what it’s ‘right’ hand is doing. The Outlook people obviously have no idea what they are doing!
sam 20 Sep 07
i got it in windows live (personal) and lotus notes (work).
i liked the “look funny? click here to view it on the web” link.
that made good sense to me. i get stuff from adobe that’s undecipherable. which doesn’t really matter, because the fact that i gave them my addy to get a reader upgrade a year ago doesn’t mean that i care about most of the spam i get from them anyhow. (when permission marketing go awry!)
Coleman 20 Sep 07
To keep code clean I wrote a script that replaces all class/id=”....” with the appropriate inline css before it sends everything out. I know it is dirty but it allows my email templates to be cleaner to develop. Only way to keep from going insane with HTML email I’ve found.
Eivind Uggedal 20 Sep 07
I would select plain text email over HTML email any day. With a proper mono-spaced font and a efficient mail client it’s a wonderful communication format. I will probably be flamed to death over this, but those are my humble opinions.
Marc Bernard 20 Sep 07
I’ll add another vote in favour of plain text email over HTML . Much easier to read, in my opinion.
Having said that, the decision to revert to the Word rendering seems crazy.
Mrad 20 Sep 07
I’ve designed many html emails over the past few years and I figured out early that you have to “let go” of your web standards based ideas when coding. That is, if you wanna reach as broad and audience as possible (or really anyone for that matter).
Mayhaps we should jump into Jeffery Zeldman’s mindset and stop looking at email as a design platform.
Bob Warfield 20 Sep 07
Outlook is the weak link in the Microsoft Office Suite. It’s no wonder Yahoo bought Zimbra. E-mail should be the first desktop app you move to the cloud. The question is what’s the right “way cool” app to do it?
Best,
BW
Joel Sanda 20 Sep 07
I’ve got say I really prefer text email. I’m not surprised Microsoft did this and shame on them for break their functionality, but HTML in emails? That presupposes folks have an email client capable of rendering HTML and CSS (it’s not just HTML – it’s also CSS ). What about those getting email via their Palm or cell phone or Blackberry?
Straight text works the best because everything supports it.
Frankly I’m a bit surprised 37 Signals would prefer HTML and CSS in emails – your products are so slick and streamlined it seems contrary for you to use something other than text in email. The comment functionality on this page only supports “Basic HTML ” – not as much as you desire in your emails ;-)
ML 20 Sep 07
We’ve been sending plain-text emails to our main mailing list for years and may very well continue to do so. It’s def a format that’s got a lot going for it. HTML emails jazz things up a bit though and that’s nice for a more product-oriented newsletter.
Jake 20 Sep 07
@Matt: What made you choose Campaign Monitor over the other popular email services like myemma, mailchimp etc. ?
ML 20 Sep 07
We’ve been using Campaign Monitor for a while now and think it’s great. Really thoughtful app with solid UI and flow. Def worth a look if you’ve never checked it out.
Scott Williams 20 Sep 07
I wonder if MS did this because of the security issues with IE. Used to be that hardly a week would go by when there was some new vulnerability in Outlook because IE was running with elevated permissions in it. IE 7 was supposed to better at this, but maybe they just panicked and wen with Word. Still sucks though.
Does Live Mail use the same Word based engine?
Nate Klaiber 20 Sep 07
The outlook thing is very frustrating, especially when you are trying to advance and move forward. I like your emails now, but wouldn’t mind the simple layout you proposed above.
I can understand testing to check old mailers, but to have to hack to support new mailers? Thats just ridiculous.
Jim 20 Sep 07
Microsoft had to remove the reliance of Outlook on Internet Explorer because of all those Netscape peeps yelling about vendor “lock-in”.
Don’t be mad at Microsoft or the Office team. This is only the result of what everyone wanted.
(BTW, it’s amazing how people praise Apple for their integration of applications, yet people take legal action against Microsoft for similar practices).
Chris Peters 20 Sep 07
Am I missing something here? I thought you could send multi-part emails that had both text and an HTML versions in the same message. Why are the text email people whining? Are these 37s emails not being sent as multi-part?
Jim 20 Sep 07
I really was surprised to get that HTML email. I had gotten your text emails in the past and actually read them. When I receive an HTML email, especially one with images (since they don’t load by default in any of my mail clients), I instinctively hit the “spam” button.
pwb 20 Sep 07
Had to laugh about this: “It came up perfect everywhere except Outlook 2007” even before reading this: “Outlook enjoys a 75-80% share of the corporate email market”.
“Outlook is the weak link in the Microsoft Office Suite. It’s no wonder Yahoo bought Zimbra. E-mail should be the first desktop app you move to the cloud.”
Couldn’t disagree more. Outlook (and Excel) are by far the most impressive pieces of Office. And email is one of the very few tasks that virtually requires the richness of a desktop app.
“it’s amazing how people praise Apple for their integration of applications, yet people take legal action against Microsoft for similar practices”
Not really. Some practices are only illegal when performed by a monopoly (in US law, at least).
JF 20 Sep 07
Are these 37s emails not being sent as multi-part?
Yes they are sent as multi-part so there is a plain text version.
We’re just experimenting with HTML -based email right now. This is the first one we’ve ever sent. We may or may not continue to send HTML emails.
Tyler Karaszewski 20 Sep 07
Wow, do people still use computers that render text like in that Outlook 2006 screenshot? That’s horrible.
Martin 20 Sep 07
Last time I had to use Outlook (Outlook 2003), it completely f*cked up any attempt to do inline quoting. Like misattributing lines with no way to correct it.
I am not particulary impressed.
Wolf 20 Sep 07
I was rather unimpressed by the cross-emailclientness of the Campaign Monitor templates. They try to use CSS (with the style tag) while you really can’t count on that.
The only way to get some results is inline styles, tables only, sometimes double stating of whatever you want to do (with an inline style and oldskool tags like align=”“)
Darren 20 Sep 07
well the simple way around this would be to just use text formatting and the odd image.
I know the outlook 07 thing is a real backward move. I think it’s the Office guys throwing the toys out of the pram because they had IE taken away.
Mathew Patterson 20 Sep 07
Wolf : I was rather unimpressed by the cross-emailclientness of the Campaign Monitor templates. They try to use CSS (with the style tag) while you really can’t count on that.
Thanks for the comment Wolf. At Campaign Monitor we are well aware that Gmail strips out style blocks. For our templates we made the decision to keep them easy to edit by not putting inline styles in to start with.
Instead, we recommend people take the template, make all the design changes they want, and then apply inline styles at the end. It saves having to change things 100 times if you swap colours for example.
Matt said First, we ran our simply styled email through Mailchimp Inbox Inspector (demo), a useful tool you can use to view HTML newsletters in a variety of email apps
It is a useful tool, and very soon we’ll be enabling you to do the same kind of testing right in Campaign Monitor.
Various people said just use plain text!.
All our emails go out in multipart, and 37Signals have a well designed plain text version, so you can always set your mail client to show that.
Everybody should have the choice of what to receive, and no matter what your personal preference is, some people do actually prefer a nicely formatted HTML email.
That’s why it is important for designers not to ignore HTML email, because it is not going away and if we don’t make some noise about standards support it won’t happen.
Joshua Go 20 Sep 07
What a coincidence. I just spent the day changing HTML e-mails for a client and I thought I was doing something wrong.
It’s both encouraging and disheartening that 37signals is having the same issues; encouraging because it means I’m not crazy, and disheartening because there’s no easy solution, as I was hoping for in the back of my mind.
I will chime in with the echo chamber too: I absolutely adore plain text e-mails. Still, some of us have our reasons for sending out HTML e-mail, and these reasons all seem to boil down to market demands.
Geoff 21 Sep 07
Re: plain text vs HTML : Our goal with our email newsletter is to engage our clients and prospects. I initially thought plain text would be the way to go, but after a few tests, we learned that the HTML brings far more traffic to our website. In our case, HTML wins the “engaging” competition hands down.
Cheshire Isaacs 21 Sep 07
I’ve gone completely web standards for my emails. It means that Hotmail, Gmail, and AOL users (and some others) see basic HTML , but since I use h1s, etc., it still looks clean and hierarchically correct for those users. Also, I use a little display:none CSS trick so that a special message appears in email clients that don’t adhere to web standards: “If you can see this line, click here to see what this email should really look like.”
Ideal? Hardly. But for me, the bottom line was that I needed it to be easy for me to design my emails efficiently. All the inline CSS was killing me. Let’s just say I’m rewarding recipients who use better email clients.
@ the plain-text purists: sure, it’s cleaner, but you don’t get nearly the same level of reporting. You’re essentially shooting in the dark. And if you’re emailing for business, it really helps to know when you have (and haven’t) connected with your audience.
I also use Campaign Monitor and absolutely love the service. (I found out about it because of a Deck ad, btw.)
WTL 21 Sep 07
That is great, David. I’ve added the site to my reading list.
Paul Farnell 21 Sep 07
I wouldn’t usually plug my own company, but it’s such a perfect fit for this post. We’re Building of Basecamp workshop alumni and our Litmus service helps companies test their emails across different platforms.
MailChimp seems like a good service too, but if you’re in the market for testing emails I believe Litmus is also worth a look.
skylar 21 Sep 07
I got the Basecamp newsletter and immediately scrolled to the bottom to hit “unsubscribe”. To my surprise there was no link! It wasn’t until a few seconds later I found it right at the top, which sounds like a good location but I’m so used to having this link at the bottom.
Marc 21 Sep 07
I actually like the HTML newsletter you guys sent. It still has the cleaness, but with a little 37style and I like that. I use Outlook at work :(
Sharaf 21 Sep 07
Your best bet would be to use basic HTML and tables for styling for emails, I know it is kind of going backwards, but this is the only way you can have your emails look the way you want in all email applications.
Plus, if you use CSS Gmail strips it out and so does other web-based email systems. So design your HTML email just as you did web sites in 1999 without the animated cliparts and it should work. Keep your HTML formating simple, so that you don’t end in the Junk Mail.
Then offer a link to a web version of the email online which can be in pure XHTML +CSS.
Martin Edic 21 Sep 07
Personally I prefer a link in the email to a web page with the newsletter design- simple, works with every client, doesn’t clutter things up, creates an archive of back letters. Is that so complicated?
JF 21 Sep 07
One of the big benefits of HTML newsletters, from a business perspective, is tracking. You can see which links are clicked, who clicked them, who opened the email, etc. You get a much richer report with an HTML email than you can with text-only.
Matt Lee 23 Sep 07
Jason,
While I admit it’s less elegant, you could do that with plain text just as easily.
ie. For Campfire discounts visit http://37svn.com/cf/1/234567
Anonymous Coward 23 Sep 07
Matt Lee: No you can’t.
You can track links using custom links as you’ve suggested, but you can’t track who’s opened the email and read the email without clicking links. HTML emails allow you to track who’s actually opened the email. You can’t do that with plain text emails.
James 24 Sep 07
“(BTW, it’s amazing how people praise Apple for their integration of applications, yet people take legal action against Microsoft for similar practices).”
Actually works when Apple does it, Safari is very standard compliant and makes HTML email in Apple Mail effortless.
Word’s HTML engine is even more locked in than IE if you ask me
RobM 25 Sep 07
I applaud Microsoft in taking this bold step to make it harder for marketing departments to fill up my inbox with HTML email.
I appreciate that not all people who send me HTML email are spammers, it’s just that the signal to noise ratio of HTML email is so low that I don’t even attempt to read it any more unless I know for a fact it’s something that I personally cannot do without (hint: that does not include any marketing mailshot).
RubyMail 25 Sep 07
Apologies for the self-promotion, but for anyone reading this post and wondering if there’s an easier way, we have a full-service HTML email marketing solution at www.rubymail.com in which we do all of the work for you. No templates. We custom-code your Photoshop/Illustrator design in HTML /CSS, do all of the testing to ensure optimal display in all major email applications, send the campaign, and provide reporting.
Obviously we can’t get around the issues with Outlook, et al, but we have the experience to code around the hurdles wherever possible and implement your design in an optimal fashion.
Deutsch 27 Sep 07
I used Outlook 2007 since it was beta and it was surprising that you couldn’t even use animated GIFs!
This discussion is closed.