Preview pane in Litmus Builder
The preview pane is located on the right side of the Builder view. The preview pane has three views: Browser, Email Previews, and QA Checks. The Browser view is a real-time preview of the code editor. The Email Previews view captures static screenshots of what the email looks like in 90+ email clients.
Browser view
The Browser view shows a live preview of your email as you build. Additionally, selecting any element in the Browser view will take you to the relevant code in Code Editor or editing options in Visual Editor. In between the code editor and the preview pane is a divider that can be dragged to resize the preview pane. When dragging the preview pane, its width and height dimensions are updated in real-time on the lower right side of the preview pane.
In the top left corner of the preview pane, there is a button that opens a dropdown menu with several display options:
NOTE: Since Builder is a web app, the Browser view uses the native rendering engine of the browser you’re using. Firefox uses Gecko, Chrome/Safari use WebKit, and Internet Explorer uses Trident.
Show Images
Images are on in the Browser view by default. Use the "Show images" option to toggle images off and on. This allows you to more easily style ALT text and get a baseline view of what your email will look like with images off.
NOTE: Every email client renders images off view differently. The images off view in Builder is not an exact representation of what your email will look like in many email clients, but rather a baseline. We highly recommend testing your email for best results.
Show gridlines
In the preview pane, you can toggle the grid view on/off. Grid view is disabled by default. Selecting "Show gridlines" will outline all of your HTML elements in the browser view to quickly identify and troubleshoot any layout issues. Hovering over an element will display its width and height pixel dimensions. With grid view on or off, you can select any element in the preview pane and your cursor will jump to and highlight that spot in the code editor for easy navigation.
Show subject line
The browser view displays a preview of your subject line that you can edit. This option in the toggles this on and off.
NOTE: the subject line preview in Builder does not add a subject line to your email code. This must be set up in your Email Service Provider.
Mobile and Desktop size options
These options in the dropdown quickly resize the preview pane to mobile or desktop dimensions.
Dark Mode
Use this toggle to switch the browser view between light and dark styles. When Dark Mode is toggled, the live browser view applies the Dark Mode styles defined in your email.
If your email does not have Dark Mode CSS defined, your email will not change when using the Dark Mode toggle. Viewing your email in Dark Mode as you build helps you fully optimize it for Dark Mode users before proceeding to final pre-send email previews and testing.
Visual Impairment Filters
Here you can select one of four Visual Impairment Filters to apply to your email, to check how your email displays for subscribers with certain visual impairments. These can be toggled on and off at any time. Any selected filter will apply to both the Browser view and the Email Previews view. Applying a filter does not count towards Previews usage.
Popout
Select "Popout" from the dropdown to open the preview pane in a brand new window and display a split view of your email in mobile (on the left) and desktop (on the right) dimensions. You can still resize the preview pane when it’s popped out and its dimensions will still update on the lower right in each preview. Just like in the popped-in view, you can drag the divider in between the mobile and desktop preview to resize the dimensions to be whatever you like. To exit the popped-out preview pane, simply close the popped-out browser window and the preview pane will pop back into its initial place in Builder.
Email Previews view
To capture screenshots in 90+ email clients, select "Email Previews" in the Preview pane:
The email clients will reflect your default list, but you can use the "Choose email clients" button to add or remove clients as needed in a given email.
Unlike the Browser view, previews do not update in real time as an email is edited. To update your previews, save your email with changes and open the Email Previews view again.
Saving the email with the Email Previews view open automatically runs the test in each selected client. You can also click the Rerun previews option in the Email Previews tab at any time to run a new set of previews. If you have unsaved changes in Builder, they will be auto-saved upon clicking Rerun previews.
Detail view
To view a full screenshot capture of an email client, simply select the preview thumbnail of that email client. This opens up the detail view for an individual email client. You can quickly move between email clients in order using the < or > buttons above the preview, or by using the arrow keys on your keyboard. To return to the main Email Previews thumbnail grid, close (X) out of the detail view.
Device view in detail view
To view a mobile email client with a frame simulating an actual device, use the Device View button in the top left of the detail view of a mobile client to toggle it on. This will allow you to view your email just as your subscribers would on that device, including scrolling.
Popping out individual email clients
You have the ability to pop out as many individual email clients as you'd like into their own separate windows for greater flexibility. Simply click on the pop-out icon on the lower right of each email client in the main Email Previews thumbnail grid view or click the popout icon in the top left in the email client detail view. Whenever you save an email (Cmd+S (Mac) or Ctrl+S (Windows)), the email will not only update in the Email Previews tab but also for all popped out email clients.
Images on/off view
For email clients that have images off view, use the "Toggle images" button in the detail view. Screenshots with images enabled are shown by default. Clicking the images icon will toggle images off. This allows you to more easily style ALT text and get a baseline view of what your email will look like with images off.
Processed HTML view
In the preview pane, you can toggle on the Processed HTML view. A first-in-class feature, Processed HTML support makes troubleshooting emails easier than ever. Processed HTML in Litmus shows what each email client actually processed your email markup into, making it easier than ever to pinpoint and diagnose rendering issues. Use it with Grid View to easily identify the cause of any issues.
Processed HTML support is available for all email clients, except for:
- Lotus Notes 7
- Windows 10 Mail
Code analysis
In certain clients, you can toggle on Code Analysis in the detailed view of an individual email client preview by selecting the "Code analysis" button. Any unsupported HTML or CSS properties in that specific email client will be highlighted. With Code Analysis activated, you can toggle through email clients to see support for HTML and CSS in each of those clients.
NOTE: Code Analysis is only available on limited desktop clients.
Recapture a screenshot
In the rare case Litmus returns an Email Preview screenshot with an error (e.g. images didn't load, the email was cut off, etc.), you can recapture the screenshot when in detail view for an email client by using the keyboard shortcut 'R'. You may only recapture up to 5 screenshots per minute.
QA Checks
In the QA Checks tab, you can run checks for First Impressions, Accessibility, Links, Tracking, and Loading Speed as you build your email. This tab is only available with the Code Editor open.