I'm working on emails that have to be both responsive (mobile / desktop) and friendly across a wide range of clients. For the most part we have pretty simple designs but there are a couple of places I'm getting bogged down.
I'm honestly at the point where I'd rather just create a totally separate MS-Word / Outlook-friendly design, using Outlook as the creator — it'd be easier and faster than trying to develop the whole d*mn thing for every client. Does anyone know if there's a way to hack mime types — so Outlook and related clients will open the outlook-friendly part, and other clients will open the HTML part?
No need to hack mime types, just wrap your outlook version in
<!--[if gte mso 9]> outlook tables <![endif]--> and your non outlook version in <!--[if !mso]><!--> other tables <!--<![endif]--> and send the whole thing as one html file.
You can do things this way, but i'll warn you that even outlook's html email tools don't always show up right in outlook. I'd recommend biting the bullet and learning how to make desktop code that works in the MSO versions of outlook ('07, '10, '13).
Pro tip for outlook compatibility: use padding on <td>s for spacing and nest tables when padding-top gives you issues in outlook 13.
Related
I see the moz-do-not-send="true" attribute in the HTML of emails all the time. Whenever I send links in emails with Thunderbird, it adds it to the <a> tag. What does the moz-do-not-send="true" attribute do?
When I looked it up, I couldn't find a clear answer, but instead suggestions to use it when writing email HTML with no explanation of what it does.
Since at least 2004, Thunderbird has been designed by default to include the full image file contents of images inserted in composed emails. If moz-do-not-send is absent or false, then upon sending the email, Thunderbird downloads the image and attaches it to the email.
The moz-do-not-send attribute is a signal used internally by Thunderbird to tell it not to include the full image file contents, but instead to simply link to the external image. It's a proprietary attribute used internally by Mozilla-derived software; it has never been part of any HTML specification.
This is best documented at MozillaZine here. You can see details of the use of this attribute in the Thunderbird source repository here.
Cant add a comment, due to the 50 reputation restriction.. Just need to alert to the fact that the checked "solution" is a bit off-topic. All the answers here refer to <img> tags which is not what the OP asked about. The question refers to anchor tags. ie <a moz-do-not-send="true" href="https://blah.blah">blah.blah</a>
So what does moz-do-not-send do for an anchor in an email?
It's common knowledge that Outlook uses Word to render emails. It's also fairly widely known in the HTML email community that Outlook will render a custom font as Times New Roman.
Currently, I hide my font statement from Outlook using conditional statements, and then set Arial as the font. But it occurs to me that Word can use custom fonts, so does anyone know why Outlook can't? And does that mean it can but we haven't worked it out yet?
Microsoft Word and Outlook can display any font that's installed on a system, but Outlook cannot display a remotely referenced font. Outlook can display any font, custom or not, as long as it's installed in a user's local system. But it cannot display a non-system font that's referenced on a remote server.
Let's use Open Sans as an example. Open Sans doesn't come pre-installed on most computers, but it is freely available to download and install from Google Fonts. If you send an email with Open Sans in the font stack and someone with that font installed on their system opens it in Outlook, Outlook will display Open Sans.
However Outlook is not able to display remote fonts. So if a user above does not have Open Sans on their system, Outlook is not able to reference a copy of the font on a remote server to display it.
<!-- Outlook doesn't support this -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
Not only does Outlook not support remote fonts, but it chokes on the reference above and display Times New Roman instead (as you mention). This can be fixed by placing the font reference inside a tag that Outlook ignores, like so:
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. -->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<!--<![endif]-->
I hope this helps explain how fonts work in Outlook!
I'm ready to explode with frustration with a HTML email signature I am building, it's fine when attaching the signature using Thunderbird, but sending from outlook 2010 (which my client uses to send email from) chucks up a load of issues - here's the two main ones:
The '-webkit-text-size-adjust:100%' / '-webkit-text-size-adjust:none' doesn't seem to work, which means the font formatting on iphone / ipad is oversized and looks real ugly.
When sending from Outlook 2010 and reading in Hotmail (which is now actually 'Outlook', which makes this issue even more annoying) - it whacks a load of gaps between lines of text. I'm aware of the 'display:block' to get rid of gaps, but that only applies to images I suppose?
Any help would be hugely appreciated! Thanks
I am developing a web app that sends out emails. Currently, all emails have a HTML part.
Questions:
Is it important to include a text part also?
Do you include both?
Is just removing all the tags from the HTML message and adding a few line breaks good enough to create a text part from the HTML part?
Thanks, Kevin
Is it Important to include a text part also? It's a best practice to provide a plain text version of the email. However, in my opinion and in this day and age, I would guess that it is not such a big deal to leave it out. However, if you know more about your recipients' email clients (eg: if you're sending the emails in a corporate environment and everyone uses a particular email client), then you can determine how necessary it really is.
Do you include both? The .net framework (which I use) provides an AlternateView class (MSDN) that allows you to easily specify copies of an email in different formats. It makes things very easy to include a plain text version of the email. Perhaps you can find something similar in apache/php.
Is just removing all the tags from the HTML message and adding a few line breaks good enough to create a text part from the HTML part? Technically, yes but be VERY CAREFUL here. A complex HTML layout that has been converted to plain text will look absolutely terrible if all you do is remove HTML tags and pile the content together. It really depends on your content and how much you can do to manipulate said content. Also, take a look at Campaign Monitor'ssuggestions for formatting plain text emails.
One final word of advice for you HTML emails to test, test, and then test some more. When you're finished testing, test again. HTML emails will render differently in different email clients and, if some of your recipients are using Microsoft Word 2007/2010 then you can forget about web standards. I urge you to take a look at Campaign Monitor's Guide to CSS support in email.
We are currently sending our emails as HTML but it is not rendering properly on the blackberry. It add's extra blank lines. I assume that is because of the tag. Anyways when sending them as plain text they render correctly, but now the user wants some of the keywords to be bolded. Would rich text format be viable? Should it render properly in the blackberry and if so what would be the syntax for a new line \n.
Note: The HTML emails render correctly in Outlook.
We have had pretty good experiences with html mails on BB 4.5 and up (although not perfect). Try using paragraph tags instead of the new line character.
But you may need to fiddle around a bit with the email format to get it looking great.