mailmodo-hamburger

All about Email Media Queries

ByAparna Seshadri

Share

Linkedin logo
Twitter logo
copy link
Facebook logo
Whatsapp logo
Pinterest logo
mail logo

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.

Table of contents

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.

What you should do next

Hey there, thanks for reading till the end. Here are 3 ways we can help you grow your business:

  1. Talk to an email expert. Need someone to take your email marketing to the next level? Mailmodo’s experts are here for you. Schedule a 30-minute email consultation. Don’t worry, it’s on the house. Book a meet here.

  2. Send emails that bring higher conversions. Mailmodo is an ESP that helps you to create and send app-like interactive emails with forms, carts, calendars, games, and other widgets for higher conversions. Get started for free.

  3. Check out our AI prompts library. If you need AI prompts for ChatGPT or Bing, here's a ready-made database we’ve built to help marketers succeed at prompt engineering. Get your AI prompts here.

  4. Get smarter with our email resources. Explore all our knowledge base here and learn about email marketing, marketing strategies, best practices, growth hacks, case studies, templates, and more. Access guides here.

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?

Thanks for reading till the end. Here are 3 ways we can help you grow your business:

Group_102411_1fd1b38156

Get smarter with our email resources

Explore our email marketing guides, ebooks and other resources to master email marketing.

Transactional_email_within_your_marketing_plan_0532bc94ee

Do better email marketing with Mailmodo

Send app-like interactive emails with forms, carts, calendars, games, etc. to boost email ROI.

support_820ceb7ecf

Talk to an email expert

Get a 30-min. free email consultation with a Mailmodo expert to optimize your email marketing.

Was this post useful?

Add Interactive Forms & Games to your Emails with Mailmodo

  • tickMaximize email ROI
  • tickPre-built automations
  • tickAI-powered email editor
  • tickHuman customer support
Group_1110166039

Improve your email marketing

With interactive emails, smarter automation workflows, AI-powered email content and higher conversions

Group_1110165311
Union_1_6200367a50