heml
heml copied to clipboard
SparkPost
wrong formatting on clients
Hi,
Thank you for heml ! Email html is problematic and your work will certainly help a lot of people !
I am trying to use heml for formatting https://my-netdata.io (https://github.com/firehol/netdata) HTML emails.
I found a few formatting discrepancies among email clients, so I thought I should let you know.
The key problem is MS Office Outlook (check below). All the others are just imperfections.
Keep in mind I just found heml today, so please be gentle if I did it the wrong way.
Click to see my heml file
<heml>
<head>
<subject>badhost needs attention - inbound packets dropped ratio - net_packets.eth0</subject>
<style>
body { background: White; }
h1 { color: Black; }
</style>
</head>
<body>
<container style="background: #eeeeee; padding: 0.5em;">
<container style="background: White; color: Black; padding: 0;">
<container style="background: #dddddd; color: Black; padding-left: 0.5em; padding-right: 0.5em; width: calc(100% - 1em);">
<p align="right">netdata alarm notification</p>
</container>
<container style="background: Orange; color: White; padding-left: 0.5em; padding-right: 0.5em; width: calc(100% - 1em);">
<h2 align="center">
badhost needs attention
</h2>
</container>
<container style="background: White; color: Black; padding: 0.5em; width: calc(100% - 1em);">
<container style="padding: 0;">
<h3>
inbound packets dropped ratio = 0.14%
</h3>
<p>
the ratio of inbound dropped packets vs the total number of received packets of the network interface, during the last 10 minutes
</p>
<container>
<row> </row>
<row>
<column large="6" small="6">net_packets.eth0</column>
<column>eth0</column>
<column>WARNING</column>
</row>
<row style="color: grey; font-size: 0.7em;">
<column large="6" small="6">chart</column>
<column>family</column>
<column>severity</column>
</row>
<row> </row>
<row>
<column large="12" small="12">Sun Oct 29 12:19:16 EET 2017</column>
</row>
<row style="color: grey; font-size: 0.7em;">
<column large="12" small="12">date</column>
</row>
</container>
<container>
<button href="https://registry.my-netdata.io/goto-host-from-alarm.html?host=badhost&chart=net_packets.eth0&family=eth0&alarm=inbound_packets_dropped_ratio&alarm_unique_id=1499830026&alarm_id=1499800300&alarm_event_id=2047">view netdata dashboard</button>
</container>
<container style="font-size: 0.83em; color: grey;">
</container>
<hr style="color: lightgrey;" />
<p align="center" style="font-size: 0.7em; line-height: 1.3em; color: grey;">
The source of this alarm is line <code>37@/etc/netdata/health.d/net.conf</code>
<br/>
(alarms are configurable, edit this file to adapt the alarm to your needs)
<br/> <br/>
Sent by netdata, the real-time performance and health monitoring,
<br/>
running on <code>box</code>.
</p>
</container>
</container>
</container>
</container>
<container>
<marquee>badhost has 4 critical and 2 warning alarms 💌</marquee>
</container>
</body>
</heml>
heml editor
This is what the heml editor shows:
gmail
Perfect. Marquee does not roll, but it shows up nicely.
outlook (MS Office Professional Plus 2016)
The main problems are:
- sizing of containers is inaccurate (note the white space on the sides of the orange container)
- tables, buttons and marquee fonts have been reset to Times and black.
-
line-heightseems to be ignored.
office 365 web access
Perfect! Even the marquee rolls!
evolution 3.24.6
Almost perfect. It seems to ignore font sizes in style.
thunderbird 52.4.0
Almost perfect. It seems to ignore font sizes and colors at the tables.
Apple iOS 11.0.3 mail
Seems perfect! Even marquee rolls.
Outlook for iOS
Almost perfect! If seems to ignore completely the empty lines at the table (i.e. <row> </row>).
btw, to send the emails, I used the HTML generated by the code tab of the editor (just in case the editor is not up to date with the repo).
This is amazing feedback, thank you! HEML is still in its early days so there are definitely kinks to be worked out.
I'll dig into this on Monday 👍
At the moment the editor is at the same point as the repo. Definitely gonna try to keep that up.
This is a wonderful project! However, I get similar formatting discrepancies, specifically with Windows 10 Mail. This is what I see in the online editor preview:
And this is what I get in Mail:
I pasted the code from the "Code" tab in the editor straight into Mandrill; I'll try again running that through Mandrill's own inliner and see what happens...
I can confirm that running it through Mandrill's inliner changes nothing at all, which is good, of course. Saves one more step. :)
Thanks for double checking with that. You shouldn't need to run any external inliner, so that's good it didn't help, I guess 😉 Can you share the HEML you used to generate that email?
Unfortunately not, I made so many changes since then, and now I've rebuilt the template in MailChimp's own editor, which allows export to Mandrill, and, while not perfect, it's a lot more like it should be...
No worries! I'll see if I can find where that rendering issue is stemming from. Thanks for pointing it out!
