HTML for Email 3.0
This article applies to the Email builder in all plans.
Summary
This latest version of Beefree HTML offers several improvements over the previous version, including:
- Faster design rendering
- Reduced output file size
- Simpler, cleaner HTML output
- Wider email client compatibility, including reduced Gmail clipping
About the Beefree HTML for Email
New Features
HTML File Compression
Our average exported HTML data footprint content has considerably decreased over the previous builds. We've based these findings on extensive testing of over 600 designs.
Summary of Key Improvements:
- Faster loading and rendering
- Reduced mobile clipping
- Reduced bandwidth consumption
Improved HTML Rendering
-
Migration from <div> to <table> formatted codebase
-
Most Content Blocks have been re-coded for conciseness
- Transparent dividers are now automatically converted into padding
Bug Fixes
HTML for Email 3.0 includes some minor bug fixes. Many of these bug fixes addressed minor rendering inconsistencies across different versions of Outlook. Some of the most noticeable bug fixes include:
- Enhanced in-editor email preview
- Better icon text alignment on mobile devices
- Improved pasted text behavior (particularly when content includes linebreaks)
- Improved button rendering in dark mode (Outlook only)
The Evolution of Beefree HTML for Email
The original version of Beefree HTML for Email was table-based and in use from 2014 until March 2017. Our main focus was adopting a fluid hybrid design technique to ensure mobile responsiveness. However, this resulted in very large HTML files, which caused a lot of people to encounter clipping issues in popular email clients like Gmail and Yahoo.
Beefree HTML for Email 2.0 was our first attempt to mitigate clipping issues by reducing our code footprint. This DIV-based version of our HTML for Email component was inspired by Rémi Parmentier's Fab Four technique. This method allowed us to achieve responsiveness without media queries and helped reduce the footprint a little bit. However, it relied on VML and conditional comments to have the layout display correctly on older Outlook clients. HTML for Email 2.0 was live from March 2017 until October 2021.
Unfortunately, the conditional code we used to address Microsoft compatibility in version 2.0 sometimes caused further clipping issues. By the time we were working on version 3.0, we had learned a lot. We combined the table-based approach with conditional comments only when absolutely necessary (e.g. buttons) in order to generate our cleanest and most concise HTML output to date.
If you have any questions, feel free to contact us.
Comments
2 comments
Hey this is a great update that we were waiting!
If you can do something for the complex button code too it will be a life saver.
Maybe an option to the UI to sacrifice the round corners on the buttons and have one button/link for all email clients.
Hi Aris and thanks for your feedback. We are going to forward it to our Product Team!
Article is closed for comments.