Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps
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!
Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps
