I am in the process of updating an internal company website.
On the website is a table of summary data. Each day this table is copied from the page into an email and sent to people using Outlook 2010. The company currently is using IE8.
The problem is that the new website is using Twitter Bootstrap for the table styling. When copying and pasting the table into Outlook, most of the styling is missing.
The old website has classes attached to each tr, td, etc.
Chrome works without any issues on the new website.
Here are some examples of the table and problem:
Old site - http://jsbin.com/ifeqav/1/edit
New site - http://jsbin.com/iwuven/1/edit
Does anyone know of a fix for this? I have tried this suggestion but it doesn't appear to work correctly with bootstrap.
Does IE9 fix this issue?
Outlook 2007 and later do not use IE for HTML message formatting. Instead they use Word's (yes, it's terrible, everyone knows). Word does not support many features in CSS2, let alone CSS3. This unfortunately means the best way to serve graphical emails to Outlook users is to send them 1990s-era HTML emails: the horror of <table> for layout and the return of the evil spacer.gif. This abhorrent practice is acceptable because Outlook/Word does not interpret any semantic content.
Or just include a link at the top of your emails that say: "Using Outlook? Click here to view your message in your browser".
Related
Like much of the corporate world, the majority of our clients unfortunately use Outlook as their email provider. In the email I'm working now, Outlook is ignoring the CSS font styles and replacing it with Times New Roman. I've researched this issue and have found ample solutions (outlook class attribute, inline CSS styling in all <td> tags, and placing style tag closer to text) that have worked for most of the text in the email, but have left a few main pieces of text in Times New Roman.
I have screenshots from Mailchimp to show what it SHOULD look like, and then from litmus to show how Outlook 2007 is rendering it.
Disclaimer: For this email we used a template bought from envato's themeforrest, and I'm told some of the code is pretty wonky to begin with, but I don't know enough to improve it.
Code:
Link to Code in Gist
(I've removed sections not mentioned here)
Screenshot :
1 - Main Picture Section
2 - Testimonial Section
3 - CTA/ "Interested" Section
I wouldn't rely on web fonts for email, its unreliable. A lot of email clients will only support system fonts, so your best bet would be to choose a fallback font when your web font fails.
You need to verify if the version of Outlook you are targeting even supports web fonts.
https://www.campaignmonitor.com/resources/will-it-work/webfonts/
As for your layout issues, you need to have a solid understanding HTML emails in order to fix those issues.
EDIT:
Check this out: Outlook 2007 / 2013 not rendering CSS font-family declarations
Unable to see your code with gist link
but, this is just a hunch, maybe you can try to give the font part of your code it own style tag.
I have just designed my first html eshot and tested it on different email clients using Mailchimps inbox inspector. Its fine across all clients as far as I can see except for Outlook 2007 & 2010. The image on the left moves out of place quite a bit. Outlook 2003 and all others are fine, its just 2007 & 2010 causing the problem.
Weblink (how it should look)
Outlook 2007 & 2010 (how it shouldn't look):
Does anybody know whats wrong? I'v tried all sorts and it nothing is working, its driving me crazy.
My estimation, looking at your code, is colspan is causing an issue. In my experience with coding e-mails, colspan and rowspan should be avoided. If you need to change the number of columns, close the table and start a new table. It's a lot of extra markup, but that's the deal with coding emails.
Coding e-mails is very, very challenging. There's many articles on the challenges with the various e-mail clients and their quirks - not to mention GMail, AOL, Yahoo!, etc.
I would suggest starting here:
http://www.campaignmonitor.com/css/
Their chart gives you a quick overview of the compatibility of various css selectors, etc. with the email clients out there.
Then, you need to learn some of the strange things that happen, such as the margin that GMail adds to images. (Add display:block; to the images: http://www.campaignmonitor.com/blog/post/3132/how-to-stop-gmail-from-adding-a-margin-to-your-images/)
A tool that I have begun to use is Email On Acid, which lets you preview the e-mails in a WIDE variety of email clients.
I an having a problem with my HTML email.
My email is working correctly in most cases, the problem arises when I send to windows live mail.
1) opening the email in widoew live mail in IE all of the text becomes centered even though I have used the 'style="text-align:left;"' and the 'align="left"' options, I have tried them together and tried them seperate.
2)opening in windows live mail in anything other than IE the images have spacing below them. I have used the 'display:block;' and 'border-collapse:collapse;' and set the margin and padding to zero.
I used firebug in firefox to have a look and see what the problem is, it shows either a span tag or a p tag wrapping the img tags. I have no idea why it is doing this or how to fix it!
If anyone can help i'd be really greatful.
Thanks
no the align="left" doesn't work, If I use the align="justify" or align="right" it seems to work but not align="left". I have realised that I am only getting these problems when I send through outlook, I am using outlook 2007. after some studying with firebug it seems to me that outlook is adding its own classes to the email. it seems to be adding either or around all of my images with classes that seem to belong to outlook. I know outlook is not the best program in the world but on some occasions it is the only way I can send emails. is there any way I can get into the code that outlook is producing and change it, I know that sounds a bit drastic but it would be really good if I could. thanks for all the help guys, really appreciate.
A lot of mail clients support only older versions of html. gmail for example will not respect any css file (more information on email on acid) so you are restricted in what you can do with styling.
You can test how your email will look in various clients using online services such as email on acid or litmus.
I would suggest keeping the design very basic and using an old style table based layout.
How HTML newsletters should be designed? using tables or divs and css styles.
I read somewhere that newsletter should be designed using tables because many of the old client can't process the css style. how much truth is in this?
What else need to be care of when designing newsletter to send using email.
i.e. java script should not be used in newsletter as it is disabled in most of the email clients. what else?
I have read this article. although it was written two years back but I am not sure If writen things are still valid...
http://articles.sitepoint.com/article/code-html-email-newsletters
This is a good place to start:
http://www.campaignmonitor.com/design-guidelines/
Or in general:
http://www.campaignmonitor.com/resources/category-archive/cat/designing-and-building-emails/
PS: I've no relation with the site but I do think the articles are really useful though some are dated a few years ago.
Tables are usually the best option for consistent layout in HTML emails - some email clients have problems with divs.
CSS usually has to be inline (ie on each item to be styled) or embedded in the page - embedded CSS can't be in the <head> section (since this may be stripped out by web-based clients).
Here's a couple of links from MailChimp about designing HTML emails which I've found useful:
http://www.mailchimp.com/blog/background-images-and-css-in-html-email/
http://www.mailchimp.com/kb/article/how-to-code-html-emails/
Depending on the version of Outlook the user has, background images will not work (2007) due to security concerns, but they will work in 2003.
When I created an email campaign for a company I worked for, we broke the newsletter into sections of images that linked to various areas of our site using a table to structure it with some css. Worked for most email clients.
As it is News letter, it does not need be SEO. Better to have table instead of DIV. and Table render faster than Div.
I did some research into this for a client about a year ago based on analytics from sending 200,000 newsletters.
I did lots of mail client testing and discovered (very sadly) that the most reliable coding method was sticking to the W3C HTML 3 standard.
Problem is a frightening number of people are still using Outlook 2000 and some really old versions of outlook express.
A designer coded an html template using CSS best practices. I want to use this template as an email newsletter template, but I've heard people say hotmail, yahoo and gmail offer limited support for CSS.
Am I supposed to re-code these templates using table layouts and font tags?
The short answer is Yes.
You're going to get the best compatibility across webmail accounts & email clients by using the most basic and dumbed down HTML possible.
Don't use any CSS files or <style> tags. Do everything inline.
Handle positioning with nested tables that have explicit widths
I make heavy use of HTML comments in these situations to make sure I don't get confused about where I am in the layout.
All text should be surrounded by <font> tags with the font style information.
Images should have explicit widths & heights.
This helps the email retain its proper layout when images are blocked.
I usually test on a minimum of the following:
Outlook 2003
Outlook 2007
Most of your headaches will come from here.
Thunderbird
Entourage (OSX version of Outlook)
Gmail
Hotmail
Yahoo Mail
You're usually in pretty good shape if you get something that shows up properly on all of those.
We use Exact Target and they have an HTML preview feature but it's not perfect. I've run into a lot of situations where an email looked good in the preview but still came through broken in Outlook 2007.
Mark above said everything that you need to do to develop email templates (it's the 90's all over again), but I wanted to add one last thing:
http://www.email-standards.org/ is a great resource to see how different email clients interpret HTML and CSS.
To build on what Mark said:
If at all possible, avoid using CSS at all (though, it's usually alright for things like text). Use tables for all positioning, empty <td> elements for padding/smaller positioning bits.
And even with all this, it's only going to look perfect in a few email programs/sites. HTML email is, I'm fairly confident in saying, utterly impossible to do in such a way that it shows up perfectly in all mail clients/apps.
You'll have to go back to stone-age HTML to get HTML emails to work out as Mark suggested. All styles inline in the html. No STYLE tags or external stylesheets.
MailChimp and CampaignMonitor both offer excellent free HTML email templates. They also both offer email testing services that send your html emails to several different email clients and then send you screenshots of the results.
use div tag with fixed height/weigth and put all your HTML in there. It would look the same in most clients. Iv'e tried it before and it works fine.