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