Quick summary
The Drag & Drop 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.
Updated HTML for Drag & Drop Email Campaigns
On March 8, 2017, we released a major update to our Drag & Drop HTML parser, which now produces state-of-the-art, thinner, better HTML.
When you use the editor, Response Wise saves your design into a JSON file. The HTML parser is the component that transforms that JSON file into ready-to-send HTML emails.
Why this update?... lighter, better HTML!
One of the major reasons to use the Drag & Drop editor for designing emails is the ease of use & peace of mind that it provides with regard to how those messages will render in the inbox as well as the native, built-in responsive code that the Drag & Drop editor produces.
Gmail, as one of the most commonly used email clients, is one of the top priorities for our editor development 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 (learn more about fluid hybrid design.)
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.
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 <DIV>s instead of nested tables to create fluid layouts, dramatically simplifying the final output.
The reduction in the HTML footprint is remarkable.
Adding support for Microsoft email clients
Microsoft applications don't use an Internet browser to render HTML code, 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.
Improvements summary
Here is a summary of the main benefits introduced by using these new HTML coding/parsing 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 issues in some less popular webmail clients. These display problems are generally limited to displaying the tablet/mobile version of an email campaign instead of the desktop version. To be clear, the campaigns themselves are not "broken" but rather displayed as mobile in the following clients:
- Comcast
- GMX.de
- Web.de
- 1and1.com
- Zoho WebMail
Comments