Call-and-Response: Using Responsive Design in HTML Emails
Do you check email on your phone? If you’re like most people—85%, according to 99Firms—the answer is yes. And your customers are in the same boat: opening your emails on their phones and tablets as well as their desktops.
That means your conversion rate depends on your email looking great on every device! There are three main approaches you can take:
- Mobile-first design is the simplest, lowest cost method, but gives you limited control over styling
- Hybrid design offers lots of control over styling, but requires far more coding expertise—and can get tricky with complex layouts
- Responsive design offers more control over styling than mobile-first design and lower cost than hybrid design. When built well, it’s the best of both worlds!
With a bit of time and coding chops, you can build responsive emails optimized for all your audience members’ devices. Read on for an overview on how to do it—and guidelines on when it’s worth it.
Say hello to media queries
Responsive design is powered by CSS media queries. The principle is simple: an if-then query that triggers a set of conditional rules. Basically, the media query calls out to each device and says “Hey, what are you?” and then responds with the appropriate code.
Armed with info about each recipient’s device, you can adjust various elements of your email for factors like:
- The width and height of the screen/device
- The screen resolution of the device
- Whether the device is in landscape or portrait mode
- If the device is in standard or dark mode (read more on dark mode here)
Benefits of responsive design
Responsive designs deliver styling and layout optimized for each device. Plus, you can eliminate frustrating issues on mobile devices, like horizontal scrolling and mangled navigation, that can harm your conversion rates. Some elements you can code to respond to different devices:
- Change email width
- Change font sizes and colors
- Convert multiple columns to single column
- Scale background images for different screen sizes
- Show or hide certain content (aka, progressive disclosure)
- Optimize navigation bars and menus
For example, you can send a fixed-width email for easy reading on desktops, while delivering the same email at a width of 100% to people using phones and tablets.
Why not make the column width the same for everyone? The full-width layout will look great on mobile, but it will be too wide to read on desktop. On the other hand, a fixed-width column will look perfect on desktop—but your mobile audience may have to scroll horizontally to see all your text (or, more likely, they’ll just delete your email).
Take a look at this simple responsive email that adapts from a fixed-width to a 100%-width column width for iOS versus a desktop client:
And here’s the media query that makes it happen:
@media only screen and (max-width: 600px) {
body {
width: 100% !important;
}
}
@media (min-width: 600px) {
body {
width: 400px !important;
margin-left:auto;
margin-right:auto;
}
}Challenges of responsive design
Using responsive design requires more technical knowledge and longer development time than mobile-first design. If you’re not already adept at using CSS media queries, you may find yourself investing a lot of resources and run into email performance issues.
And while CSS media queries are widely supported by email clients, that support isn’t universal. Check out this list from Litmus and compare it with the email clients your audience is using.
5 steps to coding responsive emails
Ready to roll up your sleeves and give it a go? Here’s a high-level overview of the steps you’ll need to take:
- Decide what elements you want to respond based on each device you’re targeting
- Code a standard HTML email with inline CSS. (You’ll need to inline CSS for email clients that don’t support media queries)
Tip: Make sure to add classes to the HTML elements. Classes help tie the mobile CSS rules to the element itself - Add a <head> area. This is where you’ll put additional code for media queries and media query styles
- In the <head> area, write a CSS media query (@media) to check the recipient’s device and update each element’s styling as desired
- Test your email before you send! This is something you should always do, and the more complex your code is, the more troubleshooting it can require
Reference this Email on Acid guide for the specific code you’ll need for common media queries and client-specific targeting.
Media queries and CSS inlining
Since CSS media queries aren’t universally supported, plan ahead to make sure you can deliver an email that performs well for every customer. Clients that don’t support media queries will strip the <head> area (including your media query)—so you’ll need to inline your CSS styling as a fallback. Check out this article for more info on using an inliner to do it.
For email clients that support media queries, your embedded styles will display as planned. When you add media queries and media query style rules to <head>, mark each style with an !important declaration—this will override your inline styles and apply your media query styles according to the media query rules.
Here’s a code sample to get you started:
<head>
<style>
.special-heading{
color:blue;
}
@media only screen and (max-width:600px) {
.special-heading {
color:red !important;
}
}
</style>
</head>One caveat: while most Gmail clients support media queries, there are some extra details you need to pay attention to in your code, because Gmail converts the doctype to <u></u>. You can find the code you need to target Gmail clients (as well as code examples for many other clients) at HowToTarget.email (and FreshInbox has a handy breakdown of the how and why).
3 considerations before diving in
Responsive design is a powerful way to make sure that your email looks great to everyone in your audience. But that benefit comes at a cost—and it’s not always worth it. Here are three questions to ask yourself when considering a responsive-design approach.
Do you have the time and resources to code a responsive email?
Because responsive design code is more complex, there are more places for it to break. That means more time to write the code, plus additional testing and troubleshooting with your target email clients. If you don’t have adequate time and resources, you’re better off coding a solid mobile-first design—because a rushed, buggy responsive design will only hurt your brand.
What specific benefits will you get that you couldn’t achieve with mobile-first design?
Mobile-first designs are cheaper and faster to implement than responsive designs, and they solve a lot of the same problems. It’s a smart strategy to use mobile-first design wherever possible, and shift to responsive design only when there’s a clear benefit that will significantly increase conversions.
What devices and clients are your audience using?
You can’t know if the additional costs of responsive design are worthwhile if you don’t know what devices your audience is using to view your emails. If 90% of your audience opens your emails on mobile, it’s probably not worth the cost to optimize for desktops! Make sure you’re mining your data, and do market research if you’re seeking new audiences.
How to make the call on responsive design
Once you’ve answered the questions above, you can do a cost/benefit analysis about whether responsive design makes sense for the email you’re crafting. In some cases, it can make a significant difference in conversions. For example, it may be worth it when:
- Your data shows a wide mix of desktop and mobile email opens
- A two-column layout is important for getting more info above the fold on desktop
- You often use the same layouts and can build responsive templates to reuse
However, responsive design isn’t worth it for little tweaks that don’t have much impact on the finished product. You’ll just burn up development time—and create more opportunities for email clients to break your email and frustrate your customers!
Responsive design is just one of many tools in your toolbox for building high-performing HTML emails. Always start with a solid approach to design and coding (here’s a primer, including details on going the mobile-first route). Keep the big picture in mind when you choose your approach, and you’ll keep your costs down and your KPIs up!
