All About Email Media Queries

Aparna Seshadri
ByAparna Seshadri

6 mins read

In today's world, 81% of people check their emails on their phones, so you need a great user experience.

Wouldn't it be great if emails appeared the same way they appeared on desktops?

Yes, every developer's dream is to provide a great mobile experience for their users.

With a tool like email media queries on your side, optimizing your design for devices has never been easier. The rules for email media queries are the same as those for web coding, except that nesting isn't allowed.

This guide is a deep dive into email media queries and how they work hand in hand in delivering responsive email designs.

What are media queries?

Media queries is a cascaded style sheet technique(CSS) introduced in CSS3. It allows the HTML content of a web page to adapt to a device’s type, such as desktop or tablet, or specific parameters, such as screen resolution or viewport, among others. It uses the @media rule to include a block of CSS properties only if a certain condition is true.

Here is an example of how it is used in the code,

@media only screen and (max-width: 500px) {

body {

background-color: green;

}

}

The code tells you that if the screen, i.e., the browser window is 500px or smaller, the background color will be green.

Email media queries are similar to media queries as it helped make emails more responsive.

Syntax of media query

Before moving further, let’s understand the syntax of media query 👇

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

body {

background-color: light blue;

}

}

A media query code consists of the following components:

  • Media type lets you pick your category from all, print, screen and speech.

For instance, for emails, the media type is always screen.

  • Expressions are, in simple terms, the specific conditions that allow you to target the media query. It tests features such as width, height, and aspect ratio. Most commonly used media features include:

    • Max and min-width

    • Max and min-device width

    • Device pixel ratio

Benefits of email media queries

Responsive design is why you use a media query in HTML emails.

1. Scaling down content in different devices

It is common for developers to design desktop-first content with defined width values to your tables, 700 px. Without a media query, content gets scaled down on mobile devices, leading images, and text to break down.

For instance,

<table role=" presentation" border="1px" cellpadding="10" cellspacing="0" maxWidth="700" margin=" auto"

align=" center" class="main-content">

<tr>

<td>Email</td>

<td> Media </td>

<td> Query </td>

</tr>

<tr>

<td>Email</td>

<td> Media </td>

<td> Query </td>

</tr>

</table>

The output of the code looks like this, Screenshot 2023-09-08 at 10.01.39 PM.png For desktops the content style can be coded like this,

<style type="text/css">

.main-content{

width: 600px;

}

</style>

It is likely that content on mobile devices will be scaled down and cannot be fit on the

whole screen if the same code is applied. A mobile phone's viewport is usually smaller

than 600 px. Thus, media queries are perfect for solving this as you transform them to

suit the screen width of the mobile device easily.

<style type="text/css">

.main-content{

width: 600px;

}



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

.main-content {

width: 100% !important;

}

}

</style>

Using breakpoints

Using media queries goes beyond resizing to fit different layouts. Instead, you can use it to target different breakpoints. The code below will let you know how to use it to target a wide range of devices.

<style type="text/css">

/* Extra small devices (phones, 600px and down) */

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



/* Small devices (portrait tablets and large phones, 600px and up) */

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



/* Medium devices (landscape tablets, 768px and up) */

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



/* Large devices (laptops/desktops, 992px and up) */

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



/* Extra large devices (large laptops and desktops, 1200px and up) */

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

</style>

👆This would help you apply different styles to your tables, fonts, images, or any HTML element with the media query.

Managing content for device Orientation

Media queries can also target device orientation, not just viewport size. Although this is not

always necessary where you can define different styles based on orientation as follows:

<style type="text/css">

@media screen and (orientation: landscape) {

/* your css rules here */

}

</style>

Supporting video in specific email clients

A lot of engaging content simply won’t work with some email clients. Using animations and video in an email is great but ruins the user experience when done poorly.

Webkit-based browsers such as Applemail support video backgrounds, while email clients like Gmail and Outlook don't support the technical requirements to play video inside the email.

The code is shown below, 👇

<style type="text/css">

video[class="video"]{

display: none;

}

@media screen and (-webkit-min-device-pixel-ratio: 0) {

video[class="video"]{

display: block;

}

}

</style>

👆This allows display of elements to supported clients while it hides for everyone else.

Managing Color Schemes during the Rendering Process

Another use case for media queries lies in color schemes. The color scheme is a CSS property that allows an element to indicate which color scheme it can be rendered in. Common choices of color schemes include “dark,” “light,” or a day or night mode.

The prefer-color-scheme CSS media feature helps detect if a user has requested light or dark schemes. This allows email clients to handle color schemes differently, either by completely inverting the colors of the email or by not changing anything so that you can design according to a specific color scheme or keep it dark.

This is how you can implement using media query:

<style type="text/css">

.text{

color: black;

}

@media (prefers-color-scheme: dark ) {

.text{

color: white;

}

}

</style>

Media Queries and inline CSS go hand in hand

Since email developers add inline styles to HTML elements, styles in media queries must use the! important property. With CSS, an email client will use the order of CSS rules to determine which to be rendered as media queries are declared at the top of an HTML document, and any inline styles applied will take precedence.

Takeaways

Email media queries help craft the best email experiences, cater to diverse devices, and open up exciting possibilities for designers. They enable you to tailor your email design and make it responsive, as they cater to a broad audience.

Testing is critical to any innovative technique. Hence, with thorough evaluation, you can ensure that your campaigns adapt beautifully and deliver exceptional user experiences across all devices without distortions.

FAQs

As email developers add styles to HTML elements, styles in media queries can be added with !important. This helps reveal the order of precedence in CSS.

It allows us to apply specific CSS styling based on a set of conditions we apply with the media query.

To ensure proper email rendering, please inline the default CSS, while retaining the media query CSS in the <head> of your email. This approach allows media query styles to take precedence when triggered, and it's worth noting that clients supporting media queries do not remove the <head> or <style> sections.

Email media queries, a component of CSS3, empower developers to tailor their content for diverse presentations or devices. These code blocks are embedded within the <style> section of your email, governing its appearance at varying screen sizes.

The @media rule is employed within media queries to implement distinct styles based on various media types or devices. Media queries serve the purpose of examining multiple parameters, including viewport dimensions (width and height) and device dimensions (width and height).

What should you do next?

You made it till the end! Here's what you can do next to grow your business:

2_1_27027d2b7d
Get smarter with email resources

Free guides, ebooks, and other resources to master email marketing.

1_2_69505430ad
Do interactive email marketing with Mailmodo

Send forms, carts, calendars, games and more within your emails to boost ROI.

3_1_3e1f82b05a
Consult an email expert

30-min free email consultation with an expert to fix your email marketing.

Table of contents

chevron-down
What are media queries?
Syntax of media query
Benefits of email media queries
Supporting video in specific email clients
Media Queries and inline CSS go hand in hand
Takeaways

Fresh Marketing Ideas, Every Week.

Get the latest marketing roundup & news

Get 3X conversions
with interactive emails

Check.svg

Create & send interactive emails without coding

Check.svg

Put revenue on auto-pilot with pre-built journeys

Check.svg

Save time with AI-powered email content creation

1000+ businesses grew with Mailmodo, including

Frame_1110165681_3_b26b1a7573
Group_1110165532_1_bf39ce18b3
Ellipse_Gradientbottom_Bg
Ellipse_Gradientbottom_Top
gradient_Right