F.A.Q.

Don’t get cut off because of Gmail clipping

  • 2 June 2022
  • 4 replies
  • 151 views
Don’t get cut off because of Gmail clipping
Userlevel 3
Badge +1

It’s never fun to encounter the dreaded “[Message clipped] View entire message” notice at the bottom of your emails. Thankfully there are some best practices you can follow and actions you can take in our new and classic editors to make sure you don’t run into them too often.

New Editor Clipping:
If you are experiencing clipping in the classic or new email editor, your template will have to become smaller. Some tips for making your template smaller in the new email editor are the following:

  • Limit the use of multiple sections.
  • Limit the use of background images in sections.
  • Limit the use of device-specific blocks (i.e. desktop-only / mobile-only).
  • Consolidate settings as much as possible. For example, set a background color at the section level instead of on each block within the section.
  • Consolidate blocks as much as possible. Use a single text block where possible instead of multiple text blocks one after another.

 


Old Editor:

Preventing Gmail clipping when using our classic editor is much more manageable. Watch the video (with sound 🔊) below going over best practices to avoid Gmail Clipping.

In the video, I explain that templates should be around 75 KB in order to avoid being clipped by Gmail. Email templates with over 102KB of HTML will definitely be clipped by Gmail.

To find the exact size of the email when it is delivered in the inbox (including click tracking), send yourself a one-off email using this method, then click ‘View Entire Message’ if the email is clipped in your inbox. 

Once the full message is open in your browser, right-click anywhere in the window, then, click View Page Source. 

Copy all of the page source code, then visit bytesizematters.com and paste your email’s code into the text field. The size of your email will appear in the right corner above the text field.

This GIF below illustrates these steps.

To avoid clipping, the template will have to become smaller. 

In the video, I go over some techniques to cut down on KB size, such as using 'desktop & mobile' blocks rather than one block for desktop only and one block for mobile only, using just one product block, and limiting how many header and table blocks are used. Product and header blocks use the most HTML & CSS, so they are larger.

Also, if you are copying & pasting content from another source (such as Google Docs, internal emails, etc.) into your Klaviyo emails, please use the Paste as Plain Text button to clear inline styles from the original source. These external inline styles that are getting carried over from the original source can add additional HTML/CSS, increasing the size of the email.

Image sizes do not affect KB size of emails. So, if your images are large (2000px wide for example) this will not make the email larger. 

FyHIWc5aEzchjRlXfnX1DOWt7wUHpJiSXJKvdOJGq0qhc5VZTayXK15s9W3CTi_uQgRtm9pBPCq_EJhlkOKRcgVxO3lRHmI1fFAAb-CrSX4W8DFLRX0Qwp8jA9alyXvDlk9T-uytSOBsoaihBQ

 

Additional Resources:


4 replies

I have followed most of these steps but I still cannot come close to the amount of blocks that a competitor uses in their emails without being clipped.  

 

Below is a video showing how long my competitor's email is without being clipped.  In total they have 22 blocks at least.  Not to mention the double menu at the top!  FYI it is not clipped on mobile in the gmail app either.  

How on earth are they doing this?

 

Userlevel 7
Badge +53

Hey @JHEAP,

Although we cannot speak to how other software and email service providers process emails, their backend could be smaller than Klaviyos which causes less weight in the email’s code - though that could also cause it to have less analytic capabilities. 

It’s also possible that a number of the blocks shown in the email are also static image blocks. Rather than in Klaviyo, you can use live product blocks to pull in products and their information. As @Anna McCarthy mentioned previously, image sizes do not affect KB size of emails as images are loaded from an external source - only the code used to display an image in an email contributes to the message size. Similarly, the same can be said with using live texts, etc. Using live blocks would add more code weight, but you do not have to design everything externally and then bring it in to Klaviyo through an image block. 

Another thing to consider is that the email may be fully custom coded via HTML. Since you have full control over the code and therefore the code size, custom coding your own email using HTML is going to be smaller in size. 

Overall, we do see that shorter emails perform better in general: one clear CTA or idea you’re advertising rather than multiple CTAs/ideas tend to get more clicks and engagement. @Anna McCarthy actually pointed this tip out in another one of her amazing Community posts where she list out her favorite template resources:

Not too many CTAs, pick one (maybe 2) ideas or products you’re looking to advertise, and focus the email on that - emails with too many CTAs do not get very high click rates (blog on this here and here - external resources but trustworthy).

Ultimately, there are a number of ways to still have an email that has a lot of content while still staying under the 102kb limitation to prevent clipping in Gmail.

David

Hi David. 

 

Thanks a lot for your reply.  

 

Just one more question for now.  I tested using the new editor and it seemed to allow more live blocks than the old editor.  Is this true or am I imagining things?

Userlevel 7
Badge +53

Hey @JHEAP,

Great question! 

Overall I wouldn’t say you’re imagining things. On a block-by-block basis, the new editor performs better in terms of code weight, meaning it is “lighter” in their individual block codes. However, because of the new features and function available to you in the new editor (i.e. sections and universal content), as well as the increased visibility of certain settings (i.e. show/hide, repeat content, and device specific content) we have found that users are using more of these components in their messaging. This in turn would lead to templates created in the new editor seeming to come off as “heavier” in their code. 

Keep in mind that even device specific content although not visible to you would still attribute to the overall code weight. 

David

Reply