Understanding Media Queries in HTML Email

[ 0 By

Email designers have long sought to build campaigns for every device. Especially today, when roughly half of all email opens happen on mobile devices, it’s important to design an experience that works well across different form factors. While this used to be a difficult task (and still is for some email clients), media queries can make this task easier.

But, unless you’ve been mired in the world of web design, you may not know what media queries are and why you should use them. In this blog post, we’ll dissect the ever-useful media query and see why it is a must-use in every email.

Discover your top 10

When it comes to email marketing, it’s all about your audience. Use Litmus Email Analytics to discover which email clients are most popular with your subscribers.

Discover your audience →

 

What is a media query?

Media queries are a component of cascading style sheets (CSS), the language used to style websites and email campaigns. At its most basic level, media queries act as a switch for triggering styles based on a set of rules. So, how does that switch work?

A media query consists of three parts: the media type, an expression, and the style rules contained within the media query itself.

definingmobile-mediaquery

The media type allows us to declare what type of of media the rules should be applied to. There are four options you can declare: all, print, screen, and speech. For the purposes of email, you can nearly always use the screen type.

Expressions allow you to further target devices based on specific conditions you pass the media query. Expressions test media features, which describe different features of a device, such as width, height, aspect-ratio, and color. While there are many media features you can test, most email designers rely on the following:

  • max- and min-width
  • max- and min-device-width
  • device-pixel-ratio

Media features can also be combined within the media query to provide greater control over targeting devices and clients. We’ll see an example of this when we talk about advanced media query use.

Finally, within the media query’s curly braces, CSS rules can be be toggled when the email is opened on a device that satisfies both the media type and expressions.

Media queries need to be included within a style block which is typically located in the head of your HTML. This has implications when it comes to how we write our CSS rules and support for media queries, both of which we’ll discuss later.

The benefits of media queries

Using media queries, we can fine-tune email designs so that they are more usable across a wide range of devices. Let’s look at a common scenario.

For a long time, email designers built their emails using a desktop-only approach. The email uses fixed table widths and everything is optimized to look good on desktop and webmail clients. However, when viewed on mobile devices, the design breaks down: the email is zoomed to fit, making the text and buttons too small to tab; the layout is broken and unusable; or the right-side of the email is hidden from view, making horizontal scrolling necessary.

Prior to the use of media queries, there was little a designer could do to overcome these problems. Now, we can use media queries to target mobile devices and adjust our styles accordingly.

A quick example

If you’ve read our guide to mobile approaches, you know that fixed-width emails are typically scaled down on mobile devices, leading to small, unreadable text. Fluid emails, which use percentage-based widths, allow content to flow and fill various screen sizes.

So, let’s say we have a container table with a fixed width of 600 pixels. In this scenario, we want to switch that fixed width of 600 pixels in desktop views to a fluid, percentage-based width (100%) on smaller screens.

<table border="0" cellpadding="0" cellspacing="0"  width="600" class="container-table">

You’ll notice that a class has been added to the container table. We can achieve the fixed-to-fluid switch by using classes to name and target HTML elements, and using our media query to override the styles applied to the table. Every class needs a name, and in this case, we’ve named ours .container-table. We suggest giving classes obvious names that speak to their purpose in your media query.


/* TYPICAL WEB DESIGN METHOD */
.container-table {}

Once we’ve added the class name to the table tag, we’ll need to add the media query to the of our HTML, along with an expression and the same class name. The expression we’ve used, max-width: 600px, tells the media query to apply the rules any time the screen size is less than 600px wide.


@media screen and (max-width:600px) {
    .container-table {
    }
}

Now, we’ll add the style rules that adjust the value of the CSS width property for that table. Now our container table is fluid on any viewport narrower than 600 pixels.


@media screen and (max-width:600px) {
    .container-table {
        width: 100% !important;
    }
}

This same approach can be used to adjust common pain points on mobile such as text, image, and button sizes. For example, if we want to adjust the text size of our copy on mobile, we can do so in a nearly identical way:


@media screen and (max-width:600px) {
    .mobile-text {
        font-size: 18px !important;
    }
}

By targeting class names or specific elements, we can manipulate our designs and make them more readable and usable on smaller devices.

It should be noted that, in most cases, we are using media queries to override inline styles. If you are familiar with how CSS works, the cascade uses the order of declaring CSS rules to determine which styles should be rendered. Since media queries naturally live at the top of an HTML document, any inline styles applied to the content of the email will take precedence. Therefore, we need a way to override those inline styles.

This can be accomplished using the !important declaration:

td { font-size: 24px !important; font-weight: bold !important;  }

A lot of web designers rail against the overuse of the !important declaration but, for email designers, it’s our best friend.

Advanced targeting

While a lot of email designers will only ever use media queries to adjust styles for mobile devices, they can be used in more advanced ways, too.

There are a lot of coding and design techniques that simply don’t work in some email clients. Things like SVG, CSS animations, and video are amazing when you can get away with them but, when done poorly, can ruin the experience for subscribers viewing in outdated email clients. One of the most valuable uses of media queries is to target specific email clients or platforms and progressively enhance content, so that those cutting-edge techniques can be used without worrying about breaking the experience for everyone else.

A great example of this is our popular email featuring a background video which we sent to promote our first Litmus Live event. Video in email has long been considered the holy grail of email design. While a few clients support it, most don’t. Instead of attempting to shove the video into everyone’s inbox, our designer, Kevin, used media queries to target only those clients that support video in email and enhanced the campaign for that audience.

Video backgrounds are only supported by certain Webkit-based browsers, namely Apple Mail and Outlook 2011 for Mac. While other email clients saw a background color and background image (when supported), thanks to the following media query, the Webkit-based clients saw a full-width video playing in the background:


@media screen and (-webkit-min-device-pixel-ratio: 0) {
    /* Insert styles here */
}

Similar expressions can be used to target a whole host of devices based on their features. For example, if you wanted to target the iPhone X in standard view, you can use the following:


@media screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) {
    /* Insert styles here */
}

Using media queries to target specific email clients or platforms gives email designers previously unheard of control over their designs. When combined with things like CSS animations, designers can deliver truly astounding experiences right in the inbox.

Support

Support for media queries in email clients across mobile, webmail, and desktop has improved over the years—most popular email clients support media queries! Check out this support table to see where media queries are supported:

Media Query Support in Email Clients

Mobile

Android 4.4

check-green

Gmail app (Android)

check-green

Gmail app IMAP (Android)

check-x

iOS

check-green

Inbox by Gmail (Android)

check-green

Inbox by Gmail (iOS)

check-green

Outlook (Android)

check-green

Outlook (iOS)

check-green

Samsung Mail (Android)

check-green

Yahoo! Mail app (Android)

check-green

Yahoo! Mail app (iOS)

check-green

Desktop

Apple Mail 10

check-green

Outlook 2000-03

check-green

Outlook 2007-16

check-X

Outlook for Mac

check-green

Thunderbird

check-green

Windows 10 Mail

check-X

Webmail

AOL Mail

check-X

Gmail

check-green

G Suite

check-X

GMX.de

check-green

Inbox by Gmail

check-green

Libero

check-green

Office 365

check-X

Orange.fr

check-X

Outlook.com

check-X

Gmail

check-green

SFR.fr

check-green

T-online.de

check-X

Web.de

check-green

Yahoo! Mail

check-green

This varying degree of support is why we typically recommend building a solid foundation for your email using HTML and inline CSS, with media queries added in to progressively enhance the design. The hybrid approach to building emails is the perfect foundation for when media queries aren’t supported.

Improve your campaigns

Media queries allow designers to build experiences for a wider range of devices than ever before. More importantly, they allow you to fine-tune your designs for an increasingly mobile audience. As with any new technique, it’s important to test your campaigns to make sure they look great.

Go responsive with one of our pre-tested responsive templates

Litmus Community Templates

Kickstart your next campaign with one of Litmus’ pre-tested templates.

Access the templates →