- Key Takeaways
- Supporting the Outlooks
- Making Your Emails Work without
The image below shows an example email (courtesy of Really Good Emails) in the Yahoo Mail app on Android. Without the double
, the email is automatically scaled by the client. With the fix, the email renders media queries just as expected.
Keeping Email Sizes below
102KBGmail’s desktop webmail has a notorious threshold of 102KB, after which it will truncate an HTML email and show a “[Message clipped]” alert, along with a “View entire message” link. While it’s unknown why this limitation exists and why it’s at such an odd number precisely, it’s been measured consistently across the years.
This 102KB limits only accounts for the size of the HTML of our email message. It doesn’t include other parts of an email (like the plain text version, or all of the MIME header fields). It also doesn’t include the weight of any distant asset like images or fonts. So if our HTML weighs 40KB with 500KB of images, we’re fine.
We want to avoid this threshold because:
- Gmail will cut our email at 102KB to insert its “[Message clipped]” alert, even if this is right in the middle of a
. This is very likely to break our email in unexpected ways.
- Behind the “View entire message” link, Gmail will provide inferior support for HTML and CSS. For example, any
This is transformed by Yahoo and AOL into the following:
The email client renames every class by adding a custom prefix (
yiv1234567890) and adds a prefix to every selector (#yiv1234567890). This is a very common practice across email clients — especially webmail versions — and is needed to ensure that our email styles can’t affect the webmail client’s own styles, and vice versa.The bug here is that Yahoo also tries to add its prefix to the CSS comment. And because it only adds it alone on a single line of code, this means it applies to the CSS selector on the next line. Consider the following selector:
#yiv1234567890 .yiv1234567890title { }This now gets interpreted as follows:
#yiv1234567890 #yiv1234567890 .yiv1234567890title { }With twice the
idprefix, it no longer matches anything on the page, and thus this makes the CSS rule void.This bug doesn’t apply if we’ve got CSS comments inside a CSS rule (between the curly braces). But as a general cautionary rule, it’s best to remove all CSS comments before sending an email.
Using an HTML5 Doctype
Email clients never output your HTML email code just as is. They apply various transformations, such as filtering unwanted tags (like
Rémi ParmentierRémi Parmentier (also known as HTeuMeuLeu) is a French email and web developer who’s been working at his own small web development agency, Tilt Studio, since 2008. He cares about the Web, accessibility, and the quirkiness of HTML emails.
Stay Relevant and Grow Your Career in TechSitePoint Premium- Premium Results
- Publish articles on SitePoint
- Daily curated jobs
- Learning Paths
- Discounts to dev tools
7 Day Free Trial. Cancel Anytime.
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply. - Behind the “View entire message” link, Gmail will provide inferior support for HTML and CSS. For example, any
- Gmail will cut our email at 102KB to insert its “[Message clipped]” alert, even if this is right in the middle of a