Office365 outlook mail HTML email render

Question

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

Answer 1

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.

Answer 2

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.