---

You’ve created a great HTML email layout. At least, it looks good on your computer. But what if your email subscribers open your email marketing campaign or email newsletter on a mobile device? 

Chances are, if you haven’t coded your email layout in a mobile-responsive way, your message will be garbled on your subscriber’s screen. In 2019, mobile opens accounted for 42% of all email opens. Think about that: unless you use responsive designs, at least 42% of your readers won’t be able to see your message correctly.

Let’s dive into the how-to of responsive email development in this article. We’ll go over the best way to make your HTML email template responsive, introduce the fluid hybrid method, and provide a quick tutorial on responsive email design with media queries.

If you’re not ready to dive into the code, check out our free responsive HTML templates or explore our comprehensive list of free templates on the web. Alternatively, if you just want to dip your toes into code, check out the low-code solution to email development: the MJML markup language.

What are responsive HTML emails (and why do I need them)?

A responsive HTML email is exactly as it sounds – it responds to differences in your reader’s screen capabilities and screen size regardless of the email client they use to view your email. Remember: “Mobile-responsive” isn’t the same as “mobile-friendly.” In fact, responsiveness goes beyond “mobile-friendly” to bring an optimized, accessible experience to your users, regardless of how and where they view your message.

What’s the best way to make an email template responsive?

Making an HTML email responsive is a little different from responsive web design.

The level of support for HTML and CSS standards varies widely across email services and apps. So while we can rely on things like media queries, flexbox, grid, and JavaScript on the web, they aren’t always supported in HTML email (plus, you can’t use JavaScript in email because it poses a security risk).

Some email apps don’t support CSS media queries, so we must think carefully about how we build responsive email templates. Most notably, the Gmail app for Android and iOS supports media queries for Gmail accounts, but when used to read emails from another service (like Yahoo or an IMAP account), media queries aren’t supported. The Yahoo app for Android is another client that throws out your media queries unless you can implement a hack where you include the entire head of your document twice, but your sending platform can strip this out.

These scenarios, along with the fact that Outlook for Windows only supports a subset of the CSS2.1 specification, means building responsive emails that render perfectly everywhere is tricky.

The good news is that you can design and build a simple email that will look excellent in every mail app, including those that don’t support media queries, by using the fluid hybrid email coding method. 

Why is the fluid hybrid method a great way to create responsive emails?

Fluid hybrid design, also known as “spongy” design, is a development method in which the responsiveness of the email is baked into the layout itself without needing media queries.

It consists of three components:

• Fluid: You should format content using percentages of max-widths or widths to create flexibility within your HTML email templates. This makes your design “fluid.”
• Hybrid: The resulting template is “hybrid” because you combine fluid percentages with fixed pixel widths (or max-widths) to control the size of your elements depending on the available space.
• Ghost Tables: Lastly, you combine these fluid and hybrid components with Ghost Tables – table markup hidden inside conditional comments that will only render on Microsoft Outlook on a Windows device.

Fluid hybrid design is on its way to replacing media query-based design as the go-to framework for responsive emails. This technique creates emails that look great on almost any device and in nearly every email client.

How can I code a responsive HTML email with media queries?

Now that you’ve learned the basics, let’s dive into coding responsive HTML email templates previewed above.

You’ll do this with the following steps:

1. Set up your media queries to detect your user.
2. Optimize your layout with media queries.
3. Adjust how columns display across different devices.

Before you start

Before starting, check out our quick refresher on coding emails if you’re a bit rusty. For this tutorial, you’ll need a working knowledge of HTML and CSS.

1. Set up your media queries to detect your user.

First, we need to set up your media queries to detect the user’s device. You can do this in the <style> section of the header in your HTML document. This is also known as embedding your stylesheet in the header. We’ve discussed inline CSS elsewhere if you need a refresher, but inline CSS is the preferred method for media queries. With inline CSS, you can adjust screen size accordingly. Check out the following code:

<style type = “text/css”>
@media only screen and (max-device-width: 480px) {
    /* Here you can include rules for the Android and iPhone 
    native email clients. 
    
    Device viewport dimensions are as follows
    Iphone - 320px X 480px - portrait, 480px X 320px - landscape
    Android - 350px X 480px - portrait, 480px X 350px - landscape
    (These are average dimensions, the Android OS runs on several different devices)
    */
img {
          width: 100%;
        }

}		
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px){
    /* Here you can include rules for the iPad native email client. 
    Device viewport dimensions  768px x 1024px - portrait, 1024px x 768px - landscape
    */
img {
          width: 100%;
        }
}
</style>

Note that we’ve added some comments in the code snippet above. Be sure to remove the comments before testing or sending your email to avoid getting blocked by spam filters.

2. Add “bells and whistles” to your media queries to optimize layouts.

It’s time to add “bells and whistles” to your media queries to optimize your layout for mobile devices. In other words, you can resize images and text. To be more specific, let’s say you’re using an image at full size for desktop clients; just resize that same image for mobile devices using CSS within your media query.

3. Adjust how columns display across different devices.

While this is by no means necessary, if you want to get really crazy, there’s one more option to optimize your HTML email layout.

Let’s say you have a three-column layout and want it to appear as two columns on an iPad and one column on an Android phone or iPhone. To do this, you could show and hide container divs depending on the device.

Here’s a working example:

<style type = “text/css”>
@media only screen and (max-device-width: 480px) {
    body[yahoo] #smallScreen {display:block !important}
    body[yahoo] #desktop {display:none !important}
}	
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)  {
    body[yahoo] #largeScreen {display:block !important}
    body[yahoo] #desktop {display:none !important}
}	
</style>

</head>
<body yahoo="fix">
    <div id="smallScreen" style="display:none; color:#FFF; background:#000;">
    	This is a Small Mobile Client
    </div>
    <div id="largeScreen" style="display:none; color:#0F3; background:#FFC;">
    	This is a Large Mobile Client
    </div>
    <div id="desktop" style="display:block; color:#00F; background:#3F3;">
    	This is a Standard Desktop Client
    </div>
</body>

Remember, there are a few downsides to this approach. First, you might have to duplicate some content. Secondly, even though you’re hiding two divs in this example, the email client will have to load all your HTML and assets. Consider reusing all of your images in each instance to control the overall file size of your email.

How can I code a responsive HTML email with fluid hybrid design?

But wait, didn’t we already say that queries don’t work for some major email clients? That’s right. If your development team is on board, you should consider using fluid hybrid methods to develop responsive layouts. Check out our primer on fluid hybrid design. For a more in-depth look at fluid hybrid design, look at industry leader Nicole Merlin’s future-proof fluid hybrid tutorial.

Wrapping up

And that’s all there is to coding a responsive HTML email layout! You now know the basics of creating a responsive email layout using media queries and where to go to find a great fluid hybrid design tutorial.
As the final step in any email development process, don’t forget to test if your design actually works! Head over to Email on Acid to take advantage of our Campaign Precheck tool to ensure your emails display as you intend for all your users every time.

This article was updated on July 25, 2022. It first published in July of 2011.