At this time’s a big day: we’re providing you with an unique look into the thoughts of Litmus’ very personal electronic mail developer, Carin Slater!
Carin is likely one of the technological masterminds behind all of the Litmus newsletters and just about every thing we ship. As she places it, she’s an “an electronic mail geek who spent the final 9 years combating with Outlook.”
In our latest digital occasion, “Ask Me Anything: Coding with Carin,” she shared her greatest electronic mail improvement suggestions by answering among the most typical coding questions and troubleshooting emails (as submitted by electronic mail geeks) in actual time.
Learn on for her recommendations on:
Widespread Outlook points
Electronic mail entrepreneurs are properly conscious: working with Outlook could be fairly… difficult. However regardless of its quirks, realizing easy methods to repair them can actually sharpen your electronic mail improvement abilities. As Carin displays, “I bought to learn to sort things in Outlook that individuals often simply ignore.”
Right here’s a rundown of a few of Outlook’s most typical points from Carin.
The way to repair white traces in Outlook
One of the crucial frequent quirks you’ll see and listen to about is white traces in Outlook. Right here’s some fixes to eliminate these pesky white traces.
Throw a desk round it
Considered one of Carin’s favourite fixes for white traces is to easily place all the weather in a nested desk. “Generally that’s all you’ll want to do, after which the white traces go away,” explains Carin.
For instance, if there’s a button in a desk cell inside the electronic 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 may end up in uneven spacing and trigger white traces to look inside your electronic mail. Nevertheless, by conserving numbers even, you’ll be able to cut back the probability of those spacing points and keep away from these white traces from showing.
Take away dir=”rtl”
Generally route equals proper to left (or dir=”rtl”) will trigger white traces—which Carin troubleshoots in actual time, under.
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 in the Litmus Community.
Different quirks to be careful for
We talked about Outlook was… quirky. Except for white traces, take into account:
- Widths in your tables need to be in pixels. When you have them in percentages, it is going to blow out your electronic mail. Widths on tables work greatest in model attributes.
- Be sure to set picture widths with the width attribute. Outlook will ignore widths set in model attributes on photographs and can show the picture on the file measurement in the event you 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 (until you actually can’t).
Coding for cellular
One other frequent subject 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 completely different display screen sizes
At Litmus, we use @media queries with a max width of 600 pixels. The whole lot that’s previous that vary is desktop, and every thing much less beneath will present as soon as a display screen will get lower than 600 pixels.
@media display screen and (max-width:600px)
Some HTML components are naturally responsive, corresponding to <div>s. Since cellular gadgets can are available in plenty of completely different sizes, figuring out and conserving 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 tackle 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 might be going to stack,” says Carin. “It’ll stack high quality 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 area between these tables—use conditional code to ensure 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 photographs not displaying
On this instance, the e-mail rendered because it ought to—apart from on Outlook cellular. Right here’s what Carin discovered when she went via the code.
Getting began with Darkish Mode
Now transferring onto a fan-favorite subject: Dark Mode.
Be certain meta tags are included
Rule primary: keep in mind to incorporate meta tags from the beginning. Meta tags allow electronic mail shoppers to acknowledge that the e-mail is designed in Darkish Mode.
Whereas media queries and data-ogsc and data-ogsb tags are needed to focus on particular components, they gained’t have any impact if these meta tags will not be included at the start.
Picture swap works—however just for sure electronic mail shoppers
You may swap out Mild Mode photographs for Darkish Mode photographs, however solely with sure electronic mail shoppers. For essentially the most half, Picture swap is supported by Apple shoppers (iOS Mail, macOS Mail, and iPadOS Mail).
Picture swap additionally works for Outlook.com, however solely in the event you hyperlink the pictures. “If you happen to don’t need your photographs linked, then be sure to make photographs that work in each Mild and Darkish Mode. If you happen to don’t thoughts linking your photographs out, then you’ll be able to have these swap out in Outlook as properly,” says Carin.
Darkish Mode snippets
Bookmark this: we’ve compiled nine code snippets from the e-mail neighborhood to assist remedy your greatest Darkish Mode challenges.
Troubleshooting in actual time: Darkish Mode
Darkish Mode wasn’t working because it ought to on this electronic 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 Anything: Coding with Carin.
Obtained questions? Drop them in Litmus Community or attain out to us hello@litmus.com. We’d love to assist!
