One challenging aspect of coding email templates that render correctly, across all clients, is the lack of support for CSS added in a <style> within the <head>. For example, Gmail's desktop web app disregards information in the <head> all together.
To make coding email templates easier, HubSpot coded email templates support a special style tag that gives designers the ability to write CSS that will be compiled and converted into inline CSS and will be added to the targeted elements. Any code added to a style tag with the ID of "hs-inline-css", will be added to the targeted tags.
For example, Microsoft Outlook will apply a default font-family to all text contained in <td> tags, unless you specify a font-family inline for that table column. The example below uses a "hs-inline-css" style tag to add a font-family to all the table columns in the template. Please note that any media queries should be included in a separate <style>, as they can not be made inline.
NOTE: The data-hse-inline-css attribute on a <style> tag in the Edit > Edit Head section of drag and drop template in place of hs-inline-css to achieve this same goal. In coded files, either method may be used (as long as there is only one style#hs-inline-css per template. You may have multiple style[data-hs-inline-css="true"] elements.
<!doctype html>
<html>
<head>
<style type="text/css" id="hs-inline-css">
td {
font-family: Arial, sans-serif;
}
</style>
<style type="text/css" id=data-hse-inline-css="true">
table {
font-family: 'Courier New', sans-serif;
}
</style>
</head>
<body>
<table style="font-family: 'Courier New', sans-serif;">
<tr>
<td style="font-family: Arial, sans-serif;">Column 1</td>
<td style="font-family: Arial, sans-serif;">Column 2</td>
</tr>
</table>
</body>
</html>
By James Zilch • listopadu 6, 2017
.png?width=500&height=500&name=DRAFT%20(4).png "DRAFT (4).png")