As I am using SendGrid service at heroku, I've noticed that when I send HTML based emails, the CSS has no effect, can any one tell me what could be wrong ?
I tried to send it as html.haml, html.erb, but both didn't work, although the images are viewed correctly in the sent emails.
Any idea ?
Try using inline styles instead of an external stylesheet.
Like this:
<div style="color:green;" id="div"></div>
instead of something like this:
<style>
#div {
color:green;
}
</style>
<div id="div"></div>
(Thanks Kelvis Miho for pointing this out)
Edit: I searched for #Joe's text on Google, and I realized that most of it was copied from http://css-tricks.com/using-css-in-html-emails-the-real-story/ .
Edit: Joe edited his post to include the reference link.
Remember that most email clients don't support a lot of CSS, so you should mostly be using both images, and tables.
You could, for example, code a wonderful email design and then screenshot it. With tables, you could put the logo on the top in the center, the screenshoted beautiful "featured" pane on the left, the "discount" as the content in the center under the logo, ect.
What you CAN'T do:
Include a section with styles. Apple Mail.app supports it, but Gmail and Hotmail do not, so it's a no-no. Hotmail will support a style section in the body but Gmail still doesn't.
Link to an external stylesheet. Not many email clients support this, best to just forget it.
Background-image / Background-position. Gmail is also the culprit on this one.
Clear your floats. Gmail again.
Margin. Yep, seriously, Hotmail ignores margins. Basically any CSS positioning at all doesn't work.
Font-anything. Chances are Eudora will ignore anything you try to declare with fonts.
There are quite a few more things you should be aware of. For a great complete list of what online email services support what, check out this article at Xavier Frenette.
What you CAN do.
In two words, inline styles. It's not as awful as you might think, since we are basically developing a one-off email, inline styles are not nearly as egregious as using them on a website.
from this site
You need to use inline styles.
To me, the premailer-rails gem works like a charm. You just need to add this gems to your Gemfile
gem 'nokogiri'
gem 'premailer-rails'
And all your emails will include styles from the assets folder. I usually create a email.css.less in the assets folder and then I include it on the <head> of the email like this
<%= stylesheet_link_tag 'email.css' %>
And also, when I need to include an image I found this helper that allows me to attach images into the email so they have logo and stuff.
module EmailHelper
def email_image_tag(image, **options)
attachments[image] = File.read(Rails.root.join("public/#{image}"))
image_tag attachments[image].url, **options
end
end
And in the .erb template
<%= email_image_tag "img/logo.png", :class => "some-class" %>
Hope it helps someone, Regards
Make sure that you are putting internal style inside head tag
eg:
<head>
<style type="text/css">
...
...
</style>
</head>
Note: Only inline style and internal style (must be in head tag) supports.
https://www.campaignmonitor.com/css/
shows all css support for popular mail clients. Also it appears that for the most popular gmail-client display:grid/flex is not supported
Related
I inherited a WordPress plugin that sends an RSS feed of content to Mailchimp to generate an email. This code (which I cannot find the source) is adding an extra logo image which is throwing off the formatting. I know I should add something like
<!--[if !mso 9]><!-->
to the code if I want to hide it in Outlook, but I cannot find the source to add this. I can only add external CSS. The usual display: none works in the other email platforms. Any advice on how to remove this extra image instance in Outlook via external CSS?
The code you provided is an HTML conditional comment. It can only work embedded in the HTML code. If you want to hide an element from an external stylesheet in the Outlooks on Windows (from 2007 and above), you can use the mso-hide:all property. It’s basically a display:none but for Word’s rendering engine. Although, contrary to display:none, this doesn’t always inherit to <table> children elements. In that case you could use a double selector like the following.
.your-element,
.your-element table {
mso-hide: all;
}
When developing a web-based email system, is there a generally accepted correct way to handle style sheets on incoming emails? I am referring to the <style tag. Not referring to #import or <link notation.
These stylesheets have to be restricted to only the element containing the foreign email, or else they will also adjust the content of your own system, which is a big no-no.
I am aware that I should sanitize scripts and stylesheets, which will allow me to prevent url background images, or fixed position elements that would cover parts of my system.
I would not want to drop the stylesheet completely, so I see these options
Convert style sheets to inline styles
Put the entire foreign email in its own div with an ID, and change the style rules to only affect that div (for example a,b{color:purple} would become #foreign a,#foreign b{color:purple})
Are either of these good ideas? Is there an obvious/better way that I am missing? What is common/accepted/robust?
Email doesn't support external style sheets, so all CSS on a html email is in the page style tag, or inline. As it is standard for clients like gmail and yahoo to strip the style tag, and everything else outside the body tags, you could simply do the same. Limiting incoming emails to inline styles will keep all CSS local to those elements. It is pretty much email design 101 to inline the css, so you don't have to worry about your email system being less than what is standard.
Web clients also strip many CSS elements in addition to this. Don't want someone adding position:fixed; for example as it would break out of the viewing pane. The best reference for what CSS is allowed in each client is Campaign Monitor's CSS guide.
I think the best idea is use inline styles. I have made may web sites that send styled html email and inline styles is the only thing tha work in most email sistemas.
I'm getting double spacing in Outlook 2007/2010/2013 and GMail but it looks fine elsewhere. I'm creating a newsletter and I've tried all-sorts: border-collapses, margins, paddings, spans, and still can't get my head around this. Can anyone see where I'm going wrong? Am I missing something?
Link below - source code too long to paste here. Sorry.
http://pastebin.com/FW3RgYuv
For one, all styles must be inline. Most mail clients do not support stylesheets.
You are not building a web page, you're building an email, therefore everything in your HEAD section will be removed, including your embedded stylesheet.
In you code you have </br>. This is not a valid tag. Use <br />.
NEVER NEVER use !important. Inline styles already override other styles, plus you can dig yourself into a dead end.
Put your text in a DIV or a P and style that, not the TD. Not all styles are supported by every mail client. Here's a good list to compare to.
The injected styles result in all text being underlined. It does not inject the styles in messages originating from Outlook, and does not inject them in all HTML-formatted messages.
Our HTML templates show properly in all clients including the Outlook native client and Hotmail which supposedly uses a similar HTML email preprocessing to the one deployed by Outlook WebAccess ( http://litmus.com/help/email-clients/rendering-engines )
I am wondering what exact issue triggers this behavior. Is there a way to prevent the injection by modifying my HTML emails? Here's the CSS it injects:
Edit: I just noticed it does it for all browsers except for IE.
<style type="text/css">
<!--
.x_preheaderContent
{color:#606060!important;
font-weight:normal!important;
text-decoration:underline!important}
.x_headerContent
{color:#EB4102!important;
font-weight:normal!important;
text-decoration:underline!important}
.x_bodyContent
{color:#0000cc!important;
font-weight:normal!important;
text-decoration:underline!important}
.x_footerContent
{color:#000099!important;
font-weight:normal!important;
text-decoration:underline!important}
-->
</style>
It looks to me that code is an interpretation of what Outlook understands of style and how it is applying. You have most probably taken the above code by viewing the source of the html email from the Outlook. If you look at your html code and then setting or overriding the text underline property should be as smooth as anything else. I never had issues with this property.
Best practices in normal web development call for putting your styles between style tags or loading a style sheet; however, I've found out that several email clients will ignore any style tags and only execute inline styles (www.campaignmonitor.com). I can deal with that, but I'm not sure if CSS supports inline media queries. I would like my email to display a little different on the desktop. Is something similar to this supported?:
<div id="myDiv" style="#media screen and (max-width:480px;){ color:black; }"></div>
HTML emails are an entirely different beast. You need to code them like it is 1999. Use a very limited set of tags and make sure all or your styles are inline. Use tables for your layouts.
To make use of media queries you need to do both.
What I recommend doing is to first create your email with all inline styles. Then when you are happy with it you can add support for mobile.
To add support for mobile add the media queries to the head tag and use !important to override any inline styles.
Here is an example:
Optimizing for mobile email
Here is a helpful chart that details which css support for email clients.
http://www.campaignmonitor.com/css/
I don't think they work inline like that, you would probably have to embed the stylesheet in the HTML email template itself (e.g. <style>#media {...}</style>).
Even that seems like a VERY dodgy thing to rely on. HTML emails are a huge pain in the ass because standards and CSS support are about a decade behind and there is massive variation among popular email clients in terms of which properties and types of styling are supported.
In general keeping it simple and using old school table based layouts with all inline CSS is the way to go. Campaign Monitor has a great chart of support for various CSS properties in major email clients and devices.
A common workaround to the problem of HTML not rendering correctly in email clients is to do the best you can and have a prominent link at the top that says: "Email not displaying correctly? View it in your browser."
Ray Kurzweil's weekly newsletter blast does this, and it's very well formed, and well done, and I always read it. (It's a brilliant blend of content and presentation).