Due to the constant introduction of new technology and the large number of combinations of device, operating system and mail client, it hard to know exactly how a given device will render any given email. Muc of this also depends on user behavior. For example, if a user reduces the size of their mail client enough, or decreases the screen resolution to compensate for poor eyesight, they may well end up seeing the mobile version on their descktop.
Here we provide some information to help you understand the factors that affect Mobile Sense as well as providing the latest results of our own testing.
- General considerations
- Physical dimensions, viewports and pixel ratios
- Phablets and large-screen phones
- Tested devices and clients
The first thing to consider is whether or not a mobile device or operating system supports media queries. It is fairly safe to assume that most new devices on the market today will do so. For example, iPhones currently support the responsive code in full, and they will always get the mobile version. With Android phones it is more complex and the support is dependent on the combination of the phone model and the Android OS version it uses. In the cases where a device or operating system does not support this code, responsive design is ignored and the desktop version will be displayed by default.
As well as media query support, the following factors will also affect whether the descktop or the mobile versions are shown:
- Firmware (OS)
- Display resolution
- Mail App
- Browser + client
When the media query is supported, Mobile Sense uses the screen display width to determine when to display the mobile version.
- Devices with a display width of 400 pixels and below show the mobile version.
- Devices with a display width of 401 pixels and above show the desktop version.
However, this rule of thumb is affected by other factors such as whether the device is showing the image in portrait or landscape orientation, and whether or not it uses a a real or a virtual screen resolution (see below on pixel ratios).
Webmail clients, where the user has to access the client via a mobile browser, will typically strip the CSS from emails and therefore Mobile Sense will not be supported.
For more information on the device size and display size of mobile phone and tablets, we find this website a useful point of reference: mydevice.io.
Physical Dimensions, Viewports and Pixel Ratios
As screen technologies improve for mobile devices, pixel values alone can no longer be accurately used to determine which content version to display. More pixels mean better image and multi-media content quality, but without zoom, the text content can look impossibly small.
To balance high resolution with legible font sizes, mobile devices can use a simulated resolution to make text easier to read on higher resolution devices. The simulated resolution effectively zooms in on content, e.g. mail or web content, and has its own resolution value which can be compared against the Media Query rules.
In addition, mobile devices use a viewport to help identify when to display content in landscape or in portrait, depending on the how the device is being held. By using the viewport the email dimensions can be switched depending on the orientation instead of always of treating width as a fixed value.
The pixel ratio is the proportional difference between the simulated resolution and the actual physical resolution of the device screen, i.e. number of available pixels. A device with a HD screen of 1920×1080 pixels and a viewport of 640×360 pixels has a pixel ratio of 3, which is calculated by dividing the actual resolution by the simulated resolution. This pixel ratio means that every pixel of image content stretched by three pixels, which makes the starting quality of the images important.
When a responsive mail arrives, the mail client compares the system-specification against the Media Query rules:
- Check the viewport.
- Compare simulated resolution values.
- Check the pixel ratio.
- Display the appropriate content version.
By combining the viewport orientation, simulated resolution and pixel ratio, the media query can create responsive content which differentiates between mobile devices, phablets and desktop devices. That way it can make sure to always display the best looking version of your content.
Please note: The Media Query will use the default pixel-ratio value of the device when selecting what content to display, which may cause side-effects if the user has configured their personal device to use different dimensions. For Example, if the default size of the display has been enlarged for users with poor eyesight.
Phablets and large-screen phones
It is also possible to configure the media query to show the mobile version on large-screen phones ("phablets"), or by default in landscape orientation. However, we recommend against this because images are usually enlarged to fit the bigger screen, which can often lead to pixellation.
For this reason, it is up to you to specify whether or not the mobile version is shown, and Emarsys will configure your Mobile Sense accordingly (i.e. extend the maximum width from 400 to, say, 600 pixels).
Tested devices and clients
We test a wide variety of devices, operating systems and clients but due to the changing nature of the market we are reluctant to guarantee these. What we can shae are the tests for the native mail apps of the following devices: