Hide and seek may be a fun childhood game, but if you hide content in your code, you may run the risk of hurting your deliverability. And while there are some very important practices you should focus on implementing, like authentication, opt-in, and permission, content and code elements are two of the elements of deliverability you can fully control.
Plus, clean code and content is critical for your user experience too, whether it’s making sure your email renders correctly or that your message gets its point across—so your subscribers click.
 | Make it to the inbox, not the spam folderIdentify issues that might keep you from the inbox and get actionable help for how to fix them with Litmus Spam Testing. |
It happened to us!
For Litmus Live 2014, we went above and beyond by implementing a video background in email. It’s our biggest email campaign each year, designed to build a ton of excitement before our event—and drive ticket sales. But one thing we didn’t count on: Our code comments accidentally triggered a few spam filters. The reason?
A comment that read:
YES. HTML5 VIDEO BACKGROUND.
IN AN EMAIL. BELIEVE IT.
BRINGING SEXY BACK TO EMAIL LIKE TIMBERLAKE DID TO POP.
What started as a joke intended for our code-savvy audience of email designers and developers who often peek at our code became a deliverability risk, all because of the word “sexy” hidden in our code.
Keep your code clean
Keeping your code clean is an important step (though not the only one) to making sure you always reach the inbox. That’s because spammy emails tend to have additional formatting to more easily hide the bad things which make them readable and easy for humans to click on something they shouldn’t.
Poorly written HTML means the spam filter may interpret your message as something it’s not, and may send you to the spam folder just to be safe.
“Dirty” code can also dramatically increase the size of your email. This makes it much longer to load and can impact your subscriber experience, decreasing engagement. Make sure your email is less than 102kb to prevent clipping in Gmail Also at scale, large message sizes may impact processing times at your email service provider (ESP), and in turn, impacting your sending rates.
And clean code isn’t just important for deliverability—it’s important when it comes to making sure your email renders correctly, too.
Double check these things to make sure your code stays clean, decreasing the chance of landing in the spam folder:
- Bad tags, too many closing tags, or incorrectly nested tags
- Font color too similar to background color, which hides text in your email
- Embedded Javascript
- Super large font sizes
- An invalid font face
- Use of an iFrame
- HTML comments in your code
- Providing attachments
- Characters that are not standard ASCII characters
- Blank lines in base64 coding
Check your email
Similarly, make sure you do a thorough spell check of your code and your content to avoid having spam filters think you’re talking about common spam topics like credit or financing, genitalia, or medications.
Another common spammer tactic we see is hiding content by making the text the same color as the background. Double check your background image and be sure to use contrasting colors for your fonts so it doesn’t appear like you’re hiding any code or content from your subscriber.
Double check all your links, too. A typo in your link may flag it as suspicious, or worse, send your subscriber to an actual spam site. Make sure your links are well formed and link to legitimate sites. Only link to domain names, not IP addresses.
 | Dot your i’s and cross your t’s with Litmus ChecklistDouble check all of the critical elements that will impact your email’s performance with Litmus Checklist. Preview your email in 70+ email clients, check broken links, and more. |
Avoid using links provided by link-shortening services, such as bit.ly, in email. Some spam filters identify links used by link shortening services as spammy as the true link is being hidden. As an alternative, many ESPs provide a method of link tracking for your emails built-in. We recommend you use this method of tracking the performance of your links rather than link-shortening services.
Shortcuts to keep your code organized in Litmus Builder
When you’re building your email in Litmus Builder, there are built-in tools to help you troubleshoot errors and keep your code clean.
Auto-complete allows you to view a list of options for HTML or CSS elements when typing in the code editor. This can be helpful for those times when you forget a specific HTML or CSS element. Just start typing and Builder will show you a list of elements that you can select to pop into your code.
The Close tags option automatically closes HTML tags while coding. Missing closing HTML tags can cause a variety of issues in email campaigns, so Builder’s automatic close tags feature is a good way to ensure that you don’t run into any rendering problems due to a rogue open tag.
Grid view toggles a blue grid around all of the individual elements in your email, allowing you to click on those elements and navigate directly to that piece of code in the code editor. Here’s looking at you, Dreamweaver users.
Code analysis shows any unsupported HTML or CSS properties in that specific email client, saving you countless hours of troubleshooting. With Code Analysis activated, you can toggle through dozens of email clients to see support for HTML and CSS in each of those clients.
 | Get to know Litmus BuilderQuickly build and test on the email clients that matter most to your audience, and utilize reusable HTML and CSS code snippets and pre-tested templates to reduce errors and maintain brand consistency. |
Looking to learn more about Litmus Builder? Check out our Builder Essentials series to learn more coding shortcuts with our email coding editor.
Kayla Voigt is a B2B Freelance Writer.
