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.
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 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.
I'm new in CSS and HTML. I have an email template with HTML and CSS code.
I put a pink circle box in my newsletter template to the top right: http://www.pedersenshotell.se/newsletter/
It looks OK on Firefox, Opera etc., but when I upload it to the Newsletter email campaign and send to Yahoo, Gmail, Outlook and Hotmail it looks so ugly. It shows a square box instead of a circle. Why?
HTML e-mails are tough things. The email clients are often not normal browsers they don't render the HTML correctly and you'll be surprised why a normal thing (like background) is not working there.
The web services are removing/blocking parts for security reasons and so on.
I would stick with HTML 3.2 or simpler HTML solutions which are pretty annoying I know, and I recommend you to use Fractal which is an email validator service to check your work.
You can get hints from the Email Standards Project as well to see which functions are supported and which are not.
Ahh, and I almost forgot the most important part. Please provide a web link on the top of the mail to provide a web based view of the newsletter, as usually "View this message as a Web page" or "Click here if the email is broken".
I suspect that the page has a square box instead of a round one because you are viewing it in a browser that doesn't support the border-radius property.
Please see border-radius for which browsers and versions have support for this property.
E-mail client support for border-radius is non-existent.
One solution here is to use a <img> instead of a CSS generated shape, although you may also find that e-mail clients block external content - a security feature which could result in a page that looks worse due to broken images. Since you have other images on the page already this may not be a problem for you.
Newsletters in email campaign tools like (outlook, gmail, hotmail) has less CSS support. Moreover, border-radius is supported for web browsers not for email clients.
It is better to use <img> for background images, pure images, gradients, round corners and 3d related stuff instead of using CSS styling.
See this reference: http://www.campaignmonitor.com/css/
This reference shows which CSS property is supported by different email clients.
It is VERY important to make you aware that browsers and email clients have 2 completely different ways of handling HTML and CSS.
You can never make it 100% compatible in all clients using CSS and HTML in newsletters. The only way, in my experience, to make newsletters 100% compatible is by writting the CSS inline in the HTML tags, like so:
<td style="height:50px; width:100px; color: red; font-size: 12px; font-family: verdana;"> Content goes here </td>
As already stated HTML email clients have some issues which have to be considered. The most important issue: Inline your CSS styles (most of the time).
To help building HTML emails there are some nice boilerplate templates. Take a look at http://www.emailology.org/#1 or https://github.com/seanpowell/Email-Boilerplate and use these templates as a starting point.
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
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.