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.
Related
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".
I have been working on an emailing project for a client using Lotus. Since they want each associate to be able to send a nice looking email individually, we first opted for a solution where we would design an email template, send it to the people meant to use it, and have them send an email using this template, by forwarding / cleaning up the headers and filling out a personal message in a specified area of the table.
Easy enough to accomplish for Outlook users.
But with Lotus (I believe they are using a very old version, running on windows XP), every time you forward an email containing table, all borders of the table appears as thick white lines, even though border="0" has been specified. It's quite an issue since our email has a dark background. Email does look ok upon reception, when it was send from an html mailer form example.
Do you know any html code trick to work one's way around this filthy bug ?
Lotus 8.5 continues to have this problem. The original email looks nice/professional. However upon forwarding in Notes, the borders are very thick, the font is larger, and there are --you'll love this one-- thin blank lines between each original line.
Notes is a great workflow/database system, however their email client continues to be very problematic/substandard. My company is switching to Outlook for all 13,000 employees this year. This happened at a prior company I worked and as well. It's really a shame, because Notes has been truly a superior product to Outlook for medium to large size companies for for the 13 years I have worked with both (Notes has had very good capabilities for index/search, workflow, and global offices). The best combination seems to be Outlook email client and Notes backend.
1) Get the customer to upgrade to a recent version of Notes & Domino. The HTML rendering & handling in Notes significantly improved with version 8.
2) This seems to be a problem with the version 6.5 Notes client.
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.
How do I get html content to stay in relative position and format from one browser/email to another? When developing e-newsletters, the format appears differently in one email server than in another (when testing to two of my emails).
Example: when I open the email in my gmail, the padding around the images is where I want it, but when opening it in my work Outlook, the padding is almost nonexistent.
Example: the font appears according to the style sheet in Outlook, but changes when in gmail.
How can I secure the style sheet and the positioning to keep the appearance constant?
E-mail clients are notoriously terrible at rendering HTML (especially Outlook and Lotus Notes). You will typically be writing crippled HTML with inline CSS styles. This will not get better in the near future.
Make your design as simple as possible, and you will have less trouble making it look right on many clients. The actual best practices for writing HTML will depend mostly on which clients you plan to support.
Some helpful articles that give insight into common solutions for HTML e-mail rendering problems:
Article at A List Apart
Guide at ReachCustomersOnline
There are some easy web services that can check your newsletter on multiple clients and give you screenshots of the results. They are usually worth the money:
Litmus
MailChimp
CampaignMonitor