Litmus Builder Essentials: Developing in Our Email Builder

[ 0 By

In the last post in the Litmus Builder Essentials series, we took a spin through Builder’s interface, learning about all of the different sections of Builder, some of the menu and settings options, and what exactly those little icons in the upper right corner are. Now that you’re comfortable with what goes where in Builder, it’s time to dig into some of the features that make developing emails in Builder a wonderful experience.

In this second installment of Litmus Builder Essentials, we’ll take a deeper look at Builder’s code editor, some of the features designed specifically for email development, and how to use Builder to speed up your development workflow.

Meet the code editor

As we saw in the previous post, Litmus Builder is split into three main sections: The sidebar, the code editor, and the preview pane. For most, the main work in Builder will occur in the code editor,where you write the HTML and CSS for your email document. If you’re making any changes to the style, layout, or content in your email, it will happen in the code editor.

Unless you’ve started with a new template or copy and pasted your own code into your Builder project, the code editor will be blank by default.

The code editor and preview pane in Builder.

If you’re experienced with coding emails, you can start writing your code in the editor or copy and paste an email from a local file or your text editor of choice.

If you start a new blank document but later decide you need a template to build on, simply press the Template option in the menu bar. As we saw in the last post, this will open the Template Gallery, full of elegant, pre-tested templates for a range of use cases that you can customize and use for your next campaign. Select a new template, and Builder will load that template—images and all—into the code editor.

Coding Views

By default, Builder opens a document in the HTML view. This is what most email designers and developers are most familiar with. In the HTML view, you can write HTML and CSS to build your email. All the changes you make to your code display to the right in the preview pane.

Builder’s code editor has a second view, though. The CSS view allows you to split your HTML and CSS so that you can work on them separately.

code views
Switching between HTML and CSS views.

While separating HTML and CSS makes the coding process much easier, many email clients don’t support external style sheets or even CSS in the head of an email. Instead, they require styles to be applied directly to HTML elements in each line of HTML. “Inlining your CSS” is a cumbersome process: Whenever you make a change to a style tag, you’ll have to manually update it in each line of your code. Litmus builder automates that step for you. Keep your HTML and CSS separated when building your email and leave the process of inlining your CSS to Builder’s automatic CSS inliner tool.

You can turn on CSS inlining in Builder in the Settings menu, accessed from the File dropdown. Once turned on, Builder will automatically add your CSS to your HTML document both while you’re designing and when testing your campaigns using Email Previews.

Once you have a finished email campaign, Builder compiles your HTML and CSS together for copying and pasting into your ESP. Grab the compiled code using the View compiled option in that code view dropdown. In the modal that pops up, click the code to copy it to your clipboard or Download the email, along with any uploaded assets, directly to your computer.

You can even get insights into how much of an impact using Partials, CSS inlining, and other compilation features have on the total weight of your markup when compiling your email. Use these insights to see if your email’s weight could impact loading speeds, and to make sure that you’re under Gmail’s 102KB display limit to prevent your email from being cropped.

File size information when compiling.

While relying on Builder’s CSS inliner is one way to speed up email development, Builder has a few more tricks up its sleeves.

You may remember from Part 1 that the Settings menu had two other toggles besides Inline CSS: Auto-complete and Close tags. These two options, when turned on, allow you to code more reliable campaigns faster.

Auto-complete allows you to view a list of options for HTML elements when typing in the code editor. This can be helpful for those times when you forget a specific HTML element. Just start typing and Builder will show you a list of elements that you can select to pop into your code.

auto complete
Auto-complete in action.

Tired of writing the same lines of code over and over again? Speed up your development process with the addition of autocompletion support for pre-existing CSS and images. For any pre-existing CSS (whether embedded in style block, in the CSS tab, or in Partials), the values will be available as an autocomplete option when using class or id attributes.

Additionally, any images uploaded to Builder will have the image filename available as an autocomplete option for the source attribute, along with its width/height dimensions for width/height attributes and CSS properties.

The Close tags option automatically closes HTML tags while coding. Missing closing HTML tags can cause a variety of issues in email campaigns, so Close tags is a good way to ensure that you don’t run into any rendering problems due to a rogue open tag.

One of my favorite features of Builder’s code editor is its built in Emmet integration. Emmet allows you to type shortcuts which are then expanded into full code snippets. While Emmet was originally built as a plugin for desktop text editors, we’ve built Emmet right into the code editor—allowing you to take advantage of the power of Emmet without having to download or install anything on your own.

emmet
Emmet speeding up coding.

We’ve put together a quick guide to help you get started with using Emmet in your own email campaigns.

There are a few more features of Builder that allow you to speed up your development workflow, including using Snippets and Tracking Manager, but we’ll look at those more in-depth in our final post in the Litmus Builder Essentials series.

Test your emails

Once you start developing your email in Builder’s code editor, you’ll want to preview that code and test it in actual email clients. That’s where the preview pane comes into play. Builder’s preview pane allows you to preview, navigate, and test your campaigns in 70+ different email clients using Email Previews.

preview pane
The Browser view of an email.

By default, the preview pane loads the Browser view of your email. This view uses your web browser’s rendering engine to display your email and allows you to quickly see changes to your email as you code. You can even test things like links and interactivity within your email.

The Browser view also allows you to use some of the tools in the toolbar of the preview pane.

toolbar icons
The preview pane toolbar.

Looking at the icons in the preview pane toolbar, from left to right, you’ll see:

  • Popout preview pane: Allows you to pop the entire preview pane out into a separate window, which is useful if you want to see more code in the code editor or take advantage of multiple displays.
  • Toggle images: Gives you the ability to toggle images in your email on and off, which is useful for simulating email clients that block images by default. Consider this your friendly reminder to always use ALT text.
  • 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.
  • Resize to mobile view: Quickly switches the width of the preview pane to mimic a narrower mobile device screen size.
  • Resize to desktop view: Quickly switches the width of the preview pane to mimic a wider desktop device screen size.
Builder’s Grid View in action.

And you can say goodbye to hopping back and forth between Builder and your editing software to discover the dimension of elements in your email. With the new grid view dimensions calculator in Builder, you can easily view the dimensions of specific elements in your email, such as a table cell or an image, with a simple hover.

Element dimensions inside Grid View.

The second view inside of the preview pane is the Email Previews view, which allows you to see how your email campaign looks in 70+ different email clients. You can access Email Previews by pressing on the Run Email Previews text in the preview pane toolbar. This switches the preview pane from the browser view to a grid displaying the various email clients with which you can test in Litmus.

preview pane
Email Previews in Builder.

You’ll notice that, when switching to Email Previews, the icons in the preview pane toolbar are replaced by a link to Choose email clients. This opens a modal where you can pick exactly which email clients you want to test. Notice that there are options to select all clients based on platform (desktop, web, tablet/mobile) or select all clients based on vendor or device (Microsoft Outlook, Gmail, iOS clients, etc.). This allows you to quickly choose specific groups of clients for testing instead of testing in all clients by default.

email clients
Selecting email clients for testing.

Once you have your email clients selected, testing changes to your code is easy. Email Previews run every time you save changes to your email code in the code editor. Simply update your code, press ⌘ + S (on Mac) or CTRL + S (on PCs), and watch as Litmus returns updated screenshots of your email campaign in your email clients of choice.

Within the Email Previews view, you can select individual email clients to expand those clients, allowing you to view the full screenshot of your email in that client.

Viewing emails in specific clients allows a number of options. For some email clients, you can toggle images on and off in Previews. You can also view the code analysis for some clients. Code Analysis displays information on potential problems in your code for certain clients, usually highlighting HTML and CSS that isn’t fully supported in those clients. Both Toggle images and Code Analysis can be accessed via the preview pane toolbar.

Additionally, you can toggle mobile device views on 25+ mobile clients, allowing you to see exactly how your email renders on the actual device. Speaking of exactly how clients render your email, you can also see the processed version of your HTML. A lot of email clients will manipulate the code you send them, creating problematic changes in your HTML and CSS. You can now see exactly how your code is changed by toggling the processed HTML button. Your code editor will display the processed HTML, making hunting down tricky bugs easier than ever.

Processed HTML in Builder.

Many email clients have contextual help built in, as well. When available, you will see an alert above your Email Preview. Press More Info to display explanations for common problems in those email clients, along with links to articles explaining how to fix those problems.

Finally, you can quickly switch between clients using the arrow icons on either side of the email client name in the preview pane toolbar, or use the arrows on your keyboard.

Once you’re done viewing your email in a specific client, you can close that full preview by clicking the Close icon on the right side of the preview pane toolbar, which returns you to the Email Previews grid.

Start coding with Builder today

Now that you know your way around Builder’s code editor and preview pane, why not take them for a spin? No matter what coding techniques you use, Litmus Builder can help you develop more reliable campaigns quicker than ever before. And, if you’re part of a team, join us for the next installment of Litmus Builder Essentials to see how Builder can improve workflows across teams and organizations.

Try Litmus for 7 days and see how Builder can improve your development process today.

Get to know Litmus Builder

Quickly 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.

Get started with Builder →

 

Learn More in our Litmus Builder Essentials Series