What is a broken email?
Marketers love email for its reliability, effectiveness, and maybe most importantly its high return on investment (ROI). But email support can change suddenly with email clients’ rendering engines make it tricky for email marketers to understand what’s going to work where. What may look fine in Apple Mail can become a nightmare in Outlook or Gmail. On top of that, inbox versions, app updates, and browser changes can impact how an email looks. What looked perfect today might be broken tomorrow.
The first step in designing on a deadline is preparing for the worst. Have safeguards built into your templates to cover any major problems you may encounter. —Logan Baird, Emma
We’ve compiled some common email errors you might find, and how to incorporate safeguards into your next email campaign so you no longer have to say “my email is broken”. Generally, it comes down to…
Unsupported HTML or CSS in email clients
It’s no surprise that every email client is different. But when you’re working on 10,000 other things at a time, keeping up with sudden changes is the least of your worries when it comes to your email process. Even when support isn’t changing, email clients interpret your code differently.
Using a tool to identify unsupported HTML or CSS
If you’re not sure whether or not your technique is going to work in your email client, use Litmus’ code analysis tool available in Litmus Builder.
Code Analysis will show you any unsupported HTML or CSS properties in that specific email client, saving you hours of troubleshooting.
Common errors due to changing support include:
Images aren’t showing up
There are a few reasons why images might not be appearing in your emails. The most common? Many email programs block images by default until the user clicks “Show images.” If you’re not sure, here is the current list of support.
How to fix a broken email image
To make sure that your users still have a great experience, even if images aren’t showing, include ALT text. This is a line of text designed to summarize the context of the image in the email. Including ALT text for all of your images, even if you’re not optimizing for every client, is a general best practice. It ensures your message gets across even if you use text in your images, and it also makes your emails more accessible to those using screen readers.
Other less common issues might be:
- Your image isn’t hosted on a publicly accessible server
- Your image uses a relative instead of an absolute URL path
- Your image file format isn’t JPEG, GIF, or PNG
- Gaps are appearing under your images
Check to make sure images are working, and what your email looks like with images-off, using Litmus Email Testing.
Custom fonts aren’t showing up
You may have worked with your designer to create an amazing custom font—only to have it not show up in your email. This may be because you’re not using a web-safe or system font, which has support across all clients and is generally installed on most computers.
How to fix custom fonts
If you do want to have a custom font, make sure to include a fallback, and that they’re the same type as your custom font—for example, using a sans-serif font for both—which will help retain your email’s design in different email clients.
For more tips on typography, check out our ultimate guide.
Email looks funky on mobile
Screen size can make a big difference when it comes to how your email renders. With over 50% of email opens since 2015 coming from mobile, it’s important to optimize your emails for smaller screens. Testing your emails in iPhone, iPad, and Android is easy with Litmus Instant Previews and avoids any email fails.
Responsive design is the new norm, especially now that Gmail supports it. Responsive emails rely on media queries—or @media rules in code—to work properly. Media queries are a special set of CSS styles that act like conditional statements or dynamic rules. Carefully planned, they can help make emails more usable on different screen sizes. Media queries aren’t supported everywhere, so keep that in mind when designing.
How to fix mobile emails
Even if you haven’t chosen to use responsive design, there are ways to make sure your email is accessible, readable, and actionable for all of your subscriber audience.
Think about:
- Enlarging fonts: We recommend a 14px minimum for body copy and 22px for headlines so that your email is readable on small screens.
- Using a touch-friendly CTA: Your subscribers aren’t just clicking anymore—they’re tapping, too! We recommend buttons be a finger-friendly minimum of 44x44px.
- Simplifying your layout: Use a one-column approach or responsive design to accommodate viewing on smaller screens and increase legibility.
- Streamlining your content: Evaluate the content in your email and get rid of the less useful or irrelevant links, copy, and images. Be concise, but still persuasive.
Links breaking + tracking
When building an email, you’re looking not just for opens, but opens that convert. And for your subscribers to convert, they need to be able to take action, usually in the form of a call-to-action button. If the link for your button (or any links, for that matter) is broken, you’ve lost a huge opportunity—and may have damaged your reputation with your subscribers. You never want them to see a screen like this one:
Similarly, if your links don’t have tracking on them, you won’t have ruined the user experience, but you won’t be able to tell what’s working and what’s not. Did anyone click your link?
How to fix a broken link and tracking
Make sure you have added tracking codes to each one of your links with Tracking Manager in Litmus Builder so you can measure the success of your email campaign.
Animated GIFs + video not working
Animated GIFs and video both add a little spice to your email. They can be fun and engaging, or provide quick demos of your product in action. Regardless of how you use either technique, they can be tricky to include in an email.
First, large animated GIFs and video tend to add to the loading speed of your email, and can frustrate your subscribers because they won’t see the full narrative you’re trying to get across when heavy images are still loading. Things get even trickier on mobile where loading images might make it look as though you sent an empty email.
How to fix email GIFs and videos
Since not every client will support animated GIFs or video, optimize the first frame of your GIF and include a fallback image for your video. For both, ensure that the image accurately captures your message.
Adding video is an easy technique to encourage engagement. Including a play icon to that image will encourage a click. Host your video on another page, preferably a designated landing page to further track the engagement of your subscribers who clicked on the video from the email.
When it comes to load speed, balance your creative with your data: determine what your email’s load speed is with your video or GIF. We’ve put together everything you need to know on file size, including how you can decrease it.
Be aware of frequency for this technique. Used sparingly, animated GIFs and video can surprise and delight subscribers. Used too frequently, the same subscribers may tire of them and become less likely to engage with your campaigns.
Then there’s the little things…
Syntax Issues
It can be so frustrating to not know why things look funky. Chances are, there’s an errant closing tag, an improperly nested table, or another hidden typo in your code.
The Fix: To catch any errors, run your email through Litmus email testing to instantly see what’s broken.
Blue links
Apple converts phone numbers, addresses, dates, and invitation words such as “tonight” into underlined blue links in emails. This is because the information can trigger app-driven events, like adding something to your calendar or launching a map.
While this may be great for users opening personal emails, in HTML, it can make it difficult to read or take action on your email. Blue links can lead to reduced legibility (think: blue links on a blue background), and can also conflict with your brand’s design.
The Fix: Luckily, there are a few ways to fix this, like utilizing meta tags to disable phone number linking, and using a zero-width non-joiner to remove the link entirely. The most important thing to do is to test, test, test to ensure that whatever solution you have chosen to do the email is rendering as you would like it to.
Troubleshoot your emails
Quality assurance is one of the most time-consuming parts of the email design process and one of the most frustrating ones, but it doesn’t have to be. Streamline your testing process with Litmus, to see if you have any rendering problems in over 100 email clients, plus link tracking, code analysis, and other features that make it easy for you to troubleshoot before pressing send.
 | Ensure your designs come across right Broken emails lead to less conversions. Preview your emails across 100+ email clients, apps, and devices to ensure an on-brand, error-free subscriber experience. Every time. |
The post Help! My Email Is Broken: Common Errors + Fixes appeared first on Litmus.
