How To Use Media Queries in Email to Target Mobile Devices

November 14, 2014 Ryan Bovy

 

What are Media Queries?

Media queries act as a trigger for a conditional portion of CSS (cascading style sheet). They have three main components: the media type, the text expression (condition) and the styles to display if the condition is met. Let’s break-down the media query into its parts:

Media Type

The media type has four main options: all, print, screen, and speech. For email, use the “screen” option to target specific devices.

How to Use Media Queries

Condition

Think of the condition as an “If” statement. For example, “If screen size is less than 480px, then display these styles.” Conditions can be based on multiple features such as: width, height, aspect-ratio, device-width and color.

For targeting devices, width (max or min), device-width (max or min) and device-pixel-ratio (aspect ratio) are used most frequently.

How to Use Media Queries

Styles

Styles within a media query function the same as any styles that are outside of a media query. However, these styles will only be applied if the condition of your media query is met.

How to Use Media Queries

Why Use Media queries?

Media queries allow us to target mobile devices, so even though we are building for desktop, our emails still render nicely on mobile devices. Or, if you are taking a mobile-first approach, then you can use media queries to create progressive enhancements in your emails.

The most common issue with mobile emails is horizontal scrolling; the email renders too widely to fit on our device's screen all at once. This can easily be remedied with the use of media queries by making the container of our email fit to 100% of the width of our screen.

How to Use Media Queries

Now that our email fits nicely across the width of our screen, our text appears very small and difficult to read. Thankfully, with media queries we can target and increase the font sizes used throughout the email.

A more advanced use of media queries allows us to stack content, and even make some content appear or disappear depending on the device. For example, loading an animation on devices that will render it, while ignoring that animation for all other devices allows for the best degradation.

Proceed with Caution

As with most features in email and websites, media queries are not supported everywhere. The majority of mobile devices' default email clients will support media queries, while a number of webmail apps for the different operating systems lack support for the feature.

It is important to know where your clients are opening your emails to know whether or not media queries are the best fit for your email design.

Previous Article
How to Identify the Zone ID for RTP
How to Identify the Zone ID for RTP

How to: Identify the Zone ID for RTP To setup an ‘In Zone’ campaign using Marketo RTP, you need to be able ...

Next Article
How to use the Campaign Inspector
How to use the Campaign Inspector

Have you ever wanted to see a list of all Smart Campaigns? What about a list of all Smart Campaigns that ar...