Read Time: 4 min
Email Design Podcast #74: Litmus Community Q&A Rapid Fire
Categories
In the 74th 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 images inheriting its parent container width in Outlook, background image support in the Android native mail app, forcing Gmail App to be the width of the full viewport, and more. Be sure to follow along and join in the discussion on Twitter using #EmailDesignPodcast.
In this episode:
- (0:30) Getting images in Outlook to respect their container’s size? Unfortunately there’s no method of getting images to default to its parent container for Outlook 2007-2016. The image must be the desired dimensions itself or the dimensions must be set as HTML attributes on the image tag.
- (2:47) Swapping an animated GIF with an alternate static image for all Outlook users on PC? The easiest way to implement this is to use Microsoft Outlook conditional comments to hide the animated gif for all other clients and only display the static fallback image for Outlook. This can easily implemented by doing <!–[if (gte mso 9)|(IE)]>Insert static fallback image here<![!endif]–> <!–[if (gte mso 9)|(IE)]> <!–> Insert animated gif here <!–<![!endif]–>
- (4:53) Can you wrap anchor tags around entire tables? Although this is supported in HTML5, it wasn’t previously and thus many email rendering engines do not support this—notably Outlook, which won’t render the link functionality at all. It is best practice to link the individual elements inside of a table instead.
- (6:55) Media query support on Android – Gmail App – Exchange account Since this is a non-Gmail account, Gmail does not support media queries and strips them out. It is best to use a mobile-first approach to email like the hybrid/spongy technique.
- (8:22) Are media queries supported on Android 6? For Android 4.4 and below, Android used its stock native Android OS email app. For Android 5.1 and above, Android switched to using Gmail app as its default mail app. The stock native Android OS email app still exists as a part of the OS, but is not installed by default and unlike Android 4.4 and below it no longer supports media queries. You can learn more with our resources: The Ultimate Guide to Email on Android, 3 Keys to Understanding Email Rendering on Android, and Everything You Need to Know About Gmail Rendering [Webinar].
- (12:22) Background Image Not Working in Android 5.1 and 6 The stock native Android OS email app does not support background images of any kind, including inline CSS and HTML attribute backgrounds.
- (13:51) Background Color Not Full Width in Gmail apps for iOS, Solution The iOS Gmail App has a weird right-hand gap but can be overridden with Gmail targeting. Simply use u + .body { } and add a class of body to the <body> tag (<body class=”body”>) and then set a full viewport width: u + .body { width: 100vw !important; }. Additionally, you could target Gmail by doing u ~ div { } as your selectors instead. Then just simply wrap this is a media query (recommend 480px) so it’s only applicable to mobile versions of Gmail. The doctype is processed into an underline tag (<u>) which makes Gmail targetable.
- (15:51) Refresh Image Within Email HTML (css/checkbox etc…) Having implemented dynamic email at Litmus before, we are unaware of any method where content can update/refresh inside the same session of an email. The problem stems from the fact that all assets are downloaded when an email is opened. Using the checkbox hack to hide/show elements doesn’t force a reload of those assets. This is definitely an area to continue to explore and research for email though!
- (17:46) How do I view email HTML on mobile clients? In Litmus, you can take any Email Preview screenshot generated and change the .png extension to .html to grab the processed code of that individual email client. So you can see what Gmail App (Android) does to your code for instance. This is a hidden “secret” feature of Litmus at the moment and is not officially supported. Do not expect complete support among all clients or 100% uptime.
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 