Mobile email - what role do physical dimensions, viewports and pixel ratios play?

[gtorba]

Hi Emarsys mobile email team,

I am working on email campaigns that are crucial to look good on mobile devices. I have been investigating the topic for a while and wanted ask for your help about the role of physical dimensions, viewports and pixel ratios. Could you pls provide me some details about these?

Thanks a lot!

[WillYoung · Accepted solution]

Hi,

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 zooming in, 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 is 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.

I hope that helps a bit!