I am using office365 email at my workplace to access emails. I am required to generate a dynamic newsletter which will be developed in HTML, However, I cannot seem to figure out how to add that HTML page into the email, pasting plain HTML doesn't seem to work as outlook does not render that.
I found a work around after some research, which is to open the html page on a browser, simply copy the content using CTRL + A and paste onto email editor, that seems to add the html but this is not a proper solution!
The aim is to write HTML, (Have done that) and add the HTML page into the outlook email. Any help/suggestion is highly appreciated
Both email clients and web browsers can display HTML/CSS, but they have different ways of doing so. So if you copy/paste an HTML page, chances are it will not display the same way in an email client like Outlook365.
Email layouts need to use <table>s for layout instead of <div>s. Emails also only support a small of CSS rules that need to be inlined.
Email code looks more like this:
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td valign="top" style="vertical-align: top;background: #aaaaaa;">
<span style="color: red; font-size: 12px;">text</span>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td valign="top" style="vertical-align: top;">
<img src="full path to image" alt="alt text" width="50" height="50">
</td>
</tr>
</table>
If you rebuild your email like this, it should display better in email clients like Outlook365.
First of all please look at this list of supported CSS in various email clients.
Than make sure you also have CSS inside email. Best way is using inline CSS:
<div style="color: red; font-size: 12px;">HALO!</div>
When pasting make sure you are pasting it as HTML (don't know if you can do it in all email clients). Otherwise it will encode your pasted text and sending it will expose all HTML markup as text.
Related
I'm having trouble getting my HTML email template to render properly when it is sent from Mailchimp to Outlook 2007, 2013 and 2016. The thing is, when I upload the HTML directly for testing on Litmus, the email renders fine across all Outlook previews. When I send the test email from Mailchimp to Litmus, the email looks out of proportion in Outlook 2007, 2013 and 2016 (for Win7).
Is Mailchimp doing something with my Outlook-targeting conditional comments, and how can I work around that?
My conditional comments seem to work sometimes to fix the width on some elements of my MC email (you'll see in the screenshots, the textbox is the right size for the top card but not on the second one). But for the life of me, I can't figure out why one works and the other doesn't, I'm writing the same comment for both.
Screenshots:
when Mailchimp sends the email to Outlook (what went wrong)
when the HTML is rendered for Outlook directly (what it's supposed to look like)
Conditional comments:
I've put in Outlook-specific conditional comments like so:
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<!--BODY TABLE-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
...
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
Thank you for the help! Really appreciate it.
I feel your pain, I've had the same issue for templates I was making for a client. I wanted to make the icons retina proof and let the client upload any image size he'd like. Unfortunately after many many hours debugging en searching the web, I read the following on a MailChimp post:
Outlook doesn’t recognize the HTML that constrains images. This means
that if you use HTML to resize an image uploaded to a campaign or
template, it may display at the original size in Outlook. Be sure to
resize your images before you upload them to MailChimp, or use our
built-in image editor.
source: MailChimp Knowledge Base
I didn't really believe that this could actually be true so I kept trying to constrain the images. I've put fixed width on the img, td, tr, table.. nothing helped.
Sadly I can't really explain what happens, hopefully the link to the MC article gives you a better view on it.
But my best answer is to set a max-width & width to your img and td anyway. And tell your client to resize the images to the allowed size. Setting a max-width and width will also display the #px when hovering over the editable image in your MailChimp editor. I also found out that when you do upload a bigger size, MailChimp throws a lil' warning.
If it may help in any way; see my code below that I used in my templates to make it fluid.
<table mc:repeatable mc:variant="Item with image top and CTA" width="650" cellpadding="0" cellspacing="0" border="0" align="center" class="full-table" style="width:650px;">
<tr>
<td style="padding:30px 20px 40px 20px;" bgcolor="#FFFFFF">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding-bottom:15px;max-width:610px;">
<img src="/images/img.jpg" alt="x" style="width:100%; max-width:610px;" width="610" mc:edit="article_image">
</td>
</tr>
</tr>
</table>
</td>
Are you using retina images in your emails? From experience I have found that outlook's, if they are given a big image, they display it at a big size if a specific width is not assigned to the img tag. Below is an example of a code i use for the images in my emails.
<img src="[IMAGE PATH]" width="" height="" style="width:px; height:px;display:block;" border="0">
Also can you post the img tag of the offending element so i can have a look at it better please?
Cheers
I receive emails from Behave Annual inviting me to events. Came across something very weird on their newsletter. All buttons and some portions of text had CSS hover effects. On mouse hover, the color would change.
From my understanding, Gmail stripped anything added to the <head> portion of a HTML email document. Upon Inspect Element, I found the hover effect style to be loading from the <head> portion.
This is the DOM -
<table width="250" cellpadding="0" cellspacing="0" border="0" align="center" style="margin:0 auto;border-radius:4px" bgcolor="#C012C9" lang="x-cta">
<tbody
<tr>
<td height="52" valign="middle" align="center" style="vertical-align:middle;font-size:18px;text-align:center;font-family:Arial,Helvetica,sans-serif,'Work Sans';font-weight:bold;letter-spacing:.08em"><img src="https://ci4.googleusercontent.com/proxy/w_W_24g8lpz0y_rVlaX7m8vTQNv1CXL00edUPLYMHSwY8oEtD7ns-a-IWxZsBcjHrrFffonr-da-qa-_vITS05DwmYTE_IIv-Q7Yv_3TyoMmH8fNTqnTIKUFS0hyMCD5dcH2JQVnr6VpmkrOH5tgMTI3YeRG=s0-d-e1-ft#https://assets.bounceexchange.com/assets/uploads/users/700/38798606b59c4fe750c8af1b3c0e0461.png" style="display:block;margin:0 auto;border:0;white-space:pre-wrap;text-align:center" alt="LOOK INSIDE" class="CToWUd">
</td>
</tr>
</tbody>
</table>
The CSS inside <style> in <head> is as follows
div.m1577254c07a8a7f6 * [lang=x-cta]:hover {
background-color: #c7dd40!important;
}
div.m1577254c07a8a7f6 * [lang=x-cta]:hover {
background-color: #c7dd40!important;
}
How are they able to acheive this?
Google has updated support this year in email clients and now more is possible:
Gmail & Inbox support a rich subset of CSS properties & media queries to help you ensure that your message is formatted the way you intended...
standard <style> tags can now be included in HTML bodies, eliminating the need to use inline styles. source
Though I haven't found this in a Google sources, it also seems that :hover is supported only for part of the users.
Image from https://emails.hteumeuleu.com/trying-to-make-sense-of-gmail-css-support-e88cd7995cea#.upjtbzcjm
It also looks like some hack to get :hover working exists too: https://litmus.com/community/discussions/1275-gmail-app-gmail-webmail-and-inbox-metrics
I've been trying to figure out if its possible for me to set an automatic reply that sends out an HTML formatted email. I need this to send out a fancy looking "We'll get back to you shortly" with images and links. I have the HTML code with me (with all headers and inline CSS), but I have no way to format the body of the email response as HTML.
Any ideas on how I can get this done?
I'm using Outlook Web App.
Thanks
You can use a library like swiftmailer http://swiftmailer.org/
Open up your text editor and get ready to start using tables. You're going to want to start out with something like this.
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table width="650" cellpadding="0" cellspacing="0" border="0">
<tr>
<!-- the amount of td you need -->
</tr>
</table>
</td>
</tr>
</table>
Of course you'll need to figure out the exact layout, but expect to do a lot of table nesting. There are also issues between different email clients concerning how it all renders. Make sure if you're making an empty table cell used for spacing, make sure to do something like this.
<td style="height: 10px; font-size: 0; line-height: 0;">&nsbp;</td>
Otherwise you'll get unexpected spaces in things like Outlook.
Campaign monitor has a lot of useful tips about building out emails, check it out here.
I am coding html email template , I did slice psd to html because of graphical work in template , now problem is that it looks perfect in my browsers but when I send it to my email id there are some problems that you can see in attached image
now this is <tr> with 3 <td> but problem is that there is gap between left blue image and logo right one is perfectly fine , code for this <tr> is:
<tr>
<td colspan="2">
<img src="left.jpg" alt="top_left" width="220" height="102" border="0">
</td>
<td colspan="2">
<a href="http://www.google.com">
<img src="logo.jpg" width="191" height="102" border="0" alt="Logo"></a>
</td>
<td colspan="3">
<img src="right.jpg" alt="top_right" width="200" height="102" border="0">
</td>
</tr>
Please let me know how I can fix it.
Also, make sure to always use this style on your images : display:block;
Some mail clients will do whatever they want with your code (Looking at you, gmail), and unless you specify that your images are rendered as block elements, it will add white spaces around those.
There are a couple of important fixes for gmail. Black links should always be colored as #000001 (gmail removes the black color on links, as well as on regular text for redundant content in conversations (It will turn this text purple when reposted unless you specify that the text color is #000001) ).
Also, make sure you use inline styling for your TDs height and width, sometimes the regular html value won't do.
Remove whitespace after a tag. Also make sure table have cellspacing, cellpadding and border set to 0. You might need to remove all whitespace in cells.
E-mail browsers are a mess. Much more then IE6 was ;-).
It may be an easier solution to just to use a single image if keeping the line together is important.
Unless you know what e-mail user agent each recipient is going to be using to view the e-mail, it is difficult to target them in the manner that you proposed. Each e-mail client may use a different renderer, causing them to display the whitespace incorrectly. There are times, when using older e-mail clients, that you will need to remove ALL spaces and linebreaks to get table-based formatting to display correctly; this means having all of the HTML on a single line.
Also, keep in mind that if your recipients are viewing the content in HTML5, the border attribute of the img element is obsolete; it is instead correct to add style="border: 0;" to the img element. You may want to try using style="margin: 0; padding: 0; border: 0;" on the table cells and rows.
Make sure that you have your table set to collapse as well, using
<table style="border-collapse: collapse;">
Im coding html newsletter and faced up with strange thing in gmail. Code:
<table cellpadding="0" cellspacing="0" width="700" height="122">
<tr>
<td valign="top" colspan="3" width="689" height="8"><img src="http://www.url.com/img/product_top_border.gif"></td>
</tr>
<tr>
<td valign="top" width="12" height="106"><img src="http://www.url.com/img/product_left_border.gif"></td>
<td valign="top" height="106" width="689">
some content
</td>
<td valign="top" width="12" height="106"><img src="http://www.url.com/img/product_right_border.gif"></td>
</tr>
<tr>
<td valign="top" colspan="3" width="689" height="8"><img src="http://www.url.com/img/product_bot_border.gif"></td>
</tr>
</table>
Gmail screenshot:
Screenshot from other email clients:
Any hints?
Your help would be appreciated.
It's a browser issue. When you put an image inside a table, the image should be an inline element, sitting on a text line. That means there will be space below it (for parts of a line of text that go below the baseline, ie. descenders) and GMail's rendering is ‘correct’.
However, in Quirks mode, as well as “almost standards” mode, an image that is alone in a cell behaves like a block instead of an inline element, so it doesn't get the extra spacing. It looks like the ‘other’ client is in Quirks mode, as it has reset the font size inside the table (a typical Quirks mode bug).
Normally you want to avoid Quirks mode at all costs, so you'd use Standards mode and fix up the img-in-table problem by setting CSS display: block or vertical-align:-anything-but-baseline on the <img> elements, or, better, dump the ugly layout-table and use some background images instead. However of course in a e-mail context your opportunities for styling are strictly limited.
So yeah, try setting style="display: block" on the images to try to make them display the same in Quirks vs Standards if you like, but be aware that this is the least of your problems when dealing with HTML mail. You will face much, much worse breakages than that. HTML e-mail completely sucks on every level; if you have any chance to get out of it, by just mailing a link to a proper web page, then do that.
In regard to the change of fonts, it somewhat seems like the 'other client' might show a non-HTML body and I think gmail supports HTML by default.
Have you set the content-data to be HTML?
For instance in c# you might need to set:
MailMessage mail = new MailMessage();
mail.IsBodyHtml = true;