Email Tools

• About
• Example
• Example Source

//assets.euractiv.com/email-tools/builder.php

<?php

$url = 'https://assets.euractiv.com/email-tools/builder.php?' . http_build_query(array (
  'api_key' => '-private-',
  'source' => 'https://assets.euractiv.com/email-tools/examples/01-builder/email.html',
));
$result = json_decode(file_get_contents($url), true);

''

<pre>
&lt;?php

$url = 'https://assets.euractiv.com/email-tools/builder.php?' . http_build_query(array (
  'api_key' => '-private-',
  'source' => 'https://assets.euractiv.com/email-tools/examples/01-builder/email.html',
));
$result = json_decode(file_get_contents($url), true);

</pre>
<p><code>$result</code> now contains:</p>
<pre>''</pre>

Test a page in development

To see what a page you are working on will look like when converted to EMail html, upload it online somewhere and enter the URL below. The app will download and format it, and show you how it displays.

Log in to use the email template tester function.

Limitations and quirks

Inline vs Head styles

Almost all CSS will be applied inline. There are two ways to force CSS rules into style tags in the document head:

• Add a scoped="scoped" attribute to the style element. These will be preserved as-is, although the scoped attribute will be removed.
• Wrap the ruleset in a media query. All media queries will be preserved in the document head.

Padding.

Padding does not work reliably in email. If this tool finds any padding declarations, it will be added to the element's margin. To implement pseudo-padding, you need to add a wrapper element and apply the padding to the inner element as margin.

CSS Specificity and !important do not work

CSS rules will be appied in the order they are encountered, not by specificity. For example, consider this ruleset:

.white {background-color: white;}
div {background-color: grey;}

In a browser, an element div.white would have a white background. In this tool, it will have grey background. In practice, this limitation does not cause too many problems since CSS is usually written more or less in order of specificity, but it can be a source of unexpected results.

Table cell margin/padding.

Padding and margin on table cells (td) does not work reliably in email. Cell padding should be set with the cellpadding attribute on the parent table. As a convenience, the application understands a non-standard border-padding css property on tables that will be converted to cellpadding.

Media queries and device targetting

Many devices can be targetted with media queries. Some useful queries include:

/* generic mobile */
@media only screen and (max-device-width: 480px) {}

/* tablets */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {}

/* High density (hdpi) iPhones with retina display */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {}

/* High density (hdpi) android */
@media only screen and (-webkit-device-pixel-ratio:1.5){}

/* Medium density (mdpi) android */
@media only screen and (-webkit-device-pixel-ratio:1){}

/* Low density (ldpi) android */
@media only screen and (-webkit-device-pixel-ratio:.75){}

Targetting Outlook and IE mobile can be done with conditional comments, which will be preserved as-is in the resulting email. A conditional comment would look like:

<--[if {expression}]>
    <style type="text/css">
        /* MS-specific styles here */
    </style>
<![endif]-->

Some useful expressions:

• [if gte mso 9]: Outlook 2000 and above
• [if (gte mso 9)&(lte mso 11)]: Outlook 2000-2003, using the IE6 rendering engine.
• [if (gte mso 12)&(lte mso 15)]: Outlook 2007 and above, using the Microsoft Word rendering engine.
• [if mso 16]: Outlook 2016 and the mail reader app on Windows Phone 8 and 10.
• [if IEMobile 7]: Older windows mobile

You must log in to use this resource.

Test a page that you are developing against this email.