This is down to two factors:

• Whether the device supports media queries
• The device screen resolution 

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
• Orientation
• 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.

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:

1. Check the viewport.
2. Compare simulated resolution values.
3. Check the pixel ratio.
4. 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.

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 that these will always work as expected. What we can share are the tests for the native mail apps of the following devices:

It is fairly safe to assume that most new devices on the market today will support media queries. 

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.

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. 

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).

When adapting an Emarsys template for Mobile Sense, certain design elements of the email are selected for adaptation to mobile clients. These features are part of the template and cannot be edited by the user. They are based on the Emarsys best practice design and coding standards. Below is a list of the template elements that are most likely to be adapted for Mobile Sense and the reasons for this.

Here is an example of how a section of an email might be reformatted by Mobile Sense:

Images

Images are perhaps the most important aspect to consider when preparing a mobile-responsive email. In many cases, the same image will not look as good on a small screen as it will on a large monitor, so you might want to consider using a different image for mobile (for example, a detail of the main image). 

Font size

Small font sizes that are good for the desktop will not work well for mobiles, since users will need to zoom in so they can comfortably read the content (for example, Apple recommends 17-22 pixels for mobile screens). The Mobile Sense template will ensure that desktops will display small font sizes and mobiles will display a larger, more appropriate font.

Vertical layout

Due to the prevalence of wide-screen monitors, desktop emails typically use a ‘landscape’ page orientation: two, three or even four column layouts work well, as do images with text beside them. With mobile email the story is very different: the orientation should be vertical (‘portrait’), with one content item per section. This means putting text below images and rearranging multiple columns underneath each other. The Mobile Sense template automatically makes this switch for you.

Bigger calls to action

You will want to make it easier to click the links within the email and track those links. Small text links that work well for a desktop user with a mouse will not work for a mobile users browsing with their finger. Mobile Sense automatically converts the main section text link into a button with larger target area. Links that are within the section (as part of the body text) will remain as text links and will not throw the mobile email off balance with buttons appearing in the middle of the text.

Padding

Similarly, when buttons are close to each other in an email, it is not an issue for desktop users. For mobile devices, extra padding is added to ensure that the user does not accidentally press the wrong one.

Scaling

Emails do not always scale properly on mobile devices; Mobile Sense makes sure that every email is opened at full scale on smaller screens.

Ergonomics

Many mobile users hold their mobiles in their right hand and use their right thumb to navigate and click. Mobile Sense therefore aligns all text to the left, and avoids placing buttons close to the bottom right corner.

Sidebars and navigation bars

In desktop emails you can have side bars with different content and links similar to those you have on your website. Top navigation bars with links can also serve a purpose: you want to catch your recipients’ eye with some variety. On mobile devices these elements will not work since they take up too much space, their links will be too small, and line breaks can disrupt both links and buttons.

The responsive design can hide these sections from mobile users and display them for desktop users. Alternatively, the responsive design can change a six-item navigation bar to a simpler three-item one, or convert them to a three-line ‘hamburger’ menu or similar drop-down.

Most of the mail clients not supporting CSS will be desktop clients anyway, and our CSS is applied on the mobiles where CSS support is much wider.