We’re excited to announce the most recent addition to Litmus Email Previews: Samsung Mail.
Samsung is the most popular Android device manufacturer. As of December 2017, Samsung devices held 47% of the Android market share. Huawei comes in a distant second with only 6.6% of Android the market share. A possible reason for Samsung’s dominance in the market is the sheer number of Samsung devices that are available—mobile devices, phablets, and tablets. Devices range from mid- to high-end, and there are even phone series’ that cater to specific geographic regions—for example the Samsung Galaxy J series which is only available in Japan.
 | How many of your subscribers use Samsung?When it comes to email marketing, it’s all about your audience. Use Email Analytics to discover if your subscribers are using Samsung Mail. Sign up free! |
It’s not just Samsung devices that are popular. As of December 2017, Samsung’s native email client had 5% of the email client market share. Despite there being such an array of email apps available on Android devices—including Gmail and Inbox by Gmail—many Samsung device owners are still choosing to use the native email client.
We took a closer look at this email client and how it renders email. Here’s what we found:
Message View
Samsung’s email client will show the entire subject line of an email when it’s being viewed. This means if you’re using long subject lines your subscribers will have to scroll a little bit more vertically just to see your email.
HTML/CSS Support
Samsung Rendering “Quirks” and Notes
While reviewing how emails rendered on Samsung’s native email client, there were a few quirks we noticed that email marketers should be aware of:
- Margins work on elements like the <p> tag and <h> tags, however not on <div>s or <table>s. Margins are commonly used to create space around elements in email. As an alternative, you could use the <br> tag to create space between elements in which the margin attribute doesn’t work.
- Max-width works across <div>s and <table>s, but not on individual table cells. Avoid using the max-width attribute on these elements. A workaround would be to use a <div> inside an individual table cell and set the max-width on that element.
- CSS transitions do work in this email client! However, CSS keyframe animation isn’t supported. So if you want to include CSS animation in your emails, we’d suggest sticking to CSS transitions.
- We noticed in a few tests that the Samsung app would add padding around emails, resulting in white borders around an entire campaign. While we don’t have a fix yet, it’s important to note.
- We also saw some emails displaying smaller than the viewport and aligned to the left of the screen. This behavior was very inconsistent across tests, but definitely worth looking out for.
- Samsung automatically links addresses and phone numbers, and applies a default link styling to them—underlined and blue. While this comes in handy for users who can for example tap an address and instantly have that address open in Google Maps, this can be in conflict with your email’s design.
You can override the default link styling by adding this Samsung specific style declaration to your <style> block:#MessageViewBody a { color: inherit; text-decoration: none; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; }Did you discover another fix for blue links in Samsung Mail? Share it in our Community Snippet Library.
Make Your Email Designs Bulletproof
If you’re using media queries to change the layout of your design set at specific screen sizes for specific devices, you may want to change that. With the vast range of Samsung devices—not just mobile devices but tablets and even phablets—all with different screen sizes, there aren’t just a few mobile device screen sizes to support. The solution is to use device agnostic media queries which change the email design based on where that design breaks instead of specific screen sizes (We use this technique with our emails at Litmus.).
Targeting Samsung’s Email Client Using CSS
Just like it’s possible to target the desktop Outlook email client using MSO conditional comments, email developers can target the Samsung email client using CSS.
Email developer Mark Robbins noticed that on the Samsung Galaxy S6 the ID MessageViewBody is added to the <body> tag followed by a <div> with the ID MessageWebViewDiv. To target the Samsung email client simply add the following CSS to your email:
#MessageViewBody .yourclassnamehere { }And in the HTML, for any element that needs this CSS applied to it, add the class name defined to the element:
<div class=”yourclassnamehere”></div>During our testing, we also noticed that Samsung removes any ID you may have already added to your <body> tag, and adds its own. So instead of using an ID in the <body> tag, inline any CSS you want to be applied to the whole body of the email into the <body> tag to avoid it getting stripped when the ID is removed in Samsung Mail.
Enabling Samsung Email Previews in Litmus
Samsung is just one of dozens of popular email clients that you can preview in with Litmus. To help streamline your testing efforts, you can enable those clients that are most important to you when testing your email rendering. To add Samsung to your default clients for testing, head over to the account settings in your Litmus account and choose “configure clients”.
Haven’t got a Litmus account? Start a free trial today to discover if your subscribers are using the Samsung native email client.
We’d love to hear from you!
Did you discover a rendering quirk in Samsung that we missed? Struggling with a code question specific to this email client? Let us know in the Community!
Jaina Mistry is the Director of Brand and Content Marketing at Litmus.
