Updated HTML parser

Project updates are now published on our new, shiny BEE Plugin technical docs site. Check it out!

 

Quick summary

The BEE editor now generates HTML emails using a new technique that produces smaller messages (i.e. a thinner HTML footprint). This substantially reduces the chances of "email clipping" in Gmail and Yahoo! Mail. Here is everything you need to know.

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. It's one of the services at the core of the BEE system, used by all BEE products (Free, Pro, and Plugin).

Post-release updates

A changelog of post-release updates.

On August 31, 2017, we published an update that includes:
  • Improved compatibility for Microsoft Oulook mobile app (iOS/Android)
  • Responsiveness support for Samsung's proprietary email client (Android 7.0+)
  • Improved compatibility with the Libero.it and Fastweb.it webmail clients
  • Several minor improvements and bug fixes

 

On June 12, 2017, we released an update aimed at minimizing issues such as the one that was reported when importing into Constant Contact and other ESPs, which would misread the code and believe that it contained a duplicate HTML and/or BODY tag. If you had issues importing into another ESP:
  • Edit the message again in BEE Free or BEE Pro
  • Export the message
  • Import it into your ESP

 

On March 31, 2017, we released a small patch for the new HTML parser that addressed the following, known issues:
  • Fixed issue with spacing in MS Outlook
  • Edited code to maintain button background color in certain email platforms that were not diplaying it

 

On March 16, 2017, we released a small patch for the new HTML parser that addressed the following, known issues:
  • 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)

 

On March 13, 2017, we released a small patch for the new HTML parser that addressed the following, known 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 (smile) 

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.

Specifically:

  • 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).

Improvements summary

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.

 

Have more questions? Submit a request

Comments

  • Avatar
    Sergio M.

    Hi Jscharf, each emailing/sending platform handles the HTML differently. Not all ESPs work the same. If you can help us, please contact MaxBulk Mailer support or ask a developer (if you have one at your company) on what exactly it is in the BEE HTML code that's not supported in MaxBulk Mailer. Please also note that for customers on the BEE Plugin Free plan, customer support is limited at the moment. Thank you for the understanding.

  • Avatar
    Nigel Kent

    Hi, Since this update we can no longer import your generated files into Mailwizz. The imported file is empty apart from partial headers and empty body tags.

  • Avatar
    Ty Rocca

    Hi - Do the json templates listed here https://github.com/BEE-Plugin/BEE-FREE-templates still work?

  • Avatar
    Guillermo Padilla

    Hi, all the previous messages work correctly, the only thing that has changed is the HTML output when these JSON files are converted.

  • Avatar
    Ty Rocca

    In outlook images are getting shrunk - I have examples that I would like to share

  • Avatar
    Massimo Arrigoni

    Hi Ty, make sure that the HTML that is being sent by your application is identical to the HTML that is generated by BEE. Specifically, make sure that the HTML and BODY tags have the MSO conditional statements intact.

  • Avatar
    Massimo Arrigoni

    We updated the HTML that is generated by the BEE editor to minimize issues such as the one that was reported here when importing into Constant Contact and other ESPs, which would misread the code and believe that it contained a duplicate HTML and/or BODY tag.

    Please try exporting your email from BEE Free or BEE Pro, and importing it again into your ESP.

  • Avatar
    Massimo Arrigoni

    On August 31 we released an update that delivers significant rendering improvements on the Outlook mobile app (iOS, Android) and the Samsung proprietary email client (Android 7.0+). You can find details in the Changelog section at the top of the page.

  • Avatar
    Jessika Wickering

    Is there a way to edit the HTML to create different preview text in Constant Contact? Currently, the HTML pulls the first few sentences in my email. Is there a way to change that? I know it is possible in Mail Chimp.

    Thanks!

  • Avatar
    Marcos Lopez-Carlson

    Massimo, did the August 31 update include changes to the font or link encoding? Within the last few weeks I have been seeing ? appear at the end or beginning of lines.

  • Avatar
    Matteo Santagata

    Hi Marcos, can you please open a support ticket on https://beefree.io/get-in-touch/ describing the issue you're experiencing?
    Thanks!