{"id":3528,"date":"2019-06-06T00:00:00","date_gmt":"2019-06-06T00:00:00","guid":{"rendered":"https:\/\/www.litmus.com\/blog\/how-litmus-uses-litmus-how-we-test-and-troubleshoot-emails-with-litmus-builder\/"},"modified":"2024-08-22T11:03:11","modified_gmt":"2024-08-22T15:03:11","slug":"how-litmus-uses-litmus-how-we-test-and-troubleshoot-emails-with-litmus-builder","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/how-litmus-uses-litmus-how-we-test-and-troubleshoot-emails-with-litmus-builder","title":{"rendered":"How to Use Litmus to Test and Troubleshoot Emails with Litmus Builder"},"content":{"rendered":"

Ever wondered how to use Litmus to make your email testing and troubleshooting more seamless? Read on for an inside look at how we use <\/span>Litmus Builder<\/span><\/a>\u2014our code editor made for email developers\u2014 in our own email process<\/span> to test and troubleshoot our own emails before we send them.<\/span><\/p>\n

Edit your code and fix issues in real-time<\/span><\/h2>\n

One of the things we love most about Builder is that it presents your code and a browser view of the email side-by-side, making it easy to see what your email looks like as you code and make edits.<\/span><\/p>\n

Take this example from our May Newsletter:<\/span><\/p>\n

\"\"<\/figure>\n

By viewing the code side-by-side with the email itself, it\u2019s easier to spot-edit any issues with the design or any typos in the copy.<\/span><\/p>\n

Pro tip: Quickly navigate your code with grid view<\/strong><\/p>\n

If we spot an element that needs fixing, grid view makes it easy to jump right to that very section. In the preview pane, a click on the grid icon will toggle on grid view. This view outlines all of our HTML elements in the design preview, and a click on the elements that we\u2019d like to edit takes us right to the corresponding code section in the code editor. It\u2019s much faster than searching through your code to find the right section, especially if your email has a <\/span>lot<\/span><\/em> of code.<\/span><\/p>\n

\"\"<\/figure>\n

After we\u2019re comfortable with the email in Builder\u2019s preview pane, we run email previews on all of the major email devices and apps.<\/span><\/p>\n

Making sure every email looks great by previewing how it looks in multiple devices and apps<\/span><\/h2>\n

Alice Li, our Principal Email Engineer, knows the frustration of quirky rendering in different email clients. Before <\/span>every<\/span><\/i> email send, she does a thorough check of every preview to make sure there are no errors or odd renderings. Imagine Litmus as your very own testing lab, filled with over 90 popular clients and devices<\/a>, including Gmail, iPhone, and key international web clients\u2014all available to you whenever you hit \u201cRun Email Previews\u201d within Builder.<\/span><\/p>\n

For every email we send, I check how it renders in every device and app to ensure there are no errors. If there is an error in a specific email client, I\u2019ll edit the email right there in Litmus Builder and double check that preview to make sure it\u2019s fixed. It helps me catch a lot of things I might not catch otherwise.<\/span><\/p>\n

-Alice Li, Principal Email Engineer<\/p><\/blockquote>\n

Pro tip: Customize your default email clients for testing
\n<\/strong>Litmus pre-selects a set of popular email clients as default clients for testing, but you can customize<\/a> those to fit your needs. For example, we know that none of our subscribers open our emails in Lotus Notes\u2014so we don\u2019t have this client selected for testing. Focusing our testing only on the email clients that matter to our audience helps save time during the testing and email QA test<\/a> process. <\/span><\/p>\n

Once we run our previews, we really focus on the details of each email client. By clicking on a thumbnail, we can open up the detail view for an individual email client to check the full screen capture for issues. We like to use the left and right arrow keys to easily flip through the previews in different email clients.<\/span><\/p>\n

\"\"<\/figure>\n

But what happens when we <\/span>do<\/span><\/i> spot an error in our emails in one of the devices or apps, especially one that\u2019s used by a large portion of our subscriber base? Maybe the spacing is off on our text in Gmail, or one of our images is left-justified in Outlook when it should be centered.<\/span><\/p>\n

Fixing these errors<\/span><\/a> requires spot checking in those clients, and often requires a simple fix that will only affect the rendering in that client. Whenever we make these edits, we\u2019ll rerun the preview for that specific client to ensure the fix worked\u2014no need to run all of the other previews for a single email client fix.<\/span><\/p>\n

Pro tip: Refresh a single Email Preview without running a full test
\n<\/strong>You can recapture the screenshot when in detail view for an email client by using the keyboard shortcut \u201cR.\u201d<\/span><\/p>\n

Some errors involve specific email clients making changes, stripping your code or even injecting extra code. To get to the bottom of what’s happening in these situations, it can be incredibly helpful to see the final code after<\/em> it has been processed by the email client<\/a>. Builder lets you do just that.\u00a0Hitting \u201cView Processed HTML<\/a>\u201d in the top-left corner of that email client\u2019s preview lets us see what our processed code looks like, making it easier to pinpoint problems and make a quick fix.<\/span><\/p>\n

\"\"<\/figure>\n

After we\u2019ve gone through all of our steps in Builder, we also run a checklist to make double, <\/span>triple<\/span><\/i> sure that everything is working properly. We\u2019ll cover how we use checklists in an upcoming \u201cHow Litmus Uses Litmus\u201d post, coming soon!<\/span><\/p>\n

Email testing and troubleshooting made easy with Litmus<\/span><\/h2>\n

Want to learn more about how Litmus can help bring your emails to the next level?\u00a0Learn more about Email Testing with Litmus<\/a> or\u00a0reach out to a Litmus expert\u00a0<\/a>for more information on how Litmus can help you send better email.<\/p>\n","protected":false},"excerpt":{"rendered":"

We know that building an email and testing it across different environments is hard, but Litmus Builder\u2014our code editor made for email developers\u2014makes it a whole lot easier. And of course, we use it in our own email process, too!<\/p>\n

Here’s a behind-the-scenes look at how we use Builder to test and troubleshoot our own emails before we send them.<\/p>\n","protected":false},"author":3,"featured_media":3529,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"tags":[],"blog_category":[549,53],"class_list":["post-3528","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","blog_category-product","blog_category-tips-resources"],"yoast_head":"\nHow to Use Litmus to Test and Troubleshoot Emails with Litmus Builder - Litmus<\/title>\n<meta name=\"description\" content=\"We know that building an email and testing it across different environments is hard, but Litmus Builder\u2014our code editor made for email developers\u2014makes it a whole lot easier. And of course, we use it in our own email process, too! Here's a behind-the-scenes look at how we use Builder to test and troubleshoot our own emails before we send them.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.litmus.com\/blog\/how-litmus-uses-litmus-how-we-test-and-troubleshoot-emails-with-litmus-builder\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use Litmus to Test and Troubleshoot Emails with Litmus Builder\" \/>\n<meta property=\"og:description\" content=\"We know that building an email and testing it across different environments is hard, but Litmus Builder\u2014our code editor made for email developers\u2014makes it a whole lot easier. And of course, we use it in our own email process, too! Here's a behind-the-scenes look at how we use Builder to test and troubleshoot our own emails before we send them.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.litmus.com\/blog\/how-litmus-uses-litmus-how-we-test-and-troubleshoot-emails-with-litmus-builder\" \/>\n<meta property=\"og:site_name\" content=\"Litmus\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/litmusapp\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-06T00:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-22T15:03:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/how-litmus-uses-email-previews.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1380\" \/>\n\t<meta property=\"og:image:height\" content=\"724\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@litmusapp\" \/>\n<meta name=\"twitter:site\" content=\"@litmusapp\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Use Litmus to Test and Troubleshoot Emails with Litmus Builder - Litmus","description":"We know that building an email and testing it across different environments is hard, but Litmus Builder\u2014our code editor made for email developers\u2014makes it a whole lot easier. And of course, we use it in our own email process, too! Here's a behind-the-scenes look at how we use Builder to test and troubleshoot our own emails before we send them.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.litmus.com\/blog\/how-litmus-uses-litmus-how-we-test-and-troubleshoot-emails-with-litmus-builder","og_locale":"en_US","og_type":"article","og_title":"How to Use Litmus to Test and Troubleshoot Emails with Litmus Builder","og_description":"We know that building an email and testing it across different environments is hard, but Litmus Builder\u2014our code editor made for email developers\u2014makes it a whole lot easier. And of course, we use it in our own email process, too! Here's a behind-the-scenes look at how we use Builder to test and troubleshoot our own emails before we send them.","og_url":"https:\/\/www.litmus.com\/blog\/how-litmus-uses-litmus-how-we-test-and-troubleshoot-emails-with-litmus-builder","og_site_name":"Litmus","article_publisher":"https:\/\/www.facebook.com\/litmusapp","article_published_time":"2019-06-06T00:00:00+00:00","article_modified_time":"2024-08-22T15:03:11+00:00","og_image":[{"width":1380,"height":724,"url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/how-litmus-uses-email-previews.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_creator":"@litmusapp","twitter_site":"@litmusapp","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.litmus.com\/blog\/how-litmus-uses-litmus-how-we-test-and-troubleshoot-emails-with-litmus-builder#article","isPartOf":{"@id":"https:\/\/www.litmus.com\/blog\/how-litmus-uses-litmus-how-we-test-and-troubleshoot-emails-with-litmus-builder"},"author":{"name":"","@id":""},"headline":"How to Use Litmus to Test and Troubleshoot Emails with Litmus Builder","datePublished":"2019-06-06T00:00:00+00:00","dateModified":"2024-08-22T15:03:11+00:00","mainEntityOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/how-litmus-uses-litmus-how-we-test-and-troubleshoot-emails-with-litmus-builder"},"wordCount":893,"commentCount":0,"publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/how-litmus-uses-litmus-how-we-test-and-troubleshoot-emails-with-litmus-builder#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/how-litmus-uses-email-previews.png","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.litmus.com\/blog\/how-litmus-uses-litmus-how-we-test-and-troubleshoot-emails-with-litmus-builder#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.litmus.com\/blog\/how-litmus-uses-litmus-how-we-test-and-troubleshoot-emails-with-litmus-builder","url":"https:\/\/www.litmus.com\/blog\/how-litmus-uses-litmus-how-we-test-and-troubleshoot-emails-with-litmus-builder","name":"How to Use Litmus to Test and Troubleshoot Emails with Litmus Builder - Litmus","isPartOf":{"@id":"https:\/\/www.litmus.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/how-litmus-uses-litmus-how-we-test-and-troubleshoot-emails-with-litmus-builder#primaryimage"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/how-litmus-uses-litmus-how-we-test-and-troubleshoot-emails-with-litmus-builder#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/how-litmus-uses-email-previews.png","datePublished":"2019-06-06T00:00:00+00:00","dateModified":"2024-08-22T15:03:11+00:00","description":"We know that building an email and testing it across different environments is hard, but Litmus Builder\u2014our code editor made for email developers\u2014makes it a whole lot easier. And of course, we use it in our own email process, too! Here's a behind-the-scenes look at how we use Builder to test and troubleshoot our own emails before we send them.","breadcrumb":{"@id":"https:\/\/www.litmus.com\/blog\/how-litmus-uses-litmus-how-we-test-and-troubleshoot-emails-with-litmus-builder#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.litmus.com\/blog\/how-litmus-uses-litmus-how-we-test-and-troubleshoot-emails-with-litmus-builder"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/blog\/how-litmus-uses-litmus-how-we-test-and-troubleshoot-emails-with-litmus-builder#primaryimage","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/how-litmus-uses-email-previews.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/how-litmus-uses-email-previews.png","width":1380,"height":724},{"@type":"BreadcrumbList","@id":"https:\/\/www.litmus.com\/blog\/how-litmus-uses-litmus-how-we-test-and-troubleshoot-emails-with-litmus-builder#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.litmus.com\/"},{"@type":"ListItem","position":2,"name":"How to Use Litmus to Test and Troubleshoot Emails with Litmus Builder"}]},{"@type":"WebSite","@id":"https:\/\/www.litmus.com\/#website","url":"https:\/\/www.litmus.com\/","name":"Litmus","description":"Are you getting the most out of your email marketing?","publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.litmus.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.litmus.com\/#organization","name":"Litmus Software","url":"https:\/\/www.litmus.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","width":600,"height":314,"caption":"Litmus Software"},"image":{"@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/litmusapp","https:\/\/x.com\/litmusapp"]},{"@type":"Person","@id":""}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/3528","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/comments?post=3528"}],"version-history":[{"count":3,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/3528\/revisions"}],"predecessor-version":[{"id":100753,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/3528\/revisions\/100753"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media\/3529"}],"wp:attachment":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media?parent=3528"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/tags?post=3528"},{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/blog_category?post=3528"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}