email media queries

Using Media Queries in HTML Email


Now that Outlook.com may be starting to support email media queries, we have seen a resurgence in interest about how to use them. Read on to learn about media queries in HTML email.

What Are Email Media Queries?

Media queries are part of CSS3 and allow developers to customize their content for different presentations or devices. A media query consists of an optional media type (all, handheld, print, TV and so on) and any number of optional expressions that limit when the query will trigger, such as width, pixel-density or orientation.

At a basic level, media queries allow an email developer or email designer to create a responsive email by detecting the width of the display on which the subscriber is reading the email. For this purpose, the most commonly used email media query is max-width. With this code, all the CSS within the query will take effect if the width is less than the max-width specified.

Media queries can also be used to target certain resolutions or specific email clients. You can also use media queries instead of, or in addition to, fluid hybrid design.

How Min-Width and Max-Width Media Queries Work

How media queries function can be a bit confusing. Let’s look at the queries that are commonly used in email.

Max-Width

Here is an example of a max-width query:

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

What this query really means, is “If [device width] is less than or equal to 600px, then do {…}”

So, if the email is opened on an iPhone 5S, with a screen width of 320px, the media query will trigger and all of the styles contained in { … } will take effect.

Min-Width

Here is an example of a min-width query:

@media only screen and (min-width: 600px)  {...}

What this query really means, is “If [device width] is greater than or equal to 600px, then do {…}”

So, if the email is opened on an iPhone 5S, with a screen width of 320px, the media query will not trigger and the styles contained in { … } will not take effect.

Combining Min-Width and Max-Width

You can use these queries together to target a specific range of screen sizes.

@media only screen and (max-width: 600px) and (min-width: 400px)  {...}

The query above will trigger only for screens that are between 400px and 600px wide. You can use this method if you want to target a design for a specific device with a known width.

Breakpoints

Most media queries are set to trigger at certain screen widths or breakpoints. The parameters you use is a matter of debate amongst email developers.

Some developers argue that you should design for your smallest viewport and add a breakpoint at a size where your design becomes distorted. With more devices rolling out every month, designing for a few breakpoints can be easier than trying to create something for every device size.

iPhones and iPads provide us with a few easy breakpoints to start from. Coding styles for these specific clients will make sure our emails look great on these screens.

Androids, on the other hand, vary widely in screen size because there are so many different manufacturers and devices. We recommend creating two to four breakpoints that cover most devices. Here’s an example using some common Apple devices:

  • Breakpoint one: 320px (iPhone 5S):
  • Breakpoint two: 414px (iPhone 6+):
  • Breakpoint three: 703px (iPad Mini):
  • Breakpoint four: 768px (iPad Air):

The third and fourth breakpoint are optional, as most emails will look fine showing the desktop version on an iPad or large tablet. You could get away with using only breakpoint two, if you code your container tables to expand to 100% width (and not a set width, which may or may not match the device well).

Here’s another example provided by w3schools:

  • Breakpoint one: max-width 600px (extra small devices, such as phones)
  • Breakpoint two: min-width 600px (small devices, such as portrait tablets and large phones)
  • Breakpoint three: min-width 768px (medium devices, such as landscape tablets)
  • Breakpoint four: min-width 992px (large devices, such as laptops and desktops)
  • Breakpoint five: min-width 1200px (extra-large devices, such as large laptops and desktops)

Setting Min-Width and Breakpoint Order

There are a few different ways you can order your breakpoints and media queries. CSS rules that appear later in the embedded styles override earlier rules if both have the same specificity. This means that you can set rules for tablets first (such as the breakpoint four media query we explained earlier), then set styles for mobile devices (such as the breakpoint two we listed).

Because the breakpoint two styles (phones) come after the breakpoint four styles (tablets), your mobile styles will override your tablet styles when the breakpoint two query triggers. This means that you don’t have to set min-width for any of your media queries, if they are arranged in the correct order.

Here is an example order.

  • Desktop styles (not in a media query)
  • Tablet Styles (max-width: 768px)
  • Mobile Styles (max-width: 414px)

Coding for Media Queries

When coding a responsive email using media queries, a common technique is to create tables with align = “left” and a special class to target inside the media queries. For example, a two-column section might look like this:

<table border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
	<tr>
		<td style="padding:10px 0">
            <table align="left" width="49%" border="0" class="deviceWidth">
                <tr>
                    <td>
						
                    </td>
                </tr>
            </table>
            <table align="left" width="49%" border="0" class="deviceWidth">
                <tr>
                    <td>

                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Each of the tables with 49% width can fit side-by-side when on “desktop” view. We use 49% instead of 50% because Outlook can be very picky about what fits side-by-side and what doesn’t. You can use 50% width if you set all your styles right (no border, padding, etc).

If you want to create a three-column section using similar code, set each table to 32% width.

When the responsive code kicks in, we’ll want to make these content blocks 100% width for phones, so they fill the whole screen. A single media query will handle this for most phones:

@media only screen and (max-width: 414px) {
  .deviceWidth {width:280px!important; padding:0;}	
  .center {text-align: center!important;}	 
    }

You can continue to add media queries with special styles to cover as many different screen sizes as you’d like. You should also add code to your media queries to optimize font-size and line-height for each screen size. This will improve readability for your recipients.

If you’d like to start working with a responsive template, we have a free one available to you in our Resources.

Other Media Queries

There are some other interesting techniques you can do with media queries. The examples below are most relevant to email, but check out Mozilla Developer Network (MDN) Web Docs for more media query techniques.

Orientation

You can use the following media query to target device orientation. Unfortunately, this query doesn’t work well in iOS Mail. In most clients, the landscape media query will always trigger regardless of orientation.

@media screen and (orientation: landscape) { ...  }

Targeting Yahoo! Mail

You can use this simple query to write styles that will trigger only in Yahoo! Mail. This can be used to address layout or rendering issues that you see only in Yahoo! Mail, or to include messages intended only for Yahoo! users.

@media (yahoo) { ...  }

Pixel-Density

This media query targets devices that have a certain pixel density. Combined with webkit, you can target iOS devices. This can be useful when adding interactive code that only works in iOS Mail.

@media screen and (-webkit-min-device-pixel-ratio: 2) { ...  }

Media Queries for Print

When you set specific styles for print, you can ensure your email will look great when printed. This is especially important for emails with coupons or tickets. You can hide useless elements, like links and buttons, and display only the part of the email that is important to print.

@media print { ...  }

Email Client Support for Media Queries

Wondering which email clients support media queries? Check out the support chart below.

 

Media Query Support

 

EnvironmentEmail ClientMedia Queries Supported?
WebmailAOL
WebmailGmail✔️
WebmailG Suite✔️
WebmailYahoo! Mail✔️
WebmailOutlook.com❌ (But soon?)
WebmailOffice 365
DesktopApple Mail✔️
DesktopLotus Notes (IMB Notes)
DesktopOutlook 2000-2019
DesktopOutlook 2011 (Mac)✔️
DesktopThunderbird✔️
MobileiOS Mail✔️
MobileGmail App (Android)✔️
MobileGmail Android IMAP
MobileGmail App (iOS)✔️
MobileYahoo Android✔️
MobileYahoo! iOS✔️
MobileOutlook iOS✔️
MobileOutlook Android✔️
MobileWindows Mail✔️
Webmail (Regional)GMX
Webmail (Regional)La Poste✔️
Webmail (Regional)T-Online.de
Webmail (Regional)Telstra
Webmail (Regional)Web.de

How Do You Use Media Queries in Email?

Tell us about your favorite uses for media queries. Leave a comment below or hit us up on Facebook, Twitter or LinkedIn.

This post was updated on February 18, 2019. It was first published in October 2016.

Don’t guess, test

Email clients are constantly changing, which is why it’s important to test your email every time; what worked yesterday might not work today. Email on Acid offers unlimited email testing on more than 70 clients and devices, so you can make sure your email looks good before it hits the inbox. Want to see for yourself? Take advantage of our free, seven-day trial.

Test Today

Author: Email on Acid

The Email on Acid blog is on a mission to share email best practices, industry news, and solutions to most annoying email client bugs. Plus, we like to have a little fun along the way. Learn how to join the party and contribute to our blog.

12 thoughts on “Using Media Queries in HTML Email”

  1. Gmail support is not active for me just yet in the UK. On either the app or the browser based webmail.

  2. SquareBalloonEoin,
    Hmmm, that’s odd. We’ve had reports from others in the UK that Gmail support is indeed active. Have you tested some basic responsive code (not a full template) to make sure it’s not a coding issue?

  3. Nope, it was a full template. Although it is responsive in the other responsive tests. Unless of course, my media query is wrong. My media does work on other devices, so we can assume that is right? Or is there a specific media query for Gmail? Perhaps they are rolling it out to paying customers first?

  4. SquareBalloonEoin,
    No, it should be out for all UK users. I would suggest modifying your media query to make sure that it would target anything that can accept media queries. For example, you could use “@media (max-width: 3333px) {…}”

  5. Geoff – As we can’t integrate browser detection, how can we use this, while not causing rendering problems for unsupported clients?

  6. Brian,
    The usual approach is to code the email for desktop, and then use media queries to make it look good on mobile. Because the majority of clients that don’t support media queries are desktop clients (or web clients), it will look as it should across the board.

  7. Geoff, it’s not so much about testing the media query with such a broad requirement, because the media query works on iPhone, just not on the Gmail app. So we can assume the media query works but Gmail App doesn’t, do you agree?

  8. Hello Geoff,
    Wondering if you could provide insight on this issue. I am using a template based on your coffee shop template with 600px email width. Basic code for columns is

    I am having issues with Android 6.0 in Litmus testing.. It doesn’t appear that the newest version of Android allows media queries? I have tried several different variations of media queries and I can’t seem to make them work. Android 4.4 works but not 6.0 which doesn’t make any sense. I have a 1/3 + 2/3 layout for desktop and a stacked layout for mobile, so on Android 6.0 the layout is completely broken. It works on every other device however. Any recommendations?

    Comments are closed.

    Free Email Goodies