I'm utilising a technique for producing "responsive" emails which involves having two versions. One explicitly written for desktop and one written for mobile. Using a combination of conditional statements and CSS (mso-hide:all; display:none;) to hide the mobile version when in a desktop client and vice versa.
This works perfectly, and as intended. When I go to forward or reply to one of these emails, the styling breaks and the previously hidden 'mobile' version is shown. I've tried using inline styles (mso-hide:all; display:none;) on the table, as well as applying a class and using conditional comments to apply the same styling in a CSS fashion, but it's not working.
I'd show an example, but the work is rather sensitive.
Basically, I'm after a way to hide a table in Outlook and have it stay hidden when the email is replied to / forwarded.
Try wrapping your mobile version in <!--[if !mso]><!--> [tables] <!--<![endif]-->. That should prevent the mobile version from being interpreted by outlook and therefore being forwarded.
Forwarding html emails means forwarding the html that was already processed by the client, which if you look at an outlook processed html file, is horrendous. Filled with garbage MS code.
Most email developers (myself included) accept that you can't control forwarded emails, and therefore don't try to code so forwarding works properly.
Do they both have the CSS display values set inline? Are you overwriting the inline declarations with the !important tag in the media query?
Outlook often trashes the media queries (especially on forwarding), so if you have only one version visible inline as the default view, maybe that might work - which is what you should have for non-style tag clients like Gmail anyway...
Related
I'd like to see if there's a way to customize an HTML e-mail based on the user's e-mail client.
I'm wondering if there might be a reliable way to do this with something sort of like a user-agent that would indicate that it's being viewed in Gmail, Outlook, etc. Then if there's a simple way to show and hide a few IDs that would contain client specific things sort of like a media query. I don't see any support for a user-agent media query so that seems like a stretch.
I know modern clients don't tend to support Javascript so that complicates things. TBH, I'd be really surprised if any of this can be done in the first place but figured its' worth asking.
For context, this message will tell people how to edit to their e-mail signature, which is different in each client. I'd rather have one dynamic set of instructions instead of including instructions for every client.
This is sometimes possible, but it changes because it's essentially based on bugs and non-official ways of targetting.
Check https://howtotarget.email/ for the latest ways of targetting different email clients.
For example, Outlook windows:
<!--[if mso | ie]>
<td>ALL OUTLOOK</td>
<![endif]-->
Also this bug works for targetting Yahoo and Gmail IMAP (one version of Gmail):
<!--Yahoo->
<p style="background:red;color:white;font-size:50px;">You are using Yahoo or AOL</p>
<!yahoo-->
Outlook.com (must be placed in a style block in the body, not in the head)
.olm-fragment-custom .your-class-name {
/* Replace this comment with your styles */
}
I have HTML template completely written with div, a, img, button elements with inline CSS styling. It renders perfectly in HTML editors but not in Email clients. Should it be completely written in table form for Email clients? Here is my code:
Look it on JSFiddle
I believe your particular question is dependent on which email-client you are targeting. It would be helpful if you could specify which email-client you are looking to use, as well as which parts of your html are not working, because certain email-clients may not support certain parts of your code.
For example, as defined here,
Outlook has the following problems for rendering HTML:
Outlook does not “understand” HTML bulleted list tags
Outlook uses Times New Roman as the default font
Outlook may add a page break to an email if it exceeds 1800px
Outlook cleans up paragraph and margin spacing
Outlook does not support background images
Which you may be able to fix by using specific techniques, such as, as you mentioned, wrapping with tables. I found a link here that may be helpful if you are trying to resolve the rendering on Outlook.
If there is another specific email-client you need to target, there should be posts on stack overflow or on the web for resolving them as well.
Good luck!
You do have to use tables in email HTML and then use CSS and formatting to mask it. Here's a handy guide you can use for email HTML.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
When implementing an HTML template that will be sent in an email, what should I know? For example, I know most email clients do not download images by default. How do you get around that? What are other css/html implementations that are not supported?
The first thing as a rule of thumb is: When you code HTML emails, code like you're back in the 90s. That is: Table layouts!
Wrap everything in a Table widh
border="0" cellspacing="0" cellpadding="0"
CSS is supported in some mail clients, others fitler it completely. Some clients only allow inline-styles, not style tags. So it's best to still use <font> tags for text styling and the deprecated bgcolor attribute, and so on. Padding/margin around elements should not be generated using CSS padding and margin, but rather by using empty table cells that include a transparent 1x1px gif. Make sure to apply the height to the img tag as well as the td and if you really want to make sure, also the tr tag.
Things are getting better and better, with Gmail recently making changes that allow media queries for responsiveness, but that has not rolled out globally yet.
So with media queries not (yet) working everywhere and most people using mobile devices nowadays, it's not a bad idea to use a "mobile-first" approach and use media queries on larger displays to extend the layout. For Outlook, you can use conditional comments (as it doesn't support media queries either) to achieve the same:
<!--[if mso]>
<style>/* style block will only be used in MSO */</style>
<![endif]-->
where you are also able to target specific Outlook versions, for example the current Windows 10 Mail app is mso 16. You can use lte/gte/gt/lt just like in conditional comments used for old IEs in earlier times.
Speaking of Outlook: It's also a pain in the ... eye in some other areas. To force line-height and prevent some unwanted spaces, there are MSO-specific styles like mso-line-height-alt:0; and mso-margin-top-alt:1px;, I recommend reading up on these as well.
For column layouts, do not use float, but align="left" on each table that represents a column, except for the last table in a "row" (because that will cause problems with tables floating off the grid in Thunderbird).
In my experience, at least if you're starting a template from scratch, it's a matter of building, testing in clients (webmail, desktop and mobile devices), fixing, doing research about some client-specific things that don't look the way you'd like them, trying out some own attempts to fix it, and testing all over again.
Email clients and rendering engines
Email clients use different rendering engines to render HTML emails:
Apple Mail, Outlook for Mac, Android Mail and iOS Mail use WebKit
Outlook 2000/02/03 use Internet Explorer
Outlook 2007/10/13 use Microsoft Word (yes, Word!)
Web clients use their browser’s respective engine e.g. Safari uses WebKit, Chrome uses Blink
Update November 2016: Just recently Google announced support for embedded CSS and media queries in Gmail. This is HUGE for the email development industry. Now, as of September 2016, Gmail will support a slew of CSS properties which makes template development a lot easier for Gmail.
Litmus has a handy website dedicated to the current email client market share, based on their own internal stats (~1 billion emails).
font: http://www.leemunroe.com/building-html-email/
I suggest to you use and test these ones:
https://github.com/TedGoas/Cerberus
http://foundation.zurb.com/emails.html
http://litmus.com/
https://www.campaignmonitor.com/
I hope this helps you.
You can't link any external stylesheet, You cant use floats, some clients ignore background images. Your should check out foundation for email if you wish to use good looking html emails in your projects that most clients support. There are several default templates available that you can use or you can build your own custom designs.
There is a lot you need to know, but a few big ones that comes to mind are:
Use table based layout
Use HTML4 syntax
Use CSS2 syntax
Use inline css (style=) and do not include a style tag in the head
Use alt text for all images and use a background color as a fallback when the image hasn't been downloaded yet.
Those are just a few pointers, but I agree #Joseph Marikle, refer to the link he posted.
I am working on HTML Emails and facing one issue, I have style tags defined in the section.
Outlook displays this email message with the required styling but Gmail doesn’t. This is because Gmail’s Preprocessor removes the styles contained in section.
Seems Inline styling is the only option to work with Gmail but it is not affordable because I require css styles applied to and and I have about 9000 table rows, 6-7 columns. So bunch of extra text will get generated if I go for inline styling with might exceed the size limit of email clients. Is there a way to figure out how can we achieve both i.e. not exceeding the size as well as proper rendering of message in Gmail.
Inline styles are the only option for Gmail.
Have a look here: https://www.campaignmonitor.com/css/
This is also a good resource: https://litmus.com/blog/understanding-gmail-and-css-part-1
As noted there:
Commonly stripped elements include JavaScript, object and embed tags,
and Flash. Gmail goes one step further and strips out both the head
and body tags, as well as any style tags in an email.
and:
The quickest way to insure your email campaign renders properly in
Gmail is to place your most important styles inline.
I am wondering if shorthand CSS coding is allowed for HTML Emails.
I know the CSS allowed is very limited but I know padding for example is allowed but would this be allowed:
padding:0 4px 0 6px;
The CSS that is allowed in an email is what the receiving email client understands. There are many different email clients. Not all of them even render HTML email (though virtually all do these days), but even where they do render HTML, their rendering engines will all be different from one another, in the same way as web browsers. But unlike web browsers, people don't always change their email client if they're not happy with the way it renders.
So you should expect your email to be read using virtually any kind of email program, including ones which don't render HTML at all, and those which render it, but using an IE4-vintage rendering engine.
That said, I would expect virtually all email clients to correctly interpret the CSS padding style.
You may get some with quirks-mode box models, which will cause your box sizes and positions to be wrong, but they should still interpret the padding correctly within their own set of rules.
One thing I would say is that you should ensure all your CSS code is embedded in the HTML. Put a big <style> tag at the top of your document, rather than a <link> tag with an external reference. The reason for this is that 1) some users may view your email when they're offline, in which case they won't be able to load an external stylesheet, and 2) some email clients may be set to block loading external files from within an email for security reasons, even if the user is online. If your styles are all included in the main body of the email, this won't be a problem. (you may still have the same issue with graphics, but that's a whole different topic of discussion)
I have never had a problem doing 'shorthand' like that, so long as all of the values are provided.
Technically, padding:0px 4px; should work such that top & bottom are 0, and left & right are 4, but not all email clients will honor that (I'm talking to you, Outlook 2007/2010!) so you need to include all four for margin, padding, border etc.
In case this is still of interest I have been looking into this lately. Some mass mail company clearly state that some applications like font (at least) are not rendered well on some email clients.
http://www.campaignmonitor.com/resources/will-it-work/guidelines/
Actually after reviewing a few email sources of templates (Mailchimp, Campaign Monitor, etc) they all consistently avoid them so my conclusion so far is been to do so as well.
In any case more important than shorthand or not is the fact that most CSS styles need to get "inline" of elements as many (Gmail included) ignores them if defined on the head.
As a simple solution I tend to use basic styles on the body element and on a containing table surrounding the content (as body styles also get removed by some clients).
In a simplest form you can set styling for each element like this:
<p style="padding:0 4px 0 6px;">your contents</p>
Yes.
And, as with any "webpage", what the user actually sees is completely up to the "browser" (or HTML-capable email client).
You could have simply tried it to find out.
Also, I recommend not being obnoxious by splashing graphics and colours all over emails. :(