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
Related
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.
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.
I am greatly confused about designing an email template for a mailchimp campaign. I want to know if I can use a div with a class of "Container" on my email template. Is using div tags supported by all mail clients? I am using DIV only for the container but in the inner part of the template I have used table, tr and td tags. Please let me know.
Thanks.
You can use div, however tables are supported more consistently. If you try to go the div route, you'll find some of your CSS will fail.
Also, by going with tables, it opens up the old school html attributes that only work in tables. These include align, valign, bgcolor etc, all of which are 100% supported, while their CSS equivalents have partial support.
On a side note, here are all the resources you will need to get started in html email.
As of April 2017, yes, you can use <div> tags in email. Outlook was the only major email client that didn't support them.
See https://github.com/rodriguezcommaj/principles-of-email-design and https://www.sendwithus.com/resources/templates
There is no specifications for layout using table-less nor tables. However, using tables is the preferred way as it renders all at once. This aligns with how email templates render; while div's render separately. If you use div's include your css inline to the template as some clients do not support external css.
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...
I have a html newsletter page. I need to send it to the given mail id. In Outlook , I'm unable to see the my styled html page but in browser css and inline style works perfectly. So why in Outlook does not work inline or Css style?
To get good cross-compatibility it's wise to go with last centuries web practices.
Use tables for structure, style inline, use pixel measurements and be prepared for images to fail.
These basics provide robust results in most clients.
Its best to also avoid background images since these wont work either in outlook.