At present’s a big day: we’re supplying you with an unique look into the thoughts of Litmus’ very personal e-mail developer, Carin Slater!
Carin is among the technological masterminds behind all of the Litmus newsletters and just about every part we ship. As she places it, she’s an “an e-mail geek who spent the final 9 years combating with Outlook.”
In our latest digital occasion, “Ask Me Something: Coding with Carin,” she shared her finest e-mail growth suggestions by answering among the commonest coding questions and troubleshooting emails (as submitted by e-mail geeks) in actual time.
Learn on for her tips about:
Widespread Outlook points
Electronic mail entrepreneurs are properly conscious: working with Outlook will be fairly… sophisticated. However regardless of its quirks, figuring out tips on how to repair them can actually sharpen your e-mail growth abilities. As Carin displays, “I received to discover ways to make things better in Outlook that individuals often simply ignore.”
Right here’s a rundown of a few of Outlook’s commonest points from Carin.
Find out how to repair white traces in Outlook
Some of the widespread quirks you’ll see and listen to about is white traces in Outlook. Right here’s some fixes to do away with these pesky white traces.
Throw a desk round it
One in all Carin’s favourite fixes for white traces is to easily place all the weather in a nested desk. “Generally that’s all it’s essential do, after which the white traces go away,” explains Carin.
For instance, if there’s a button in a desk cell throughout the e-mail with a white line displaying up on the backside, Carin would wrap the button in one other desk.
Use even numbers for padding, font sizes, widths, and so forth.
Outlook tends so as to add spacing and turns pixels into factors. This can lead to uneven spacing and trigger white traces to look inside your e-mail. Nevertheless, by maintaining numbers even, you possibly can cut back the chance of those spacing points and keep away from these white traces from showing.
Take away dir=”rtl”
Generally path equals proper to left (or dir=”rtl”) will trigger white traces—which Carin troubleshoots in actual time, beneath.
Troubleshooting in actual time: White traces in Outlook
On this case, Carin eliminated extraneous code and voilà—white traces gone!
Generally you want that dir=”rtl” in your desk cells for stacking. Courtney Fantinato has discovered an answer that she shares within the Litmus Neighborhood.
Different quirks to be careful for
We talked about Outlook was… quirky. Other than white traces, take note:
- Widths in your tables need to be in pixels. In case you have them in percentages, it would blow out your e-mail. Widths on tables work finest in fashion attributes.
- Be sure you set picture widths with the width attribute. Outlook will ignore widths set in fashion attributes on pictures and can show the picture on the file measurement for those who don’t embody a width attribute.
- Don’t use borders on tables/desk cells. If you happen to put it on one, and it’s not displaying up, strive placing it on a desk cell as a substitute of on the precise desk.
- Rounded corners require VML and VML shapes. As Carin places it: rounded corners are annoying. Simply give in to sq. corners (except you actually can’t).
Coding for cellular
One other widespread matter is coding for cellular—particularly making issues stack.
Right here’s a peek at how we do issues at Litmus.
Use @media queries to focus on totally different display sizes
At Litmus, we use @media queries with a max width of 600 pixels. Every little thing that’s previous that vary is desktop, and every part much less below will present as soon as a display will get lower than 600 pixels.
@media display and (max-width:600px)
Some HTML components are naturally responsive, corresponding to <div>s. Since cellular units can are available a lot of totally different sizes, figuring out and maintaining observe of particular breakpoints can get tedious. Utilizing one breakpoint and counting on the pure responsiveness of HTML makes it simpler to code emails. Moreover, with just one breakpoint, it’s simpler to seek out and deal with any errors.
Make issues stack simply (with out floats)
One other tip: use show: inline-block to create stacking <div>s—with out using floats.
“I’ll use show: inline-block on two tables subsequent to one another which can be going to stack,” says Carin. “It’ll stack superb with out having to place something new on there.”
In the event that they don’t stack—or if there’s an excessive amount of house between these tables—use conditional code to verify they’re working correctly on Outlook. “For conditional code, I’ll put these in Outlook in two desk cells, in order that they’re proper subsequent to one another, after which each place else they stack properly.”
Troubleshooting in actual time: Cell pictures not displaying
On this instance, the e-mail rendered because it ought to—aside from on Outlook cellular. Right here’s what Carin discovered when she went by means of the code.
Getting began with Darkish Mode
Now transferring onto a fan-favorite matter: Darkish Mode.
Ensure meta tags are included
Rule primary: bear in mind to incorporate meta tags from the beginning. Meta tags allow e-mail purchasers to acknowledge that the e-mail is designed in Darkish Mode.
Whereas media queries and data-ogsc and data-ogsb tags are mandatory to focus on particular components, they gained’t have any impact if these meta tags will not be included initially.
Picture swap works—however just for sure e-mail purchasers
You may swap out Gentle Mode pictures for Darkish Mode pictures, however solely with sure e-mail purchasers. For essentially the most half, Picture swap is supported by Apple purchasers (iOS Mail, macOS Mail, and iPadOS Mail).
Picture swap additionally works for Outlook.com, however solely for those who hyperlink the pictures. “If you happen to don’t need your pictures linked, then be sure to make pictures that work in each Gentle and Darkish Mode. If you happen to don’t thoughts linking your pictures out, then you possibly can have these swap out in Outlook as properly,” says Carin.
Darkish Mode snippets
Bookmark this: we’ve compiled 9 code snippets from the e-mail neighborhood to assist remedy your largest Darkish Mode challenges.
Troubleshooting in actual time: Darkish Mode
Darkish Mode wasn’t working because it ought to on this e-mail. Carin instantly spots that meta tags weren’t included, and tinkers with a number of different components to make it extra pleasant for Darkish Mode.
Need extra?
Dive deep into the thoughts of Carin Slater within the full replay of Ask Me Something: Coding with Carin.
Obtained questions? Drop them in Litmus Neighborhood or attain out to us [email protected]. We’d love to assist!
