by Nicole Merlin3 Feb 2021
Length:LongLanguages:url-selector#selectionChanged” data-controller=”url-selector” style=”box-sizing: border-box; color: rgb(74, 74, 74);”>Englishالعربية/عربيবাংলাDeutschEspañolFrançaisहिंदीMagyarBahasa IndonesiaItalianoMelayuPolskiPortuguêsPусскийWikang TagalogTürkçeукраїнська моваTiếng Việt中文（简体）
Email DesignResponsive Web DesignHTMLMedia Queries
In this tutorial I will show you how to create a simple responsive HTML email which will work in every email client, including the more troublesome mobile and tablet apps. It uses minimal media queries and a “fluid hybrid” approach to ensure maximum compatibility.
Popular HTML Email Templates on Envato Elements
If you’re looking for a ready-made, professional solution, grab one of our popular HTML email templates on Envato Elements. We have hundreds of responsive options all included with your Elements membership, with easy to customize features to get you started.
Not what you’re looking for? No problem, this tutorial will teach you how to build your own.
What We’re Building
Here’s the responsive HTML email we’ll be building. Feel free to fork the pen and use it in your own work.
What’s The Best Way to Make an Email Template Responsive?
The process of making an HTML email responsive is a little different to making a web page responsive.
This is because 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 (and JavaScript can never be used in email because it would pose a security risk, and as such is always stripped out).
Some email apps don’t support CSS media queries, which means we have to think carefully about how we build responsive email templates. Most notable in this camp is the Gmail app for Android and iOS, which supports media queries for Gmail accounts, but when used to read emails from another service (like Yahoo or an IMAP account), media queries are not 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 this can be stripped out by your sending platform.
These sorts of scenarios, along with the fact that Outlook for Windows only supports a subset of the CSS2.1 specification, means it can get a bit tricky building responsive emails that render perfectly everywhere.
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 “Fluid Hybrid” is a Great Method for Creating Responsive Emails
The term “fluid hybrid” has evolved organically over time within the email development community. It’s a method whereby the responsiveness of the email is baked into the layout itself, without any need for media queries.
It’s known as fluid because we use a lot of percentage widths, and hybrid because we also implement some pixel max-widths on larger screens to limit the size of our elements. We combine all this with the use of Ghost Tables, which is table markup hidden inside conditional comments that only Outlook on Windows will render, another aspect turning the whole approach into a bit of a hybrid between old and new. Often, successfully blending old and new to achieve results is what email development is all about.
For a more in-depth look at the method, or if you would like to create a more complex layout, check out my other tutorial:
- Creating a Future-Proof Responsive Email Without Media Queries
- Nicole Merlin
- this method, here’s what we’ll be creating today: