The BEE editor will write HTML emails using a new technique that produces smaller messages. This should dramatically reduce the chances of "email clipping" in Gmail and Yahoo! Mail. Here is everything you need to know. If you have embedded BEE in your app, you will also find ways to test this change before it goes live in early March.
Updated HTML for BEE emails
On March 8, 2017, we released a major update to our HTML parser, which now produces state-of-the-art, thinner, better HTML.
When you use the editor, BEE saves your design into a JSON file. The HTML parser is the component that transforms that JSON file into ready-to-send HTML emails.
This was a major release, so we are quickly fixing issues that are being reported (we conducted extensive BETA testing, but some issues did not surface during the BETA).
- Fixed issue with spacing in MS Outlook
- Edited code to maintain button background color in certain email platforms that were not diplaying it
- Fixed issue with dividers (wrong width or position in Outlook)
- Full-width image shown on mobile when physical width is larger than column
- Fixed syntax issue in negative conditional statement (unclear if it caused issues)
- Lateral padding issue in Microsoft desktop clients
- Resolution of issue in Microsfot Web clients (e.g. outlook.com, Office 365)
- Images shown at 100% when width is bigger than column width on mobile clients
- Typo in "min-width" declaration (unclear if it was causing rendering problems)
Why this update: lighter, better HTML
One of the major reasons people use BEE for designing emails is the peace of mind that it provides with regard to how those messages will render in the inbox.
Gmail, as one of the most commonly used email clients, is one of the priorities for our team. That includes ensuring responsive behavior in the Gmail mobile app.
To achieve responsiveness in the Gmail app and other mobile applications, we adopted the fluid hybrid design technique (more on this).
Although this worked great in most cases, it did present a drawback: verbose HTML code that resulted in bigger HTML documents.
While the HTML used in email contains many nested HTML tables, the hybrid method introduced additional code, doubling the total message size in some cases. As both Gmail and Yahoo! Mail "clip" email messages that are larger than 102KB in size, this caused the content of some of the messages to be partially hidden in the inbox.
To give you an idea of what we are referring to, here is how a one column row with a simple text block was written in HTML using the fluid hybrid design technique. A total of 63 lines of lengthy code. Here are just the first 30... (click here to view the full HTML).
Easier and lighter code: modern HTML comes to the rescue
Until recently, email developers had to choose between coding messages that may be clipped by Gmail and Yahoo, and emails that are not responsive in the Gmail App, the most used email client on Android-powered phones.
As a result of this dilemma, many talented developers started looking for new techniques.
In particular, inspired by Rémi Parmentier's Fab Four technique, email coders were able to develop a new model that uses DIVs instead of nested tables to create fluid layouts, dramatically simplifying the final output.
The reduction in the HTML footprint is remarkable. Look at the same content mentioned above, rewritten using this new technique by BEE's new HTML parser (click here to view the full HTML).
Here is how the code has changed:
- 17 lines of code vs. 63.
- 2KB vs. 5KB (when saved as an HTML file).
- A much simpler HTML markup (*)
(*) Still too many HTML tags? Well, the HTML that BEE outputs is not hand-coded, but rather a structure that must work in many scenarios with any content that you may add, so we need a lot of fallback elements
Adding support for Microsoft email clients
Unfortunately, the code above cannot be used "as is" in Microsoft Outlook desktop or Windows Mail. These applications don't use an Internet browser to render the HTML, but rather the MS Word rendering engine, forcing the introduction of some additional code.
- Conditional statements to apply the correct BODY CSS reset.
- Conditional statements to add tables around content blocks.
- Negative conditional statements to hide some content.
- VML macros to build beautifully rounded buttons.
With this additional code in place, our sample HTML snippet becomes a bit more complex, but still much smaller than the original (click here to view the full HTML).
Here is a summary of the main benefits introduced by using these new HTML coding techniques:
- File size reduction (about 40% less HTML code for the same results).
- Message clipping much more rare thanks to the reduced file size.
- Faster delivery time thanks to the smaller file size.
- Buttons that are 100% clickable (the entire button, not just the text in the button).
- Display improvements in the most challenging email clients (IBM Notes, Outlook 2000/03).
Feature support changes
There are a few drawbacks, but they are far outweighed by the benefits. Drawbacks include:
- Background images don't display in the Outlook.com email client.
- There are multi-column display problems in some less popular webmail clients:
Sample HTML files for testing
These are some of our BEE Pro templates turned into HTML emails with the new parser:
You can use the sample HTML files listed above in your application to test sending some messages and confirm that there are no compatibility issues. Specifically, this is what you should be looking for:
- There are no differences between the received HTML and the starting code
- Additions (merge contents or other placeholder replacements) are correctly confined in the given container element
- Additions are not modifying the message layout
Please note that some applications split HTML messages into separate parts to facilitate code post-processing. In this scenarios, the final HTML is assembled during the sending process.
If this is your case, ensure that the following, new conditional elements do not create an issue. In particular, check that the following is true when the HTML is saved and sent by your application:
1. The HTML tag is wrapped with an Internet Explorer (IE) conditional structure. Get the code.
2. The BODY tag is wrapped with a Microsoft Outlook conditional structure. Get the code. Here is a preview:
Testing the new HTML parser
Would you like to test the new HTML parser with your application messages?
To help you with this, we published a public endpoint that can be contacted with Postman.
Download and import the Postman collection to start using it or apply the following settings:
- Request: POST
- Endpoint: https://parser-beta.getbee.io/api/nlparser?ispreview=false
- Body: message JSON with the options raw / JSON (application/json)
The response body should contain the HTML created for the provided JSON.
If you are testing the reduction in the size of the HTML file, please consider that Postman's pretty version of the HTML will be larger due to the formatting applied to it. Use the Raw response instead to get the true message size.