HTML for Email 3.0 Technical Notes
Summary
This article provides detailed technical information about BEE HTML for Email 3.0. Read on for information on specific changes and sample code for use in your test environment. For a more general description of this release, please see this article.
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
These improvements apply to the entire system of APIs that we make available to developers, including the BEE Content Services API.
Description of Changes
Code Compression
BEE 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>
BEE 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 beeConfig:
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.
Consider this simple two-row design:
This is the basic structure of the message with BEE HTML for Email 3.0:
<!DOCTYPE html>
<html>
<head>...</head>
<body>
<table class="nl-container">
<table class="row row-1">
<table class="row-content">
<th class="column">
<table class="image_block">...</table>
</th>
<th class="column">
<table class="heading_block">...</table>
<table class="text_block">...</table>
</th>
</table>
</table>
<table class="row row-2">
<table class="row-content">
<th class="column">
<table class="button_block">...</table>
</th>
</table>
</table>
</table>
</body>
</html>
Please note: this is a simplified code version. Considerable portions are missing.
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 of BEE HTML 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 BEE 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 BEE HTML for Email 3.0 examples below.
Message Thumbnail | HTML for Email 3.0 | Uncompressed version |
Download ZIP | Download ZIP |
Activating BEE HTML for Email 3.0
If you are currently using Beefree SDK, you can enable HTML 3.0, our new version, in your account at developers.beefree.io. We strongly recommend doing this in a development instance before using it in production. This is particularly important if your application applies any postprocessing to the HTML, as the general structure and tag syntax have changed.
The new version is enabled in new instances of the SDK by default. You can disable it at any time to revert to the previous version.
The activation widget is available in application details:
You will be asked to confirm the version change. Again, be sure you have tested thoroughly before applying to your production environment!
Activation Window
-
Test your message creation workflow. Identify any potential issues that occur due to the markup change. For example, a post-process may append an attribute to a markup element that no longer exists.
-
Report any issues that you cannot resolve to Beefree SDK support so we may troubleshoot them.
-
Enable BEE HTML 3.0 in your production instance.
-
Run your workflow in production.
API Performance
The server component has been re-written not only to generate better, lighter HTML but also to increase performance and stability.
What's new
This new architecture grants both performance and stability improvements. Response times are faster by a factor of 75% (average) and 60% (median). Data throughput is also slightly improved: 12.13 vs 11.66 transactions/sec.
Comments
0 comments
Please sign in to leave a comment.