If you’ve read our guide to mobile approaches, you know that fixed-width emails are typically scaled down on mobile devices, leading to small, unreadable text.
Now, we can use media queries to target mobile devices and adjust our styles accordingly. Prior to the use of media queries, there was little a designer could do to overcome these problems. However, when viewed on mobile devices, the design breaks down: the email is zoomed to fit, making the text and buttons too small to tab the layout is broken and unusable or the right-side of the email is hidden from view, making horizontal scrolling necessary. The email uses fixed table widths and everything is optimized to look good on desktop and webmail clients. Let’s look at a common scenario.įor a long time, email designers built their emails using a desktop-only approach. Using media queries, we can fine-tune email designs so that they are more usable across a wide range of devices. This has implications when it comes to how we write our CSS rules and support for media queries, both of which we’ll discuss later. Media queries need to be included within a style block which is typically located in the head of your HTML. We’ll see an example of this when we talk about advanced media query use.įinally, within the media query’s curly braces, CSS rules can be be toggled when the email is opened on a device that satisfies both the media type and expressions. Media features can also be combined within the media query to provide greater control over targeting devices and clients. While there are many media features you can test, most email designers rely on the following: Expressions test media features, which describe different features of a device, such as width, height, aspect-ratio, and color. For the purposes of email, you can nearly always use the screen type.Įxpressions allow you to further target devices based on specific conditions you pass the media query. There are four options you can declare: all, print, screen, and speech. The media type allows us to declare what type of of media the rules should be applied to. So, how does that switch work?Ī media query consists of three parts: the media type, an expression, and the style rules contained within the media query itself.
At its most basic level, media queries act as a switch for triggering styles based on a set of rules. Media queries are a component of cascading style sheets (CSS), the language used to style websites and email campaigns.
Use Litmus Email Analytics to discover which email clients are most popular with your subscribers. When it comes to email marketing, it’s all about your audience. Enterprise Plan Boost collaboration and drive results.Litmus Plus Automate testing to ensure quality.Litmus Basic Build error-free, effective emails quickly.All Plans See solutions for companies of all sizes.
0 kommentar(er)
