Click to Sign Up for a 7 Day Free Trial!

Email Development

Absolute Positioning in the Samsung Android Email Client

Email On Acid

Although not often discussed in email design circles, the Samsung email client is a relatively popular email client among users of Samsung's Galaxy line of Android phones. It turns out that this client does not support absolute positioning. This is a big setback for those of us who are pushing email's limits using kinetic techniques because Samsung's phones make up a big portion of the Android phones sold.

Thankfully there is a technique you can use to mitigate this shortcoming using Samsung’s client specific ids.

Background

Android phones used to be bundled with a native email client that many email designers loved. Like the iOS Mail native client, it had very robust modern HTML and CSS support including the support of media queries which allowed for beautiful and readable responsive emails.

However the dawn of Android 5.0 or Lollipop changed all of that as Google dropped the native email client for the Gmail app which had very limited CSS support. Specifically the Gmail mobile app lacks embedded stylesheet or <style> support. The lack of embedded styles support limited the kinds of responsive techniques that can be used in email design.


Users on the Samsung Galaxy line of phones, though, found that they had another option on their phones: the Samsung email client. The Samsung email client is identified by its distinctive red ‘@' seal in the middle of an envelope and is still bundled with the latest Android 6.0 (Marshmallow) Samsung Galaxy phones.

Although the vast majority of Android users use the Gmail App - even prior to Android 5.0 when the Android native email client was available - many Samsung Galaxy users, especially those who have non Gmail email accounts prefer to use the native Samsung email client.

From my unscientific survey of users of Samsung Galaxy phones—meaning I bug anyone I happened to be talking to who sports a Samsung phone—I found that about 2 out of every 5 users used the Samsung email client in some capacity.

Lack of Absolute Positioning Support

The Samsung client, for some inexplicable reason, lacks the support for CSS absolute positioning. This is especially perplexing as the email client supports both relative and fixed positioning.

Absolute positioning is a powerful feature that allows the designer to place elements anywhere in the email. The lack of support for absolute positioning is definitely a downer, as it limits the kinds of kinetic email designs available to designers.


If you'd really like to absolute position your elements in the Samsung client, you can check out this hack by Mark Robbins of Rebelmail that uses margins instead.

Samsung Email Client Specific Ids

Fortunately the Samsung email client provides ids we can target. Mark Robbins discovered that the Samsung client adds the id MessageViewBody to the body tag and wraps content with a div with an id MessageWebViewDiv.

Therefore, if you have designs that utilize absolute positioning, you can hide those designs from the Samsung email client by using the following CSS.

#MessageViewBody .foo { display: none !important; }

Note this also means that the Samsung client replaces any id you set to the body tag in your email with its own.

From my tests, other than the lack of absolute positioning support, the Samsung email client appears to render and behave similarly to the major email clients that support kinetic email such as the iPhone's native iOS mail client.

If you come across any other interesting quirks, feel free to chime in in the comments.

About the Author

Justin Khoo

Justin Khoo

Justin Khoo (@freshinbox) is an email developer and writes about email techniques and new innovations. He has been involved in many aspects of email over the past decade, everything from building webmail clients and email campaign services to coding HTML emails.

Join the Discussion

Hi, just noticed that my responsive design which utilizes a hamburger style menu is no longer working correctly in the default mail app on my Galaxy S5.

Instead of shrinking to fit, the whole email is now displayed as if on a desktop. Has anyone else noticed this? Or know the reason why this is suddenly happening?

My phone is running Android 5.0 and has been for quite a while, as far as I know there hasn't been any recent updates on the mail app.

Can anyone shed any light on this?

Cheers!
Geoff

Leave a Comment