Note: This content was provided by our Partner, Elixiter, Inc.
What are Media Queries?
Media queries act as a trigger for a conditional portion of CSS (cascading style sheet). They have three main components: the media type, the text expression (condition), and the styles to display if the condition is met. Let’s break down the media query into its parts:
Media Type
The media type has four main options: all, print, screen, and speech. For email, you will be using the “screen” option to target specific devices.
Condition
Think of the condition as your “if” statement. For example, “if screen size is less than 480px, then display these styles.” Your condition can be based on multiple features such as: width, height, aspect-ratio, device-width, and color.
For targeting devices, you will most often use width (max or min), device-width (max or min), and device-pixel-ratio (aspect ratio).
Styles
The styles that you place within your media query function the same as any styles outside your media query. However, these styles will only be applied if the condition of your media query is met.
Why Use Media queries?
With Marketo’s lack of support for regular conditional CSS statements, many of us are required to build fixed width emails, rather than a mobile-first approach. Media queries allow us to target mobile devices, so even though we are building for desktop, our emails still render nicely on mobile devices.
The most common issue with mobile emails is horizontal scrolling; the email renders too widely to fit on our devices screen all at once. This can easily be remedied with the use of media queries by making the container of our email fit to 100% of the width of our screen.
Now that our email fits nicely across the width of our screen, our text appears very small and difficult to read. Thankfully, with media queries we can target and increase the font sizes used throughout the email.
A more advanced use of media queries allows us stack content, and even make some content appear or disappear depending on the device. For example, loading an animation on devices that will render it, while ignoring that animation for all other devices allows for the best degradation.
Proceed with Caution
As with most features in email and websites, media queries are not supported everywhere. The majority of mobile device’s default email clients will support media queries, while a number of webmail apps for the different operating systems lack support for the feature.
It is important to know where your clients are opening your emails to know whether or not media queries are the best fit for your email design.
.png)