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

In the 84th episode of The Email Design Podcast, Kevin Mandeville answers recent questions from the Litmus Community in a rapid fire format, including topics on recent changes to Gmail symbols, CSS targeting for Gmail, hiding content in Outlook, and more. Be sure to follow along and join in the discussion on Twitter using #EmailDesignPodcast.

Download the MP3

In this episode:

• (1:38) Copyright Symbols Blue in iOS Gmail App: Gmail recently had a short-lived change where it was replacing all symbols with its own “Goomoji.” The quick fix was to either use HTML character entities or target Gmail to hide the Goomoji and replace with your own background images. Thankfully, this change is now rolled back, so you should no longer see this behavior.
• (4:49) How can you target Gmail webmail only?: You can use the Gmail targeting technique of u ~ div .foo { } and simply wrap it in a min-width media query to target for desktop webmail only (i.e. @media screen and (min-width: 480px) { /*Insert Gmail targeting*/ } ).
• (7:34) Outlook conditionals not working in Outlook webmail: The Outlook webmails, Outlook.com and Office 365, have separate rendering from Outlook desktop apps on Windows. Outlook on Windows uses Microsoft Word as a rendering engine which reads Outlook conditional comments. However, the Outlook webmails do not and thus are unable to read conditional comments. To target Outlook webmails, use the attribute selector hack of [owa] .foo { } in your CSS.
• (9:35) mso-hide: all; not working in Outlook 2003: mso-hide: all; is a bit finicky on what elements you use it on. We recommend using INSERT CONTENT<!– as a more bulletproof method to hiding content in Outlook on Windows.
• (13:00) Featured Jobs: Email Deployment Specialist at Inbox Marketer | Email Marketing Specialist at Adtalem Global Education | Digital Email Developer at Skipton Building Society | HTML Email Developer at Wayfair
• (15:22) Does “display:none;” prevent an image from loading?: No, images in the DOM get loaded regardless of CSS display. The only scenario image assets don’t load automatically are background images that get activated by an event, such as a hover effect or :checked action.
• (16:49) Embedded CSS vs. inline CSS results: We theorize this may be due to Gmail behavior, whether it be a large POP/IMAP audience in Gmail or having a larger audience with images off in Gmail (as there’s a current bug which breaks embedded CSS when images get turned on).
• (19:28) Looking for email development workflow: We personally use Litmus Builder which has CSS inlining, partials, link tracking, test sends, and email testing built right in. For a Grunt/Gulp workflow, we recommend Lee Munroe‘s Email Design Workflow.

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.