The future of Media Queries for email

Yesterday at the Litmus Email Design Conference in London, Mark Robbins raised an interesting point that in the very near future email will need to adapt not just to mobiles and tablets, but also to much larger devices such as televisions.

The W3C takes into account the fact that devices are still proliferating with its latest spec for Media Queries Level 4, some of which are being slowly implemented by WebKit, but which we can expect to come into effect in the near-ish future (it is still an Editor’s Draft).

There are a few potentially exciting new types of media queries that we will be able to use, such as:

orientation

‘Portrait’ is triggered when the height is greater than the width, and vice versa

@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }

aspect-ratio & device-aspect-ratio

@media screen and (device-aspect-ratio: 16/9) { … }
@media screen and (device-aspect-ratio: 32/18) { … }

color, color-index, monochrome

A series of queries that assess the color output of a device, the quality of that output or the depth of monoschrome output. Useful for targeting colour screens as opposed to e-ink, for example.

@media all and (color) { … }
@media all and (min-color: 1) { … }
@media all and (monochrome) { ...}

resolution

A more specific way to target resolutions than simply with pixel-density

@media all and (min-resolution: 326dpi) { … }

pointer

Whether or not a device is a touch-screen or uses a mouse — could be useful for ensuring touch devices have buttons for links, whereas devices with a mouse can feature smaller text links (although there are some potential issues with this since some devices allow both a mouse to be connected and interaction via a touchscreen).

hover

Whether or not the device supports hover

And finally, my personal favourite: luminosity

The values are:

‘dim’

The device is used in a dim environment, where excessive contrast and brightness would be distracting or uncomfortable to the reader. For example: night time, or a dimly illuminated indoor environment.

‘normal’

The device is used in a environment with a level of luminosity in the ideal range for the screen, and which does not necessitate any particular adjustment.

‘washed’

The device is used in an exceptionally bright environment, causing the screen to be washed out and difficult to read. For example: bright daylight.

Since all media queries are dynamic this allows for styles that will adjust to the user’s environment.. a higher contrast for bright daylight with a more subdued, lower-contrast colour scheme for dim environments.

Support for any of these is basically non-existent at the moment, but it’s an exciting look into the future!

About Nicole Merlin

I'm an HTML email designer and developer from Melbourne, Australia. I love email, design, typography, calligraphy and curling up with a book.