HTML for Email October 2021 Release
Summary
This article provides detailed technical information about the HTML for Email 3.0 release. Read on for information on specific changes and sample code for use in your test environment.
Overview of Benefits
Reduced Gmail Clipping
Our average exported HTML data footprint size has decreased roughly 50% over previous builds. This is a critical improvement, as messages larger than 102 KB will be "clipped" by Gmail. File sizes change based on the quantity of layout and content elements. Only longer messages are affected by this issue.
In our test sample, around 25% of the messages were "at-risk," meaning they parsed with a file size > 102KB. With HTML for Email 3.0 applied to the same sample, this at-risk percentage dropped to around 1%. In general, the reduction in file size ranged between 35% and 72%. This indicates that the size reduction benefits for a specific email message will vary based on its content and structure.
These findings are based on testing over 600 designs created from our templates. We also tested using a set of problematic messages shared by our customers.
More Readable Markup
The markup changes that reduce the HTML output size also allow for cleaner HTML code that is easier to explore. This enhanced readability will assist with post-processing automation tasks, manual tweaks, and troubleshooting. In essence, the components are easier to locate.
Same or Better Rendering
HTML for Email 3.0 delivers the same email client compatibility we have focused on from the start. Our goal is to ensure correct rendering in the most popular email clients. This latest release resolves some common rendering issues in Outlook and other email clients.
Faster Load Times
-
Improved response time, almost 8x faster HTML rendering from JSON
-
Optimized to support heavier workloads, minimizing potential errors during peak load times
Description of Changes
Code Compression
HTML for Email 3.0's main purpose is to provide a more compact markup format. This improved compression generally optimizes compatibility across email clients.
To achieve this, we migrated the code structure from a DIV-based fluid hybrid design technique to a table layout. This minimizes the number of conditional comments and CSS media queries.
Example of uncompressed code:
<table>
<tr>
<td>Hello Word!</td>
</tr>
</table>
HTML for Email 3.0 achieves compression by removing whitespace between tags. This allows us to present the fewest possible lines of HTML. To ensure MS Outlook compatibility, we also limited the number of characters per line to 500.
Example of compressed code:
<table><tr><td>Hello Word!</td></tr></table>While the code is less readable to the human eye, this step reduces the size of exported HTML files by an average of 20%.
Disabling Compression
We recognize that some use cases require human-readable HTML. This uncompressed code may be helpful for post-processing tasks or troubleshooting customer issues. Compression can be disabled in both the editor and the CSAPI calls by using specific parameters.
Disable Editor Compression
Add the following parameter to your configuration:
beautifyHtmlEnabled: true,
The onSave and onSend events will now return properly indented, human-readable HTML with one tag per line. See examples below.
Disable CSAPI Compression
Add the following parameter to your JSON request body:
beautifyHtmlEnabled: true,
Example request:
{
"beautifyHtmlEnabled": true,
"page": {
...
}
}
Content Block Markup
Content blocks have been re-written with conciseness in mind.
Examples
Divider Content Block
<table class="divider_block" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0; mso-table-rspace: 0;">
<tr>
<td style="padding-top:10px;padding-right:10px;padding-bottom:15px;padding-left:10px;">
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="mso-table-lspace: 0; mso-table-rspace: 0;">
<tr>
<td class="divider_inner" style="font-size: 1px; line-height: 1px; border-top: 1px solid #BBBBBB;"><span></span></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
Image content block
<table class="image_block" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0; mso-table-rspace: 0;">
<tr>
<td style="width:100%;padding-right:0px;padding-left:0px;padding-top:5px;">
<div align="center" style="line-height:10px">
<img class="big" src="https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/BeeTestingMachineV3/HelloImBOB/puppy1.jpg" style="display: block; height: auto; border: 0; width: 500px; max-width: 100%;" width="500">
</div>
</td>
</tr>
</table>
Optimizations
BEE HTML for Email 3.0 replaces transparent dividers with structural padding. This removes the need for extra HTML elements to support the desired layout.
A Simpler and Friendlier Markup
New CSS classes
When uncompressed, our new HTML format is more readable. This makes it easier to “hook" to specific message components during post-processing operations. To help with this, we added specific CSS classes to identify the code structure.
Additional classes may exist to handle specific settings, e.g., “Hide on mobile” or "Stacked rows".
Version Number
It is important to know what version ofHTML for Email a given message is using. This may be challenging when the version 3.0 code is already uncompressed. To determine which version of HTML for Email you are using, look at the first line of the exported HTML file.
<!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Code Examples
See HTML for Email 3.0 examples below.
| Message Thumbnail | HTML for Email 3.0 | Uncompressed version |
 |
Download ZIP | Download ZIP |
Comments
0 comments
Please sign in to leave a comment.