Read Time: 3 min
Email Design Podcast #67: Implementing Transparency, Using @supports, and Embedding HTML5 Video in Email
Categories
In the 67th episode of The Email Design Podcast, Kevin Mandeville and Jason Rodriguez answer recent questions from the Litmus Community in a rapid fire format, including topics on implementing transparency in email, using the @supports query, embedding HTML5 video, and more. Be sure to follow along and join in the discussion on Twitter using #EmailDesignPodcast.
In this episode:
- (0:35) How should I use transparency in email? Though you can use CSS opacity or other tricks, the only bulletproof method of implementing transparency in email is using transparent PNG or GIF images.
- (4:09) Has anyone gotten image carousels to work in Gmail? Gmail used to support interactive emails, but with its rendering update in September 2016, Gmail stripped support for the :checked pseudo selector, eliminating any possibility of interactive email and carousels in Gmail.
- (5:36) Why aren’t Outlook conditionals working in Outlook.com? Outlook conditional comments only work for Outlook desktop apps, not the webmail versions of Outlook.com or Office 365. You can use the attribute selector hack to target Outlook.com instead (i.e. [owa] .foo { }).
- (7:51) Has anyone used the @supports query in email? Yes, we have at Litmus, using CSS Grid in a recent newsletter. @supports will be the future of targeting and progressive enhancement in email as Webkit target will become deprecated.
- (10:24) What is the best practice for hiding and showing interactive content and fallbacks? We recommend building the base for non-embedded CSS support with inline CSS to show fallback content. Then, overwrite and enhance with clients that support embedded CSS and media queries to show interactive content and hide the fallback content. Hiding interactive content in Outlook can be achieved with conditional comments.
- (12:38) Why do emojis differ between the subject line inbox view and the opened email inbox view? Emoji support and rendering differs between browsers and operating systems. In this case, Gmail uses the browser/OS to render the emoji in the subject line and then replaces its own emoji branding when viewing the opened email.
- (16:30) How would you go about embedding HTML5 video in email today? Now that iOS 10 supports HTML5 video again and is the only client with true support, we would target to only display the video in that environment. Alternatively, if you wanted to use a background video technique, you could target to show it for only Apple Mail and Outlook for Mac.
- (19:34) Do you know if it is against the CASL laws to make fields required on your email newsletter sign-up form? Though we aren’t entirely sure over the technical legalese, we feel that this goes against the spirit of CASL and would not recommend taking this approach. Form fields should be opt-in and not required to obtain permission from subscribers.
- (22:35) How do you center text inside a button that works with Outlook? The best way is to ensure the table cell has align=”center” set for both the nested button table element and the containing parent cell. We wrote a blog post on several implementations for bulletproof buttons that even work in Outlook.
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.
Blog