can anyone tell me what is MSO?. I mean right now I'm studying email template HTML and I did it on Gmail and it works fine but when it comes to outlook it becomes weird. Especially the image part and the size and everything is just mess up.
I read a few here and there, blogs or articles or website but it seems that they use MSO to code it to fix the outlook output email template. Is it right? Why do we need to use MSO to configure and how to use it actually and what is it for actually?
I'm not too sure on this part but it is much help if you can explain to me about the outlook part of code in HTML.
Here is 1 example I read on the website but not too sure about it.
https://jasemiller.medium.com/a-fix-for-outlook-image-issues-in-html-email-campaigns-b8dd1c8f7d16
Why does Gmail be easier than outlook to get the output for email template HTML?
MSO is an acronym that stands for Microsoft Office. In the email world, it usuallys refers to one of the followings:
Conditional comments. Using a special syntax created by Microsoft for Internet Explorer (supported up until IE 9) and then used inside Microsoft Outlook 2007 and above, you can create code that will only be available in the targeted versions of Outlook. For example, in the blog post you mention, they use an <!--[if mso]><![endif]--> conditional comment to create a table structure for Outlook only. You can read Microsoft’s documentation about conditional comments.
mso specific styles properties. Those are CSS properties created by Microsoft and only supported by Word’s rendering engine. They come with a mso- prefix. They can be a variant of well known CSS properties (like mso-border-alt that is an alias of border in CSS) or something completely unique to Word (like mso-hide). Here’s a list of all styles supported by Outlook including mso- properties.
The reason why Gmail might render your email better than Outlook is that the Outlooks on Windows (from 2007 to 2019) use Word’s rendering engine. And Word is not very good at rendering HTML and CSS. (In Can I email’s scoreboard, Outlook is ranked last why Gmail is currently ranked 22nd.) I wrote a detailed article last year to help make sense of Outlook’s rendering engine and I think it can help you.
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 have been reading on many websites that the layout for a HTML email should be structured with tables rather than using divs. What is the reason for this?
Because of lack of css compatibility with email clients listed at Email Client CSS Support. So your rules inside style gonna be ignored in Gmail for exemple, rather than table inline rules
Since Outlook 2007 (on Windows) emails with HTML are rendered using Word. Word doesn't have very good support for HTML and CSS so that's why you're stuck with tables for layout.
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007
I'm writing a newsletter campaign which I'm testing in a number of browsers, one of which is Outlook 2013.
I understand how to address specific issues (e.g. http://www.emailonacid.com/blog/details/C13/horizontal_spacing_issues_in_outlook_2007_and_2010) but what's frustrating me is that I'm having some difficulty understanding what markup is being generated. Currently I'm debugging this by adding background colours to my markup, which is somewhat helpful but not ideal. For example, I can add a background-color using the inline stylesheet for the <p> tag to see if Outlook is adding this kind of markup. The limitation of this is that I have to anticipate this kind of behavior and it can be unpredictable. Speaking from experience I suspect that Outlook is using proprietary markup/rendering (the Word rendering engine?) in this version of Outlook (e.g. see http://fixoutlook.org/). Please correct me if this is not the case.
What would be really helpful is the ability to inspect the markup that is being generated. I know that I can inspect the email source by going to Message > Actions > Other Actions > View Source, however this appears to be the raw source before it is garbled by Outlook. Specifically I don't see any of this when I inspect the source in this manner.
What I really want is some way to inspect the source of the email as Outlook is presenting it, e.g. something like the inspector that can be accessed by hitting f12 in many browsers. Does something like this exist. Otherwise, assuming that I'm correct about the garbling of the source (adding markup etc.) is there a way to view the source as Outlook is actually presenting it?