Media queries in email – what they are and the benefits of them

Over the past few months I’ve been working on a massive project for one of my clients, which requires a lot of technical assistance around an email and offers that are specific to each customer. We have been testing both the email and the respective landing page where these offers will be housed and one thing I’ve noticed is this: there are such a vast variety of mobile devices that we can test on, but not of all them show the email in its full form.

The reason behind this? Media queries – the all important piece of code that helps make things easier. But what is a media query? This post from Litmus.com will help dissect this and explain some of the benefits of using them.

Media queries are a component of cascading styles sheets (CSS) – the language that is used to style websites and eDM campaigns. Essentially, these queries act as rules to trigger certain styles on different devices.

The query itself is broken down into three different parts:

  1. Media Type: this allows us to confirm what type of media the rules should be applied to (all, print, screen, speech). Emails will use the screen type.
  2. Expression: you use this to target devices based on specific conditions. Expressions test media features, which describe different features of a device (such as width, height and colour).
  3. Style rules within the query: these CSS rules can be toggled when the email is opened on a devices that satisfies both the media type and expressions

Especially with more and more emails being mobile responsive, it is very important to include these media queries at the top of your email within the CSS, so the rules can be applied to mobile devices. Front-end developers are constantly looking at different ways to apply these to non-standard devices, such as Windows phones.

The most common benefit of using media queries is so they can be used to fine-tune email designs so they will look good on a wide range of devices. Take this scenario as an example:

An email marketing company is designing a brand new template for a client, but they have designed it for the desktop first, so the eDM looks great on desktop and webmail clients, but breaks down when viewed on mobile devices. The email zooms in to fit the screen, making the copy and CTA buttons unreadable, the layout is broken and sometimes horizontal scrolling is required. Not a very good user experience at all! But these media queries have now put an end to that, so we can target mobile devices and adjust the email styles to suit.

However – and this comes back to my first point above – media queries unfortunately don’t work everywhere. The number 1 spot for lack of support of media queries goes to Gmail (both online in a browser and in the native email apps on Android and iOS devices). The third party Gmail app on most phones will actually strip out some of the media queries within the CSS, making it very hard for mobile responsive emails to look 100% accurate. Below are some example of email clients (both phone and browser clients) that do/don’t support media queries:

SUPPORT OF MEDIA QUERIES:

  • iOS (iPhone/iPad)
  • Android 4.x native client
  • Android Outlook.com app
  • Outlook.com (iOS)
  • Windows Phone 7.5
  • BlackBerry OS 6
  • BlackBerry OS 7
  • BlackBerry Z10
  • Kindle Fire native client

DEVICES THAT DON’T SUPPORT MEDIA QUERIES:

  • Gmail app (iOS + Android)
  • Inbox by Gmail app (iOS + Android)
  • Android Outlook Exchange via native client
  • Android Yahoo! Mail app
  • Gmail (Android Browser)
  • Mailbox (iOS + Android)
  • Outlook.com (Android Browser)
  • Yahoo! Mail (Android Browser)
  • Windows Phone 7
  • Windows Phone 8

When you’re creating a mobile responsive template, it’s important to remember that when it’s being coded for different devices, you should use a solid foundation of HTML and inline CSS. If you use media queries to create a masterpiece of an eDM campaign but your customer database has, for example, a Windows Phone 8 or they use the native Gmail app on iOS, the email is not going to render as nicely as it would on an iPhone or an Android phone.

Have you experienced testing your email on a device that doesn’t support media queries? How did you work around that?

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s