Troubleshooting Message Clipping

Email clients impose size limits when displaying messages. When content exceeds these limits, it can result in message clipping. Clipping causes part of the message to be cut off and requires users to click a link to view the full content. This can negatively impact engagement and campaign performance.

The clipping threshold varies depending on factors like the email client, device type (desktop or mobile), and display settings. While keeping the message body under 100 KB is a common recommendation for desktop users, mobile clients may have even stricter limits, sometimes as low as 20 KB. These limits account for all elements of the message body, including HTML, CSS, image tags, and hidden characters like Iterable's tracking pixel.

This article provides best practices to help you avoid message clipping, as well as some known issues related to clipping and how to address them.

# In this article

# Best practices to limit message clipping

Generally, the best way to avoid message clipping is to keep the size of the message body under 100 KB. However, the practical application of this advice can be challenging. Below are some best practices for the technical and design aspects of your Iterable templates. Follow these tips to minimize the size of your message body and avoid clipping.

# Content

Most of this article focuses on technical aspects of message size. However, the overall volume of content in your message does impact the size of the message body.

Here are some tips to keep in mind:

• Make it personal: Instead of showing a generic selection of content or products, use personalizations (such as Catalog recommendations) to tailor your content, creating shorter and more relevant messages for each customer.

• Keep it concise: Use clear and concise language in your messages. Avoid long paragraphs and excessively long emails. Use "read more" links to direct users to your website for more information, instead of including all the content in the email. This can help reduce the size of the message body.

• Have one call to action: Make sure your message has a single, focused call to action that encourages users to engage. This can help reduce the need for excessive text and keep the content streamlined. Having multiple calls to action can confuse users and increase the risk of clipping.

• Experiment: If you aren't sure what your audience will respond to, consider A/B testing different content variations to find the most effective message.

Read on for more content tips related to links, images, and special characters.

# Images

• Reduce image tags: Limit the total number and overall size of image tags in the message body. Consider using fewer images, consolidating them into a single image, and limiting the use of unnecessary image tag properties such as excessive resizing.

• Optimize image sizes: Ensure that images are optimized for web use so that you can avoid using inline CSS to manipulate how they're displayed.

# Special characters and emoji

To avoid exceeding display limits, limit the use of special characters and emoji in the message body. Using special characters and emoji can increase the size of the message body, potentially leading to clipping.

For example, a single smiley face emoji character requires 9 hidden characters in UTF-8 encoding (😀 is coded as 😀 in HTML). If there are many special characters in your content, this can contribute to a higher overall message size.

# HTML & CSS tips

Use clean, minimal HTML and CSS to reduce the overall size of the message body. Avoid unnecessary tags and styles. Here are some specific tips:

• Avoid excessive nesting: Deeply nested HTML structures, such as tables nested within tables, increase the size of the message body. Flatten your HTML structure where possible.

• Disable inline styling, or use minimal inline styling: Inline styles may increase the size of a message body when compared to referencing an external stylesheet — however, they're often necessary for email rendering. Many email clients will strip away <style> or <link> tags, or do not support embedded styles in the <head> tag. Iterable enables inline styling by default for all templates.

  • To disable line styling in your Iterable template, go to the Design
    area of the template editor, click the Preferences button in the bottom left, and find the Convert CSS to line styling setting.

  • If you want or need to use inline styling, use it judiciously for your content and avoid switching between text styles frequently.

• Use shorthand CSS properties: Where possible, use shorthand CSS properties to reduce the size of your styles. For example, use margin: 10px 5px; instead of specifying each margin property individually, such as margin-top, margin-right, margin-bottom, and margin-left.

• Avoid unnecessary CSS properties: Limit the use of CSS properties that aren't essential for rendering your message. For example, avoid using properties like font-size if the default size is sufficient.

• Don't use code comments: Hidden comments add to the size of the message body. If your template's HTML contains comments, remove them before sending the message.

• Remove unnecessary whitespace: Extra spaces, line breaks, and tabs can increase the size of the message body. Minimize whitespace in your HTML code. Sometimes you may see whitespace as encoded characters, such as   or  , which can also inflate the message size if they are not necessary.

  However, don't go overboard and remove all of your content's whitespace and line breaks, which are standard and necessary for readability of the HTML code — for humans and for email clients. For best results, only extra whitespace should be removed.

• Validate your HTML: Malformed HTML can cause clipping for any message, even if its size is under the display limit. This can include typographical errors as well as the misuse of HTML tags (such as including an incorrect property).

  Iterable’s template editors attempt to correct malformed HTML — however, it's always a best practice to verify and correct custom HTML before entering it into an editor, as well as before sending proofs.

  • In the WYSIWYG editor, you can also use the cleanup tool to help format your HTML.

# Links

When you send an email message, Iterable replaces the links in the message with Iterable tracking links that monitor user engagement. Iterable tracking links are self-contained, meaning they contain all of the information within the link that's needed to redirect the user. (This is different from shortlinks, which reference a database to redirect users to the final destination.) Because of this, each link can use a significant number of characters, which increases the size of the message body.

To minimize this:

• Reduce the number of links: Use fewer links in the message body. For example, if you have multiple links to the same destination, consider consolidating them into a single link.

• Reduce UTM parameters: UTM parameters are used to track campaign performance, but they can increase the size of each tracking link.

  • Use only the minimum number of UTM parameters necessary for your campaign. Iterable tracking links set browser cookies, so depending on your project type and what information you're tracking, you may not need to include certain attribution data, like campaignId, in your UTM parameters.

• Use the shortest possible domain for tracking links: By default, projects use links.iterable.com or links.eu.iterable.com for tracking links. You can set up a custom domain for your project to shorten the number of characters per tracking link, and to match your brand. To learn more, see Email Setup: Set Up Tracking Domains.

# Using email link shortening

Iterable's email link shortening feature converts full-length tracking links into shorter redirects, reducing the total character count per link and the overall size of the message body. This can help reduce the risk of clipping, particularly when your messages contain many or very long links.

If you enable heatmaps and insights tracking (Enable improved tracking in Project Settings), the extra characters added to links may also contribute to clipping risk. Link shortening can help offset this.

For setup and usage details, see Email Link Shortening and Click Tracking.

# Avoid third-party link shortening services

Don’t use a third-party link shortening service, such as bit.ly. Spammers are known to use this strategy to obscure links to malware and viruses, so these can cause problems with message deliverability. To learn more about email deliverability best practices, read Maximizing Email Deliverability).

# Troubleshooting issues with message clipping

Below are some common issues related to message clipping and how to address them in the messages you send with Iterable.

# Tracking opens

Iterable tracks an email open event when the tracking pixel is loaded in the user's screen. This hidden pixel is placed at the bottom of an email message. When a message is clipped, the tracking pixel might not load properly, resulting in failure to track the open event.

Due to lack of feedback data from email providers, Iterable is unable to provide reporting for clipped messages. However, a lower-than-typical open rate for your Gmail users is an indication that the message may have been clipped.

To avoid this issue, create a message body that is under the clipping threshold by following the best practices noted above.

# Unsubscribes and email deliverability

When an email is clipped, the message footer may be hidden from the user. This section often contains links to unsubscribe or update the user's subscription preferences. Clipped messages are harder for users to unsubscribe from, which may lead to increased spam complaints.

(Note that this concern does not apply to easy unsubscribe links, which are present in marketing message headers and displayed outside of the message body that was clipped.)

# Testing variations of dynamic and personalized content

When using dynamic or personalized content in your Iterable messages, the size of the message body can vary based on the data being rendered. If the personalization data is large, it can lead to clipping.

To minimize this:

• Limit the amount of dynamic content: Use fewer dynamic or personalized elements in your messages.

• Use shorter dynamic content: If possible, limit the length of strings for personalization data and dynamic content to reduce the overall size of the message body.

  For example, you can use Handlebars expressions to abbreviate text strings when they exceed a certain limit.

  You can also provide an alternative value to display if a certain field's value is too long for the template. The example code below will display the user's first name if it is 6 characters or shorter, or instead display the word "Friend" if the user's firstName value is longer than 6 characters.

  {{#if (lte firstName.length 6)}} 
  {{firstName}} 
  {{else}} 
  Friend
  {{/if}} 
  

• Preview each variation: Make sure your test list has enough user profiles to preview the dynamic and personalized elements of your message — so if you're using dynamic images, test with enough profiles to reflect each image variation (or, make sure every variation conforms to the same size).

# Emails are clipped for a live campaign but not its proofs

Proof emails may not be clipped even if the live campaign is, due to differences in the content delivered.

When testing your Iterable templates, make sure to send live test messages (rather than proofs) to enough user profiles to preview the dynamic and personalized elements of your message. This will help you identify any potential clipping issues before sending the live campaign.

# Estimating message size

When you're working on a template design, Iterable displays an estimated size of the message. This is a rough estimate of the size of the message body based on the current HTML content in the template editor.

It's important to note that this is an estimate, and doesn't reflect the final size of the message body when sent to each user.

When Iterable generates an outbound email from a template, it does the following to the message content:

• Replaces links with tracking links and adds UTM parameters.
• Replaces dynamic content with the actual data.
• Adds a footer with unsubscribe links and other required information, for marketing messages, if Auto-append Unsubscribe Block is enabled in project settings.
• Adds a tracking pixel for tracking email open events.

The estimated size in the editor does not account for these additions, and the final size of the message body is usually larger than the estimate shown in the template editor. This estimate does offer a general idea of the size of the content, with exception to the rendering changes noted above, so you can gauge whether the in-template design and content are contributing towards clipping thresholds.

# Threaded messages

When a user has two or more email messages with the same subject line, email clients may treat them as part of the same conversation and display multiple messages as a single thread. This can lead to clipping if the combined size of the messages in the thread exceeds the size limit.

Consider using a different subject line when sending newsletters and other repetitive marketing or transactional messages. Personalizing the subject line, for example to include an order number, can help avoid clipping caused by threading.

# Pasting content into a template

Content that is pasted into a rich text editor (Drag and Drop and WYSIWYG editors), may include hidden characters or formatting that can increase the message size. To avoid this, use Ctrl+Shift+V (for PC) or Option+Shift+Command+V (for Mac) to paste text without styles. This prevents additional hidden characters or formatting that may contribute to the message size.

# Using the Drag and Drop editor

Iterable's Drag and Drop editor is a codeless design tool that allows you to create templates visually. It is easy to use for non-technical users. However, it isn't possible to edit the HTML it generates, making it more challenging to fine-tune the message size.

If you encounter clipping issues with templates you've made using the Drag and Drop editor, you may find it helpful to follow the best practices noted above to create simple, concise templates.

If you continue to experience issues with message clipping, consider using the Iterable WYSIWYG editor or Side by Side editor instead so that you have direct control over the HTML content. (Note that the WYSIWYG editor may need to be enabled in your project's settings.)

# Want to learn more?

For more information about some of the topics in this article, check out these resources:

• Email Link Shortening and Click Tracking
• Previewing Templates
• Creating Email Templates
• Maximizing Email Deliverability
• Project Settings