Like the unsinkable ship, which sank, the unbreakable email—breaks!
The curse of perfection? Perhaps. What do you do when everything is perfect? You test. Nothing like perfection to encourage testing.
The famous phrase goes, Test, test, test. (We’ll add our own version to that later.) This is because testing is undervalued.
And also because testing is hard. As Bill McCloskey, founder of Only Influencers and email entrepreneur points out, testing throws all your “training out the window.” It bins the textbook, essentially. “Successful testing means that you have to embrace the idea that you are wrong about something,” Bill argues. And that’s what puts people off.
Although, too much testing can also be a problem, as you’ll find out in today’s article on Klaviyo email design challenges and fixes. Our subject matter expert tackles a host of design issues upfront. Join him!
Klaviyo Font Issues
Fonts can be tricky to manage in email templates, particularly when using custom fonts in Klaviyo. Different email clients (like Gmail, Outlook, etc.) render fonts differently, which can result in inconsistent branding and poor user experience.
a. Inconsistent Font Rendering
Brands use custom fonts to design their email templates which are usually not supported by email clients like Outlook and Gmail because they use default web-safe fonts and may not display your required font.
Solution: Use Web-Safe Fonts or Font Stacks to get around Klaviyo email font issues.
Fallback Fonts: Use a font stack that includes both custom fonts and web-safe alternatives. This way, if a custom font is unavailable, the fallback font will be used.
Example: font-family: ‘CustomFont’, Arial, sans-serif.
Web-Safe Fonts: Use standard fonts such as Arial, Verdana, or Georgia that are universally supported across most email clients.
b. Font Size and Line Spacing Issues
Different email clients can often alter font sizes and line spacing, which can impact readability and design consistency.
Solution: Set Explicit Font Size and Line Height
Always specify the font size and line height in pixels (px) rather than relying on percentages or em units to maintain consistent rendering across platforms.
Example: font-size: 16px; line-height: 24px;
Related: 16 Overlooked Email Development Challenges
Klaviyo Email Clipping Issues
Email clipping occurs when an email exceeds a certain size limit and is truncated, typically in Gmail. This can be a big problem for email campaigns, especially if important information gets cut off and the recipient can’t see it.
a. Large Email Sizes
Emails that are too large in file size (usually over 102KB in Gmail) can get clipped, and users may not see the full content, including important offers and call-to-action buttons.
Solution: Optimize Email File Size
- Minimize Image Sizes: Compress images to reduce the overall file size. Tools like TinyPNG can help reduce the image file size without sacrificing quality.
- Avoid Excessive Use of Large Images: Try to keep a balance between text and images in your design. Relying heavily on images can lead to large file sizes.
- Optimize HTML Code: Minimize your HTML code by removing unnecessary spaces, comments, and unused code.
Significantly, continuing on that last point, clipping doesn’t necessarily follow a pattern; sometimes, an email gets cut off relatively sooner. Others might stop short of the footer. Now, what causes these seemingly random behaviors? We consulted our development team on this.
“Some ESPs encode images or tracking pixels in Base64 format within the HTML. This drastically increases the email size, triggering earlier clipping,” says Divya S., Project Coordinator at Email Mavlers.
“Some variations in where Gmail clips the email could come from differing amounts of conditional code in each template,” she adds, even if conditional code applies only to Outlook, not Gmail.
The issue can also be caused by your ESP. “If your ESP dynamically replaces merge tags, the final email size varies based on the length of inserted content. This can cause emails with long names or company names to be clipped earlier than others,” Divya points out.
Gmail sometimes processes CSS differently before calculating the final size, so seemingly minor changes (like a different layout) can shift where clipping occurs.
“A taller email naturally requires more code, increasing the overall size. Even without excessive height, unnecessary or redundant code can significantly contribute to the total size, increasing the risk of clipping. While larger image files may slow down load times, they don’t directly affect Gmail’s clipping threshold,” explains Dhrupalsinh Barad, our senior HTML developer. Our development team proposes these best practices in general:
- Minify HTML: Remove extra spaces, line breaks, and comments before sending.
- Optimize Inline Styles: Avoid excessive inline CSS and repetitive properties.
- Reduce Tracking Pixels: If possible, limit the number of tracking images or use lighter alternatives.
- Simplify Code Structure: Avoid unnecessary deeply nested tables.
- Test Variants: Use Gmail’s “View Original” option to check HTML size before sending.
b. Long Subject Lines and Body Content
Emails that are too long or contain excessive content (like long subject lines or an overloaded email body) are more likely to be clipped by email clients.
Solution: Streamline Email Content
- Keep Subject Lines Short: Aim for subject lines that are under 50 characters to avoid clipping.
- Keep Emails Concise: Avoid overloading your emails with large amounts of text. Focus on key messaging, ensuring important content is visible above the fold.
Sometimes, during testing, threading is mistakenly taken for clipping.
Gmail “threads” multiple emails from the same sender, so subsequent emails within the thread look empty. You can view all the emails within a particular thread by clicking on the three dots. (See below).
So, make sure you’re not rocking the boat over bogus leaks. You could be too conscientious while testing.
Related: Templates Not Loading in Gmail? Here’s the Fix!
Klaviyo Email Design Tips
Ensuring that your email displays correctly across different devices and email clients is crucial. Klaviyo provides testing tools to preview your emails in different environments:
- Klaviyo allows you to preview how your emails will look in various email clients (e.g., Gmail, Yahoo, Outlook). This will help you identify potential font rendering and clipping issues.
- Always send test emails to yourself or a small test group before launching your campaign. This allows you to check for clipping and rendering issues before the email reaches your audience.
- Klaviyo’s editor is designed to create mobile-friendly and responsive email templates that adjust to different screen sizes. Ensure that your email designs are optimized for both desktop and mobile users.
- The editor also provides a real-time preview feature, which allows you to test how the email will render across multiple devices.
So these are some of the standard best practices. You always start with them. For more specific details, consult Klaviyo’s guide.
Need help with designing customizable email templates? Let’s shake on it!
Ensure your emails render seamlessly, with Email Mavlers — flawless on every device, from mobile to desktop to tablets. We surpass CSS complexities to deliver pixel-perfect templates across clients. Also enjoy optimized images for smooth display, fast-loading clean code for reliability, and accessible, inclusive designs.
Nikunj Butani
Susmit Panda - Content writer