The “…” are highlighted here.
This clipping feature is turned on for every single Gmail user by default and unfortunately cannot be disabled. This can be frustrating, not only for you as an email marketer, but also for the user.
Thus, this can be detrimental as all your audience members who use Gmail products (whether that is a private email account, Gmail for IOS and Android, or a corporate email account powered by Gmail) won’t necessarily receive your intended campaign in its full glory. If the call-to-action is not available in the unclipped section, your email campaign may be a waste of time. Always keep this in mind:
If the reader has to take any extra step to get your message, this will be a massive stumbling block in the success of your email campaign.
Moreover, our friends at Email on Acid have ran tests that outline the behaviour of spam filters triggered by email size. Here is a breakdown of deliverability issues based on email size:
Are you using Grammarly…?
Some of our clients have reported issues putting together a simple HTML template, which is getting clipped on Gmail. How can one picture and one paragraph weight more than 102kb?
After some deep digging, the original template they had created had turned into a hot mess composed of over 10,000 lines of code! SAY WHAT!? As you may suspect, this caused the email size to skyrocket; thus why Gmail clipped the message.
HOW IS THAT POSSIBLE!?
When a client puts together an email template using the itracMarketer platform, it all begins with a simple structure that has only 8 lines of code, which look like this:
After installing Grammarly, this same message becomes 8,967 lines long! To illustrate the outcome using images, I would have to take approximately 1,120 additional screenshots and I am sure no one wants to go over 1,120 images of block code… Let me explain how this is happening.
What is Grammarly anyway?
In case you aren’t familiar with the app, Grammarly is a pretty a sweet extension that ensures everything you type is error-free and easy to read. It is your online proofreader, which provides suggestions on how to write and avoid grammatical issues. Sounds good, right?
Unfortunately for the person putting together an email, enabling the Grammarly extension changes content DRASTICALLY, leading to email size issues.
Images turned into code!
Sometimes images become part of the HTML code, which translates into a massive brick of characters inside the <head> section. When this happens, images are said to have been encoded into Base64 images. The benefit of doing so is that these will load without having the web browser download the image. This may be a good alternative if you are putting together a landing page, or adding an additional page in your website. However, considering the size limitations of email campaigns, base64 images are an absolute NO!
Every single time this issue has come up in an email template, it has not been done intentionally by the user. People are not aware that images are being in-lined into html code! I am sure all this encoding business may sound confusing to some of you, but here is a screenshot to illustrate:
The above image isn’t the only one featured in the added code. Gammarly inserts a total of 98 IMAGES; all of which are encoded in base64!
The creators of Grammarly have been aware of this issue since 2015, but unfortunately for us, this problem isn’t on their priority list. A simple Google search on this matter will show multiple complaints from other users that have been affected by this glitch in the past.
Best practices on email size – Is there a fix?
You bet there is a fix! You can save some bytes to ensure that your email size does not exceed that dreaded 100k mark. Here is how:
If you are using Grammarly, we can’t emphasize this enough: disable the extension every time you need to put together an email template. As mentioned, Grammarly modifies the content of your message, causing issues during the deployment process. After disabling the plugin, you can clean up the source code by pasting it into a text editor, such as Notepad. Then, remove the massive bricks of bizarre CSS styling in between the <head> section, without affecting your original source code. Once you finish, you may paste your original/restored code back into itracMarketer.
Keep your email content to 20,500 characters (20k) or less.
Remove any unnecessary spaces, carriage returns or comments.
- This include: <br/> and
Double-check for redundant in-line styling
- Using styles again and again for specific elements is not a good practice. It’s very important for you to clean your code and remove redundant styles. For example, if you have a paragraph tag <p> and span tag <span> with the same font size and color, you might just group them using a comma:
Declare image width and height
- If you do so, your email design will maintain its structure when images are turned off by email clients. If you only know one of the dimensions, you can set the missing one to “auto”, and that will suffice.
Optimize image size
- Make your image file sizes as small as possible without losing their visual integrity. This will prevent long email load times. Remember that it is best practice to have your email campaign width to be between 600px- 700px. So, if the width of your campaign is 600px and you have full-width images, you can set all your images to be 600px wide. This will ensure that they render property and you are not using extra large images, which may take much longer to load.
Images count more than their character count
- By about 170 characters more, to be precise. Again, more is always less.
Have an even balance of text and images in your email template
- Images are crucial if you want to convey a strong message. Thus, having good images can make your email campaigns look even more appealing and vivid. Know the goals of your email campaigns and identify the results you wish to achieve. This will enable you to find the right balance between written content and the image you decide to feature. The success of an email campaign truly depends on the well-managed balance of both image and text.
- If an email campaign is text-heavy, this will overwhelm your readers. If you loose their attention, your message may not even get across.
Avoid using one large image as your entire email, or too many images in general
- An email campaign that contains a lot of images and poor written content can look incredible but will be blocked by many Spam filters. This will definitely affect your open rates. Therefore, the best solution is to design your message with image blocking in mind, considering how your campaign will look if all the images are blocked.
Landing pages For The Win!
- If you still have too many images and too much information to convey in one message, consider making a landing page. Then, you can direct your users without eliminating any content and you won’t have to fit everything into an email!
Email size matters, period. Don’t let anyone tell you otherwise.
Contact us if any questions arise. Remember that our Customer Success team is here to help!