Use Media Queries for Responsive Emails

Goal

Understand how to use CSS Media Queries in email design to optimize display across different screen sizes, especially for mobile users.

Background

Mobile usage has changed how users interact with emails. To adapt to narrow screens and different reading habits, designers use Media Queries — CSS rules that adjust the layout based on screen dimensions.

Media Queries were originally introduced in CSS2 and CSS3 for responsive design across print and screen. While not all email clients support them, they remain one of the most effective ways to deliver adaptable layouts.

W3C Specification for Media Queries

Media Queries work in HTML-rendered emails, including CMS emails, if supported by the template and the email client.

Key Characteristics of Media Queries

• Responsive Design: Layouts adapt based on screen width (and sometimes height).

• Media Types: Can define styles for different media (screen, print). Mobile is not a dedicated media type.

• Automatic Scaling: Width-driven styling allows content to scale on smaller devices.

• Device Limitations: Media Queries can't target specific devices like Android or iPhone—only screen dimensions.

Limitations

Media Queries are not supported consistently across all email clients. Support depends on the email client, its version, and the rendering engine used.

Examples of clients that typically support Media Queries include:

• Apple Mail

• iOS Mail

• Outlook for iOS

Examples of clients where Media Queries are commonly ignored or only partially supported include:

• Gmail (web and app, depending on version)

• Some Android email apps

• Legacy or less common email clients

Always design fallback layouts that display correctly when Media Queries are not applied.

Design Implications

• Ensure fallback design displays cleanly if queries are ignored.

• Avoid overlapping tables or excessive columns.

• Use Read Mobile and Read Online links as alternatives.

Best Practices

• Keep layout simple: Minimize nested tables and columns.

• Use scalable images: Ensure they display correctly both full-size and when resized.

• Test extensively: Preview your layout in common clients using tools like Message Rendering in Mapp Engage.

• Use CMS templates: When using CMS templates, Media Queries may already be included depending on the template configuration. Availability and behavior depend on the template and the email client.

What to Avoid

✘ Overlapping or multi-column tables that break layout when scaled

✘ Hidden content that becomes unreadable if queries are unsupported

✘ Assuming consistent behavior across all clients

How to Apply Media Queries in Mapp Engage