Today’s a special occasion: we’re supplying you with an unique look into the thoughts of Litmus’ very personal electronic mail developer, Carin Slater!
Carin is among the technological masterminds behind all of the Litmus newsletters and just about the whole lot we ship. As she places it, she’s an “an email geek who spent the last 9 years fighting with Outlook.”
In our latest digital occasion, “Ask Me Anything: Coding with Carin,” she shared her greatest electronic mail improvement ideas by answering a number of the commonest coding questions and troubleshooting emails (as submitted by electronic mail geeks) in actual time.
Read on for her tips about:
Common Outlook points
Email entrepreneurs are nicely conscious: working with Outlook could be fairly… difficult. But regardless of its quirks, realizing find out how to repair them can actually sharpen your electronic mail improvement expertise. As Carin displays, “I got to learn how to fix things in Outlook that people usually just ignore.”
Here’s a rundown of a few of Outlook’s commonest points from Carin.
How to repair white strains in Outlook
One of the most typical quirks you’ll see and listen to about is white strains in Outlook. Here’s some fixes to do away with these pesky white strains.
Throw a desk round it
One of Carin’s favourite fixes for white strains is to easily place all the weather in a nested desk. “Sometimes that’s all you need to do, and then the white lines go away,” explains Carin.
For instance, if there’s a button in a desk cell throughout 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 on.
Outlook tends so as to add spacing and turns pixels into factors. This may end up in uneven spacing and trigger white strains to seem inside your electronic mail. However, by preserving numbers even, you may cut back the probability of those spacing points and keep away from these white strains from showing.
Sometimes route equals proper to left (or
dir=”rtl”) will trigger white strains—which Carin troubleshoots in actual time, beneath.
Troubleshooting in actual time: White strains in Outlook
In this case, Carin eliminated extraneous code and voilà—white strains gone!
Sometimes you want that
dir=”rtl” in your desk cells for stacking. Courtney Fantinato has discovered an answer that she shares in the Litmus Community.
Other quirks to be careful for
We talked about Outlook was… quirky. Aside from white strains, take note:
- Widths in your tables should be in pixels. If you have got them in percentages, it is going to blow out your electronic mail. Widths on tables work greatest in model attributes.
- Make positive you set picture widths with the width attribute. Outlook will ignore widths set in model attributes on pictures and can show the picture on the file dimension when you don’t embrace a width attribute.
- Don’t use borders on tables/desk cells. If you set it on one, and it’s not displaying up, attempt placing it on a desk cell as an alternative of on the precise desk.
- Rounded corners require VML and VML shapes. As Carin places it: rounded corners are annoying. Just give in to sq. corners (except you actually can’t).
Coding for cell
Another frequent subject is coding for cell—particularly making issues stack.
Here’s a peek at how we do issues at Litmus.
@media queries to focus on completely different display sizes
At Litmus, we use
@media queries with a max width of 600 pixels. Everything that’s previous that vary is desktop, and the whole lot much less underneath will present as soon as a display will get lower than 600 pixels.
@media display and (max-width:600px)
Some HTML parts are naturally responsive, resembling
Make issues stack simply (with out floats)
Another tip: use
show: inline-block to create stacking
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 an excessive amount of house between these tables—use conditional code to ensure they’re working correctly 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 actual time: Mobile pictures not displaying
In this instance, the e-mail rendered because it ought to—besides for on Outlook cell. Here’s what Carin discovered when she went via the code.
Getting began with Dark Mode
Now transferring onto a fan-favorite subject: Dark Mode.
Make positive meta tags are included
Rule primary: keep in mind to incorporate meta tags from the beginning. Meta tags allow electronic mail purchasers to acknowledge that the e-mail is designed in Dark Mode.
While media queries and
data-ogsb tags are needed to focus on particular parts, they gained’t have any impact if these meta tags usually are not included initially.
Image swap works—however solely for sure electronic mail purchasers
You can swap out Light Mode pictures for Dark Mode pictures, however solely with sure electronic mail purchasers. For probably the most half, Image swap is supported by Apple purchasers (iOS Mail, macOS Mail, and iPadOS Mail).
Image swap additionally works for Outlook.com, however solely when you hyperlink the pictures. “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 9 code snippets from the e-mail neighborhood to assist clear up your largest Dark Mode challenges.
Troubleshooting in actual time: Dark Mode
Dark 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 parts to make it extra pleasant for Dark Mode.
Dive deep into the thoughts of Carin Slater within the full replay of Ask Me Anything: Coding with Carin.
Review your Google Ads search phrases to see what folks have been typing into Google …