Ask Me Anything: Our Email Developer Shares Tips for Outlook, Mobile Coding, & Dark Mode

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.

Remove dir=”rtl” 

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.

Use @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