Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps


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?

If you haven't designed your email layout to be mobile responsive, your message will likely appear garbled on your subscriber's screen. In 2019, 42% of all emails were opened on mobile devices. Think about it: If you don't use responsive design, at least 42% of your readers won't be able to see your message properly.

Let's dive into the Responsive approach Email development in this article. We'll discuss 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 yet, check out our free responsive HTML templates or explore our comprehensive list of free templates online. Alternatively, if you just want to get started with code, check out the low-code solution for email development: the MJML markup language.

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

A responsive HTML email is exactly what it sounds like: it responds to differences in your reader's screen capabilities and screen size, regardless of which email client they use to view your email. Remember: “Mobile-responsive” is not the same as “mobile-friendly.” In fact, responsiveness goes beyond “mobile-friendly” and provides your users with an optimized, accessible experience no matter how and where they see your message.

What is 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 considerably across email services and apps. While we can rely on things like media queries, flexbox, grid, and JavaScript on the web, these aren't always supported in HTML emails (plus, you can't use JavaScript in emails because it's a security risk).

Some email apps don't support CSS media queries, so we need to think carefully about how we create responsive email templates. One thing worth noting is that the Gmail app for Android and iOS supports media queries for Gmail accounts. However, when reading email from another service (like Yahoo or an IMAP account), media queries are not supported. The Yahoo app for Android is another client that will weed out your media queries unless you can implement a hack where you paste the entire header of your document twice. Your sending platform may remove this, though.

These scenarios, and the fact that Outlook for Windows only supports a subset of the CSS2.1 specification, mean it's difficult to create responsive emails that render perfectly everywhere.

The good news is that using the fluid hybrid email coding method, you can design and create a simple email that looks great in any email app, even those that don't support media queries.

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

Fluid Hybrid Design, also known as “spongy” design, is a development methodology where email responsiveness is built into the layout itself, without the need for media queries.

It consists of three components:

  • Liquid: You should format content using maximum width or width percentages to create flexibility in your HTML email templates. This will make 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: Finally, combine these fluid and hybrid components with Ghost Tables – table markers hidden in conditional comments that are only rendered in Microsoft Outlook on a Windows device.

Fluid Hybrid Design is on its way to replacing media query-based design as the standard framework for responsive email. This technique creates emails that look great on almost any device and in almost any 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 the responsive HTML email templates previewed above.

You can achieve this by following these steps:

  1. Set up your media queries to recognize your user.
  2. Optimize your layout with media queries.
  3. Customize how columns appear on different devices.

Before you start

Before you begin, check out our quick refresher course on email coding if you're a bit rusty. This tutorial requires a good working knowledge of HTML and CSS.

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

First, we need to set up your media queries to recognize the user’s device. You can do this in the

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

2. Add bells and whistles to your media queries to optimize the layout.

It's time to give your media queries that little extra something to make your layout mobile-friendly. In other words, you can resize images and text. To be more specific, let's say you're using a full-size image for desktop clients. Simply resize the same image for mobile using CSS in your media query.

3. Customize how columns appear on different devices.

While this is by no means necessary, if you want to get really crazy, there is another way to tweak the layout of your HTML emails.

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

Here is a working example:


This is a standard desktop client

Keep in mind that this approach comes with some drawbacks. First, you may need to duplicate some content. Second, even though you hide two divs in this example, the email client will still need to load all of your HTML and assets. Consider reusing all of your images in any case 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 on some popular email clients? That's right. If your development team is on board, consider using fluid hybrid methods to develop responsive layouts. Check out our Primer for fluid hybrid design. For a deeper look into fluid hybrid design, visit the industry guide Nicole Merlin's future-proof fluid hybrid tutorial.

Wrap up

And that's all you need to know about coding a responsive HTML email layout! You now know the basics of creating a responsive email layout using media queries and where to find a great tutorial on fluid hybrid design.
As the final step in any email development process, don’t forget to test whether your design really works! Visit Email on Acid and benefit from our Campaign pre-check tool to ensure that your emails always appear as intended to all users.

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

Author: The Email on Acid Team

The Email on Acid content team is made up of digital marketers, content creators, and real email geeks. Connect with us on LinkedIn, follow us on Facebook, and tweet us at @EmailonAcid on Twitter for more interesting stuff and great conversations about email marketing.

Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps

LEAVE A REPLY

Please enter your comment!
Please enter your name here