{"id":71936,"date":"2024-05-03T14:36:00","date_gmt":"2024-05-03T18:36:00","guid":{"rendered":"https:\/\/www.litmus.com\/?p=71936"},"modified":"2024-05-03T15:36:40","modified_gmt":"2024-05-03T19:36:40","slug":"ama-email-developer-tips","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/ama-email-developer-tips","title":{"rendered":"Ask Me Anything: Our Email Developer Shares Tips for Outlook, Mobile Coding, &#038; Dark Mode"},"content":{"rendered":"\n\n\t<div id=\"simple-text-block-block_3e9f3e665e17a5bfa0ba275518e16f49\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400;\">Today\u2019s a special day: we\u2019re giving you an exclusive look into the mind of Litmus&#8217; very own email developer, <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.linkedin.com\/in\/carinslater\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Carin Slater<\/span><\/a><span style=\"font-weight: 400;\">!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Carin is one of the technological masterminds behind all the <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/subscribe\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Litmus newsletters<\/span><\/a><span style=\"font-weight: 400;\"> and pretty much everything we send. As she puts it, she&#8217;s \u201can email geek who spent the last 9 years fighting with Outlook.\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In our recent virtual event, \u201c<\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/page.litmus.com\/ask-me-anything-coding-with-carin.html\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Ask Me Anything: Coding with Carin<\/span><\/a><span style=\"font-weight: 400;\">,\u201d she shared her best email development tips by answering some of the most common coding questions and troubleshooting emails (as submitted by email geeks) in real time.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Read on for her tips on:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#outlook\"><span style=\"font-weight: 400;\">Common Outlook issues<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#mobile\"><span style=\"font-weight: 400;\">Coding for mobile<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#dark-mode\"><span style=\"font-weight: 400;\">Getting started with Dark Mode<\/span><\/a><\/li>\n<\/ul>\n<h2 id=\"outlook\"><span style=\"font-weight: 400;\">Common Outlook issues<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Email marketers are well aware: working with <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/a-guide-to-rendering-differences-in-microsoft-outlook-clients\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Outlook<\/span><\/a><span style=\"font-weight: 400;\"> can be quite\u2026 complicated. But despite its quirks, knowing how to fix them can really sharpen your email development skills. As Carin reflects, \u201cI got to learn how to fix things in Outlook that people usually just ignore.\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s a rundown of some of Outlook\u2019s most common issues from Carin.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">How to fix white lines in Outlook<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">One of the most common quirks you\u2019ll see and hear about is white lines in Outlook. Here\u2019s some fixes to get rid of those pesky white lines.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Throw a table around it<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">One of Carin\u2019s favorite fixes for white lines is to simply place all the elements in a nested table. \u201cSometimes that&#8217;s all you need to do, and then the white lines go away,\u201d explains Carin.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For example, if there&#8217;s a button in a table cell within the email with a white line showing up at the bottom, Carin would wrap the button in another table.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Use even numbers for padding, font sizes, widths, etc.<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Outlook tends to add spacing and turns pixels into points. This can result in uneven spacing and cause white lines to appear within your email. However, by keeping numbers even, you can reduce the likelihood of these spacing issues and avoid those white lines from appearing.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Remove <\/span><span style=\"font-weight: 400;\"><code>dir=\u201drtl\u201d<\/code>\u00a0<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Sometimes direction equals right to left (or <\/span><span style=\"font-weight: 400;\"><code>dir=\u201drtl\u201d<\/code><\/span><span style=\"font-weight: 400;\">) <\/span><span style=\"font-weight: 400;\">will cause white lines\u2014which Carin troubleshoots in real time, below.<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n<div id=\"post-cta-buttonblock_dcecb46d83a3774ad3a46f393900407a\" class=\"block-post-cta-button mt-5\">\n  <div class=\"container px-0\">\n    <div class=\"row\">\n      <div class=\"blog-post-cta-button-wrapper col-12 col-lg-10 mx-auto p-4 d-block d-lg-flex align-items-lg-center align-items-start\">\n\t\t  \t\t  \t\t  \t\t  \t\t  \t\t  \t\t  \t\t \t\t\t  \t\t  \t\t  <div class=\"blog-post-cta-button-icon col-2 float-start mx-auto float-lg-start float-none background-white d-flex flex-column justify-content-center align-items-center text-center\">\n\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/10\/emailguardianicon.png\" alt=\"Litmus Email Guardian icon\" width=\"244\" height=\"244\"\/>\n\t\t\t\t\t  \t\t  <\/div><!--blog-post-cta-button-icon-->\n\t\t\t\t\t\t\t\t  \t\t  <div class=\"col-12 col-lg-9 ps-lg-4 ps-0 text-center text-lg-start mt-3 mt-lg-0\">\t\t\t  \t\t\t  <h2 class=\"h-sm\"><strong>Let Email Guardian keep a constant watch over your Outlook emails<\/strong><\/h2>\n\t\t\t   \n\t\t\t  \t\t\t\t\t<p>Start monitoring all of your automated sends and frequently used email templates to ensure your core email resources look good in email clients\u2014like Outlook.com and Outlook 365 Desktop.<\/p>\n\t\t\t\t\t \n\t\t\t  \t\t  <\/div><!--col-12 col-lg-9 ps-lg-4 ps-0 text-center text-lg-start mt-3 mt-lg-0-->\t\t\t  \t\t  <div class=\"text-center text-lg-end col-12 col-lg-1 ms-lg-2 ms-0\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"btn btn-primary\" rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-guardian\">\n\t\t\t\t\t\tProtect your emails\t\t\t\t\t\t<\/a>\n\t\t\t  \t\t  <\/div><!--text-center text-lg-end col-12 col-lg-1 ms-lg-2 ms-0-->\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        <\/div><!--blog-post-cta-button-wrapper-->\n    <\/div><!--row-->\n  <\/div><!--container-->\n<\/div>\n\n\n\n\t<div id=\"simple-text-block-block_5b6f0db03ea5a05079046afbba74aeed\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>&nbsp;<\/p>\n<h3><span style=\"font-weight: 400;\">Troubleshooting in real time: White lines in Outlook<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">In this case, Carin removed extraneous code and voil\u00e0\u2014white lines gone!\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Sometimes you need that <\/span><span style=\"font-weight: 400;\"><code>dir=\u201drtl\u201d<\/code><\/span><span style=\"font-weight: 400;\"> in your table cells for stacking. Courtney Fantinato has found a solution that <\/span><a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/discussions\/5286-mysterious-white-line-in-outlook\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">she shares in the Litmus Community<\/span><\/a><span style=\"font-weight: 400;\">.\u00a0<\/span><script src=\"\/\/fast.wistia.com\/embed\/medias\/v6dpsmmao2.jsonp\" async><\/script><br \/>\n<script src=\"\/\/fast.wistia.com\/assets\/external\/E-v1.js\" async><\/script><\/p>\n<div class=\"wistia_responsive_padding\" style=\"padding: 56.25% 0 0 0; position: relative;\">\n<div class=\"wistia_responsive_wrapper\" style=\"height: 100%; left: 0; position: absolute; top: 0; width: 100%;\">\n<div class=\"wistia_embed wistia_async_v6dpsmmao2 seo=false videoFoam=true\" style=\"height: 100%; width: 100%;\"><\/div>\n<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<h3><span style=\"font-weight: 400;\">Other quirks to watch out for<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">We mentioned Outlook was\u2026 quirky. Aside from white lines, keep in mind:<\/span><\/p>\n<ul>\n<li aria-level=\"1\"><strong>Widths on your tables have to be in pixels.<\/strong> <span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">If you have them in percentages, it will blow out your email. Widths on tables work best in style attributes.<\/span><\/span><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><strong>Make sure you set image widths with the width attribute.<\/strong><span style=\"font-weight: 400;\"> Outlook will ignore widths set in style attributes on images and will display the image at the file size if you don\u2019t include a width attribute.<\/span><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><strong>Don\u2019t use borders on tables\/table cells.<\/strong> <span style=\"font-weight: 400;\">If you put it on one, and it&#8217;s not showing up, try putting it on a table cell instead of on the actual table.<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><strong>Rounded corners require VML and VML shapes.<\/strong> <span style=\"font-weight: 400;\">As Carin puts it: rounded corners are annoying. Just give in to square corners (unless you really can\u2019t).<\/span><\/li>\n<\/ul>\n<h2 id=\"mobile\"><span style=\"font-weight: 400;\">Coding for mobile<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Another common topic is coding for mobile\u2014specifically making things stack<\/span><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s a peek at how we do things at Litmus.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Use <\/span><span style=\"font-weight: 400;\"><code>@media<\/code><\/span><span style=\"font-weight: 400;\"> queries to target different screen sizes<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">At Litmus, we use <\/span><span style=\"font-weight: 400;\"><code>@media<\/code><\/span><span style=\"font-weight: 400;\"> queries with a max width of 600 pixels. Everything that&#8217;s past that range is desktop, and everything less under will show once a screen gets less than 600 pixels.<\/span><\/p>\n<p><code>@media screen and (max-width:600px)<\/code><\/p>\n<p><span style=\"font-weight: 400;\">Some HTML elements are naturally responsive, such as <\/span><span style=\"font-weight: 400;\"><code>&lt;div&gt;<\/code><\/span><span style=\"font-weight: 400;\">s. Since mobile devices can come in lots of different sizes, identifying and keeping track of specific breakpoints can get tedious. Using one breakpoint and relying on the natural responsiveness of HTML makes it easier to code emails. Additionally, with only one breakpoint, it\u2019s easier to find and address any errors.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Make things stack easily (without floats)<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Another tip: use <\/span><span style=\"font-weight: 400;\"><code>display: inline-block<\/code> <\/span><span style=\"font-weight: 400;\">to create stacking <\/span><span style=\"font-weight: 400;\"><code>&lt;div&gt;<\/code><\/span><span style=\"font-weight: 400;\">s\u2014without the use of floats.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u201cI&#8217;ll use <\/span><span style=\"font-weight: 400;\"><code>display: inline-block<\/code><\/span><span style=\"font-weight: 400;\"> on two tables next to each other that are going to stack,\u201d says Carin. \u201cIt\u2019ll stack fine without having to put anything new on there.\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If they don&#8217;t stack\u2014or if there&#8217;s too much space between those tables\u2014use conditional code to make sure they&#8217;re working properly on Outlook. \u201cFor conditional code, I&#8217;ll put those in Outlook in two table cells, so that they&#8217;re right next to each other, and then every place else they stack nicely.\u201d<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Troubleshooting in real time: Mobile images not displaying<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">In this example, the email rendered as it should\u2014except for on Outlook mobile. Here\u2019s what Carin found when she went through the code.<\/span><script src=\"\/\/fast.wistia.com\/embed\/medias\/ei0zz1gty7.jsonp\" async><\/script><br \/>\n<script src=\"\/\/fast.wistia.com\/assets\/external\/E-v1.js\" async><\/script><\/p>\n<div class=\"wistia_responsive_padding\" style=\"padding: 56.25% 0 0 0; position: relative;\">\n<div class=\"wistia_responsive_wrapper\" style=\"height: 100%; left: 0; position: absolute; top: 0; width: 100%;\">\n<div class=\"wistia_embed wistia_async_ei0zz1gty7 seo=false videoFoam=true\" style=\"height: 100%; width: 100%;\"><\/div>\n<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<h2 id=\"dark-mode\"><span style=\"font-weight: 400;\">Getting started with Dark Mode<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Now moving onto a fan-favorite topic: <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-dark-mode-for-email-marketers\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Dark Mode<\/span><\/a><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Make sure meta tags are included<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Rule number one: remember to include meta tags from the start. Meta tags enable email clients to recognize that the email is designed in Dark Mode.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">While media queries and <\/span><span style=\"font-weight: 400;\"><code>data-ogsc<\/code> <\/span><span style=\"font-weight: 400;\">and <\/span><span style=\"font-weight: 400;\"><code>data-ogsb<\/code><\/span><span style=\"font-weight: 400;\"> tags are necessary to target specific elements, they won&#8217;t have any effect if those meta tags are not included at the beginning.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Image swap works\u2014but only for certain email clients<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">You can swap out Light Mode images for Dark Mode images, but only with certain email clients. For the most part, Image swap is supported by Apple clients (iOS Mail, macOS Mail, and iPadOS Mail).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Image swap also works for Outlook.com, but <\/span><i><span style=\"font-weight: 400;\">only<\/span><\/i><span style=\"font-weight: 400;\"> if you link the images. \u201cIf you don&#8217;t want your images linked, then make sure you make images that work in both Light and Dark Mode. If you don&#8217;t mind linking your images out, then you can have those swap out in Outlook as well,\u201d says Carin.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Dark Mode snippets<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Bookmark this: we\u2019ve compiled <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-dark-mode-for-email-marketers\/#part2\"><span style=\"font-weight: 400;\">nine code snippets<\/span><\/a><span style=\"font-weight: 400;\"> from the email community to help solve your biggest Dark Mode challenges.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Troubleshooting in real time: Dark Mode\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Dark Mode wasn\u2019t working as it should in this email. Carin immediately spots that meta tags weren\u2019t included, and tinkers with a few other elements to make it more friendly for Dark Mode.<\/span>\u00a0<script src=\"\/\/fast.wistia.com\/embed\/medias\/ah9wyj5bxj.jsonp\" async><\/script><br \/>\n<script src=\"\/\/fast.wistia.com\/assets\/external\/E-v1.js\" async><\/script><\/p>\n<div class=\"wistia_responsive_padding\" style=\"padding: 56.25% 0 0 0; position: relative;\">\n<div class=\"wistia_responsive_wrapper\" style=\"height: 100%; left: 0; position: absolute; top: 0; width: 100%;\">\n<div class=\"wistia_embed wistia_async_ah9wyj5bxj seo=false videoFoam=true\" style=\"height: 100%; width: 100%;\"><\/div>\n<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400;\">Want more?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Dive deep into the mind of Carin Slater in the full replay of <\/span><strong><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/page.litmus.com\/ask-me-anything-coding-with-carin.html\" target=\"_blank\" rel=\"noopener\">Ask Me Anything: Coding with Carin<\/a><\/strong><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Got questions? Drop them in <\/span><a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Litmus Community<\/span><\/a><span style=\"font-weight: 400;\"> or reach out to us <\/span><a rel=\"noopener\" target=\"_blank\" href=\"mailto:hello@litmus.com\"><span style=\"font-weight: 400;\">hello@litmus.com<\/span><\/a><span style=\"font-weight: 400;\">. We\u2019d love to help!<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n<div id=\"post-cta-buttonblock_dcecb46d83a3774ad3a46f393900407a\" class=\"block-post-cta-button mt-5\">\n  <div class=\"container px-0\">\n    <div class=\"row\">\n      <div class=\"blog-post-cta-button-wrapper col-12 col-lg-10 mx-auto p-4 d-block d-lg-flex align-items-lg-center align-items-start\">\n\t\t  \t\t  \t\t  \t\t  \t\t  \t\t  \t\t  \t\t \t\t\t  \t\t  \t\t  <div class=\"blog-post-cta-button-icon col-2 float-start mx-auto float-lg-start float-none background-white d-flex flex-column justify-content-center align-items-center text-center\">\n\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/10\/emailguardianicon.png\" alt=\"Litmus Email Guardian icon\" width=\"244\" height=\"244\"\/>\n\t\t\t\t\t  \t\t  <\/div><!--blog-post-cta-button-icon-->\n\t\t\t\t\t\t\t\t  \t\t  <div class=\"col-12 col-lg-9 ps-lg-4 ps-0 text-center text-lg-start mt-3 mt-lg-0\">\t\t\t  \t\t\t  <h2 class=\"h-sm\"><strong>Let Email Guardian keep a constant watch over your Outlook emails<\/strong><\/h2>\n\t\t\t   \n\t\t\t  \t\t\t\t\t<p>Start monitoring all of your automated sends and frequently used email templates to ensure your core email resources look good in email clients\u2014like Outlook.com and Outlook 365 Desktop.<\/p>\n\t\t\t\t\t \n\t\t\t  \t\t  <\/div><!--col-12 col-lg-9 ps-lg-4 ps-0 text-center text-lg-start mt-3 mt-lg-0-->\t\t\t  \t\t  <div class=\"text-center text-lg-end col-12 col-lg-1 ms-lg-2 ms-0\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"btn btn-primary\" rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-guardian\">\n\t\t\t\t\t\tProtect your emails\t\t\t\t\t\t<\/a>\n\t\t\t  \t\t  <\/div><!--text-center text-lg-end col-12 col-lg-1 ms-lg-2 ms-0-->\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        <\/div><!--blog-post-cta-button-wrapper-->\n    <\/div><!--row-->\n  <\/div><!--container-->\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Carin Slater shares her best email developer tips for common coding question, including Outlook issues, coding for mobile, and Dark Mode emails.<\/p>\n","protected":false},"author":25,"featured_media":71968,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"tags":[809,10272,499],"blog_category":[10300],"class_list":["post-71936","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-dark-mode","tag-developer","tag-email-coding","blog_category-email-building"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Ask Me Anything: Our Email Developer Shares Tips for Outlook, Mobile Coding, &amp; Dark Mode - Litmus<\/title>\n<meta name=\"description\" content=\"Carin Slater shares her best email developer tips for common coding question, including Outlook issues, coding for mobile, and Dark Mode emails.\" \/>\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\/ama-email-developer-tips\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ask Me Anything: Our Email Developer Shares Tips for Outlook, Mobile Coding, &amp; Dark Mode\" \/>\n<meta property=\"og:description\" content=\"Carin Slater shares her best email developer tips for common coding question, including Outlook issues, coding for mobile, and Dark Mode emails.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.litmus.com\/blog\/ama-email-developer-tips\" \/>\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=\"2024-05-03T18:36:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-03T19:36:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Coding-with-CarinLeveraging.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1380\" \/>\n\t<meta property=\"og:image:height\" content=\"725\" \/>\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":"Ask Me Anything: Our Email Developer Shares Tips for Outlook, Mobile Coding, & Dark Mode - Litmus","description":"Carin Slater shares her best email developer tips for common coding question, including Outlook issues, coding for mobile, and Dark Mode emails.","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\/ama-email-developer-tips","og_locale":"en_US","og_type":"article","og_title":"Ask Me Anything: Our Email Developer Shares Tips for Outlook, Mobile Coding, & Dark Mode","og_description":"Carin Slater shares her best email developer tips for common coding question, including Outlook issues, coding for mobile, and Dark Mode emails.","og_url":"https:\/\/www.litmus.com\/blog\/ama-email-developer-tips","og_site_name":"Litmus","article_publisher":"https:\/\/www.facebook.com\/litmusapp","article_published_time":"2024-05-03T18:36:00+00:00","article_modified_time":"2024-05-03T19:36:40+00:00","og_image":[{"width":1380,"height":725,"url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Coding-with-CarinLeveraging.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\/ama-email-developer-tips#article","isPartOf":{"@id":"https:\/\/www.litmus.com\/blog\/ama-email-developer-tips"},"author":{"name":"","@id":""},"headline":"Ask Me Anything: Our Email Developer Shares Tips for Outlook, Mobile Coding, &#038; Dark Mode","datePublished":"2024-05-03T18:36:00+00:00","dateModified":"2024-05-03T19:36:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/ama-email-developer-tips"},"wordCount":14,"publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/ama-email-developer-tips#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Coding-with-CarinLeveraging.png","keywords":["Dark Mode","Developer","Email Coding"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.litmus.com\/blog\/ama-email-developer-tips","url":"https:\/\/www.litmus.com\/blog\/ama-email-developer-tips","name":"Ask Me Anything: Our Email Developer Shares Tips for Outlook, Mobile Coding, & Dark Mode - Litmus","isPartOf":{"@id":"https:\/\/www.litmus.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/ama-email-developer-tips#primaryimage"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/ama-email-developer-tips#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Coding-with-CarinLeveraging.png","datePublished":"2024-05-03T18:36:00+00:00","dateModified":"2024-05-03T19:36:40+00:00","description":"Carin Slater shares her best email developer tips for common coding question, including Outlook issues, coding for mobile, and Dark Mode emails.","breadcrumb":{"@id":"https:\/\/www.litmus.com\/blog\/ama-email-developer-tips#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.litmus.com\/blog\/ama-email-developer-tips"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/blog\/ama-email-developer-tips#primaryimage","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Coding-with-CarinLeveraging.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Coding-with-CarinLeveraging.png","width":1380,"height":725},{"@type":"BreadcrumbList","@id":"https:\/\/www.litmus.com\/blog\/ama-email-developer-tips#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.litmus.com\/"},{"@type":"ListItem","position":2,"name":"Ask Me Anything: Our Email Developer Shares Tips for Outlook, Mobile Coding, &#038; Dark Mode"}]},{"@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\/71936","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\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/comments?post=71936"}],"version-history":[{"count":14,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/71936\/revisions"}],"predecessor-version":[{"id":96822,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/71936\/revisions\/96822"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media\/71968"}],"wp:attachment":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media?parent=71936"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/tags?post=71936"},{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/blog_category?post=71936"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}