Email development is very different from web development. That’s why we built Litmus Builder, the world’s first code editor built for email designers by email designers. Since Builder’s launch in 2014, we’ve regularly made updates and added features that help you tackle the unique challenges of email development—and let you save time (and your sanity!) when writing email code.
If you’re new to Builder, check out our Builder essentials series for tips to help you get started.
Consider yourself a Litmus Builder expert already? Read on.
In talking with customers, we discovered five power-user hacks not all Litmus Builder pros know:
- Use partials and snippets to cut down production time
- Reveal the changes each email client makes to your code
- Edit a single email preview
- Instantly create Email Analytics tracking codes in Builder
- View your email’s compiled HTML size
1. Use partials and snippets to cut down production time
“It used to take us anywhere from 90 minutes to two hours to build a new email from scratch. With our library of snippets and partials in Litmus, we have cut development time in half.”
Connor Hinkson, Designer & Developer at Blufish
Maybe you regularly send out emails that contain similar sections of code—or, maybe you’re an agency that provides email modules to its clients. With Litmus Builder, you can create a library of reusable pieces of code—what we call partials and snippets—to streamline the email build process and get emails out the door, faster.
Partials are global, dynamic, reusable blocks of code that can be used across multiple emails. Partials live globally and any changes made to a partial will apply to every single email where that partial is used.
This is really helpful for items like headers, footers, CSS reset styles, and other components that need to be consistent across multiple emails.
Snippets quickly generate HTML or CSS via a shortcode in Builder. You can then customize and edit that code for an individual email.
This reduces redundancy and potential coding errors for common elements in your email designs, such as images or bulletproof buttons. Rather than having to rewrite the code each time you use one of these elements, you can use a snippet to automatically generate that piece of code inside the email you’re working on.
Learn more about creating and managing dynamic code blocks in this blog.
2. Reveal the changes each email client makes to your code
Curious how each email client’s rendering affects your email’s code? When struggling with rendering issues in one specific email client, understanding what changes that email client made to your code can help you identify issues and find solutions, faster.
Builder’s Processed HTML lets you do just that, making it easier than ever to pinpoint and diagnose rendering issues. You can use it hand-in-hand with grid lines in the preview pane to easily identify the cause of any issues and make changes live in Builder.
3. Edit a single email client preview
How often have you run across an issue where your email looked great in every other email client but one? Maybe a background image won’t load or a button is off-center in just one app or device. It’s even worse when you can’t ignore the problem if a large majority of your subscribers use that email client.
In Litmus Builder, you can isolate a single email client to identify and fix the issue. Best of all, since that fix is only necessary for that one preview, you can choose to run just that preview to make sure your fix solves the problem—instead of having to refresh all of your previews.
To do this, navigate to your Email Previews pane in Builder, then select Choose clients. De-select clients to isolate the one email client you’re looking to test and click Save Changes. Once you’re back at your Builder screen, click Save to save your email and update the preview.
Extra tip: During your team’s review process, you can flag an individual email preview for review. This can help isolate email client rendering issues and reduce time spent on trying to make the fix work for all email clients.
4. Instantly create Email Analytics tracking codes in Builder
If you use Litmus Email Analytics alongside Builder, you can add your Litmus tracking code with just one click. Creating a new tracking code will also create a new campaign in Analytics—but if you already have a campaign created, the Litmus Tracking modal in Builder allows you to search for that campaign to add in the existing tracking code.
Litmus tracking codes let you see where your subscribers open and if they read, skimmed, or deleted your email. You can also track forwards and prints, compare engagement by device, and more.
5. View your email’s compiled HTML size
Has your email ever been cut off by Gmail because it was too large? Gmail automatically clips any email larger than 102 KB and shows the dreaded “[Message clipped] View entire message” alert at the bottom. This requires subscribers to open the email in another tab or window if they’re interested enough in all of your content.
With Litmus Builder, you can view your email’s compiled HTML—not only to copy the code or download your email but also to see the size of your email. If you tend to have an issue with Gmail clipping your content, be sure to look at the size of your email in Builder to determine if you need to reduce the size of your emails.
Email testing and troubleshooting made easy with Litmus
Already a Litmus customer? Log in to give these “hacks” a try for yourself.
Want to learn more about how Litmus helps take your emails to the next level? Learn more about email testing with Litmus or reach out to a Litmus expert for more information on how Litmus can help you send better email.