Today’s a special day: we’re giving you an exclusive look into the mind of Litmus’ very own email developer, Carin Slater!
Carin is one of the technological masterminds behind all the Litmus newsletters and pretty much everything we send. As she puts it, she’s an “an email geek who spent the last 9 years fighting with Outlook.”
In our recent virtual event, “Ask Me Anything: Coding with Carin,” 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.
Read on for her tips on:
Common Outlook issues
Email marketers are well aware: working with Outlook can be quite… complicated. But despite its quirks, knowing how to fix them can really sharpen your email development skills. As Carin reflects, “I got to learn how to fix things in Outlook that people usually just ignore.”
Here’s a rundown of some of Outlook’s most common issues from Carin.
How to fix white lines in Outlook
One of the most common quirks you’ll see and hear about is white lines in Outlook. Here’s some fixes to get rid of those pesky white lines.
Throw a table around it
One of Carin’s favorite fixes for white lines is to simply place all the elements in a nested table. “Sometimes that’s all you need to do, and then the white lines go away,” explains Carin.
For example, if there’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.
Use even numbers for padding, font sizes, widths, etc.
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.
Remove dir=”rtl”
Sometimes direction equals right to left (or dir=”rtl”) will cause white lines—which Carin troubleshoots in real time, below.
Troubleshooting in real time: White lines in Outlook
In this case, Carin removed extraneous code and voilà—white lines gone!
Sometimes you need that dir=”rtl” in your table cells for stacking. Courtney Fantinato has found a solution that she shares in the Litmus Community.
Other quirks to watch out for
We mentioned Outlook was… quirky. Aside from white lines, keep in mind:
- Widths on your tables have to be in pixels. If you have them in percentages, it will blow out your email. Widths on tables work best in style attributes.
- Make sure you set image widths with the width attribute. Outlook will ignore widths set in style attributes on images and will display the image at the file size if you don’t include a width attribute.
- Don’t use borders on tables/table cells. If you put it on one, and it’s not showing up, try putting it on a table cell instead of on the actual table.
- Rounded corners require VML and VML shapes. As Carin puts it: rounded corners are annoying. Just give in to square corners (unless you really can’t).
Coding for mobile
Another common topic is coding for mobile—specifically making things stack.
Here’s a peek at how we do things at Litmus.
Use @media queries to target different screen sizes
At Litmus, we use @media queries with a max width of 600 pixels. Everything that’s past that range is desktop, and everything less under will show once a screen gets less than 600 pixels.
@media screen and (max-width:600px)
Some HTML elements are naturally responsive, such as
Make things stack easily (without floats)
Another tip: use display: inline-block to create stacking
“I’ll use display: inline-block on two tables next to each other that are going to stack,” says Carin. “It’ll stack fine without having to put anything new on there.”
If they don’t stack—or if there’s too much space between those tables—use conditional code to make sure they’re working properly on Outlook. “For conditional code, I’ll put those in Outlook in two table cells, so that they’re right next to each other, and then every place else they stack nicely.”
Troubleshooting in real time: Mobile images not displaying
In this example, the email rendered as it should—except for on Outlook mobile. Here’s what Carin found when she went through the code.
Getting started with Dark Mode
Now moving onto a fan-favorite topic: Dark Mode.
Make sure meta tags are included
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.
While media queries and data-ogsc and data-ogsb tags are necessary to target specific elements, they won’t have any effect if those meta tags are not included at the beginning.
Image swap works—but only for certain email clients
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).
Image swap also works for Outlook.com, but only if you link the images. “If you don’t want your images linked, then make sure you make images that work in both Light and Dark Mode. If you don’t mind linking your images out, then you can have those swap out in Outlook as well,” says Carin.
Dark Mode snippets
Bookmark this: we’ve compiled nine code snippets from the email community to help solve your biggest Dark Mode challenges.
Troubleshooting in real time: Dark Mode
Dark Mode wasn’t working as it should in this email. Carin immediately spots that meta tags weren’t included, and tinkers with a few other elements to make it more friendly for Dark Mode.
Want more?
Dive deep into the mind of Carin Slater in the full replay of Ask Me Anything: Coding with Carin.
Got questions? Drop them in Litmus Community or reach out to us hello@litmus.com. We’d love to help!
The post Ask Me Anything: Our Email Developer Shares Tips for Outlook, Mobile Coding, & Dark Mode appeared first on Litmus.
