Email Design Podcast #93: Litmus Community Q&A Rapid Fire

In the 93rd episode of The Email Design Podcast, Kevin Mandeville answers recent questions from the Litmus Community in a rapid fire format, including topics on responsive email templates, fixed positioning on mobile, differences between Outlook desktop rendering on Windows and Mac, and more.

Download the MP3

In this episode:

• (0:42) Need high quality responsive email templates for non-developer: For templates, we recommend Litmus Community Templates, sendwithus templates, htmlemail.io, and ThemeForest. For tools, many ESPs like MailChimp and Campaign Monitor have great drag-and-drop builders, but we also recommend Bee and StampReady for ESP-agnostic tools.
• (4:10) Does fixed positioning on mobile work? Though supported in the past, unfortunately fixed positioning is no longer supported in iOS Mail.
• (6:08) Outlook rendering issues on Windows: Outlook desktop rendering on Windows and Mac differs because they use separate rendering engines. Outlook on Mac uses WebKit as a rendering engine, which is the same for modern browsers like Chrome and Safari. Outlook on Windows, however, uses Microsoft Word as a rendering engine, which will cause many issues in rendering HTML and CSS. For scenarios where content is cut off, make sure all of your markup is valid (no missing closing tags) and that your heights are well-defined for both actual image and content heights along with line-heights.
• (12:25) Hamburger menu in Outlook app broken: Unfortunately, Outlook apps don’t support interactive email elements such as checkboxes and radio buttons. Additionally, Outlook apps use WebKit as a rendering engine, so there isn’t a way to target it or segment it from other WebKit apps like iOS Mail.
• (14:33) Lines and gaps around images in Gmail: Ensure you are always using display: block; on images and you don’t have any padding on tables or table cells to eliminate any gaps around images.
• (17:54) Hide elements in Yahoo! Mail app: Unfortunately, Yahoo! Mail app on Android doesn’t support media queries so the only method is to target elements inline. For Yahoo! Mail app on iOS, you can use @media screen yahoo and (max-width: 480px) { } as a method to target that environment.
• (20:36) Does Gmail iOS support media queries?: Yes, the iOS Gmail app supports media queries. There are a few edge case exceptions, including POP/IMAP accounts and mobile webmail, but overall it has full support. You’re most likely running into Gmail stripping your style blocks for CSS it deems invalid, notably for items like attribute selectors. Read Rémi Parmentier’s blog post on troubleshooting Gmail CSS support.

Follow the Email Design Podcast

• Follow on SoundCloud
• Subscribe on iTunes
• Subscribe on YouTube

GET THE LATEST DELIVERED STRAIGHT TO YOUR INBOX

Want to get more tips and advice like this? Subscribe to our weekly newsletter and get the latest content for email design pros delivered straight to your inbox. Every week.