Absolute Positioning in the Samsung Android Email Client

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.

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.

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.

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.