You’ve created an amazing HTML e mail format. A minimum of, it seems good on your laptop. However what in case your e mail subscribers open your e mail advertising marketing campaign or e mail publication on a cellular machine?
Likelihood is, should you haven’t coded your e mail format in a mobile-responsive means, your message shall be garbled in your subscriber’s display. In 2019, cellular opens accounted for 42% of all e mail opens. Take into consideration that: except you employ responsive designs, a minimum of 42% of your readers received’t have the ability to see your message accurately.
Let’s dive into the how-to of responsive e mail growth on this article. We’ll go over the easiest way to make your HTML e mail template responsive, introduce the fluid hybrid methodology, and supply a fast tutorial on responsive e mail design with media queries.
In the event you’re not able to dive into the code, try our free responsive HTML templates or discover our complete checklist of free templates on the internet. Alternatively, should you simply need to dip your toes into code, try the low-code resolution to e mail growth: the MJML markup language.
What are responsive HTML emails (and why do I would like them)?
A responsive HTML e mail is strictly because it sounds – it responds to variations in your reader’s display capabilities and display dimension whatever the e mail consumer they use to view your e mail. Keep in mind: “Cell-responsive” isn’t the identical as “mobile-friendly.” The truth is, responsiveness goes past “mobile-friendly” to convey an optimized, accessible expertise to your customers, no matter how and the place they view your message.
What’s the easiest way to make an e mail template responsive?
Making an HTML e mail responsive is a bit of totally different from responsive internet design.
The extent of assist for HTML and CSS requirements varies extensively throughout e mail companies and apps. So whereas we will depend on issues like media queries, flexbox, grid, and JavaScript on the internet, they aren’t at all times supported in HTML e mail (plus, you’ll be able to’t use JavaScript in e mail as a result of it poses a safety danger).
Some e mail apps don’t assist CSS media queries, so we should consider carefully about how we construct responsive e mail templates. Most notably, the Gmail app for Android and iOS helps media queries for Gmail accounts, however when used to learn emails from one other service (like Yahoo or an IMAP account), media queries aren’t supported. The Yahoo app for Android is one other consumer that throws out your media queries except you’ll be able to implement a hack the place you embody all the head of your doc twice, however your sending platform can strip this out.
These eventualities, together with the truth that Outlook for Home windows solely helps a subset of the CSS2.1 specification, means constructing responsive emails that render completely in all places is difficult.
The excellent news is which you can design and construct a easy e mail that can look wonderful in each mail app, together with those who don’t assist media queries, through the use of the fluid hybrid e mail coding methodology.
Why is the fluid hybrid methodology an effective way to create responsive emails?
Fluid hybrid design, also referred to as “spongy” design, is a growth methodology wherein the responsiveness of the e-mail is baked into the format itself with no need media queries.
It consists of three parts:
- Fluid: It is best to format content material utilizing percentages of max-widths or widths to create flexibility inside your HTML e mail templates. This makes your design “fluid.”
- Hybrid: The ensuing template is “hybrid” since you mix fluid percentages with mounted pixel widths (or max-widths) to regulate the scale of your components relying on the accessible house.
- Ghost Tables: Lastly, you mix these fluid and hybrid parts with Ghost Tables – desk markup hidden inside conditional feedback that can solely render on Microsoft Outlook on a Home windows machine.
Fluid hybrid design is on its approach to changing media query-based design because the go-to framework for responsive emails. This method creates emails that look nice on virtually any machine and in practically each e mail consumer.
How can I code a responsive HTML e mail with media queries?
Now that you just’ve discovered the fundamentals, let’s dive into coding responsive HTML e mail templates previewed above.
You’ll do that with the next steps:
- Arrange your media queries to detect your consumer.
- Optimize your format with media queries.
- Modify how columns show throughout totally different gadgets.
Earlier than you begin
Earlier than beginning, try our fast refresher on coding emails should you’re a bit rusty. For this tutorial, you’ll want a working information of HTML and CSS.
1. Arrange your media queries to detect your consumer.
First, we have to arrange your media queries to detect the consumer’s machine. You are able to do this within the <model> part of the header in your HTML doc. That is also referred to as embedding your stylesheet within the header. We’ve mentioned inline CSS elsewhere should you want a refresher, however inline CSS is the popular methodology for media queries. With inline CSS, you’ll be able to alter display dimension accordingly. Take a look at the next code:
<model sort = “textual content/css”>
@media solely display and (max-device-width: 480px) {
/* Right here you'll be able to embody guidelines for the Android and iPhone
native e mail purchasers.
Machine viewport dimensions are as follows
Iphone - 320px X 480px - portrait, 480px X 320px - panorama
Android - 350px X 480px - portrait, 480px X 350px - panorama
(These are common dimensions, the Android OS runs on a number of totally different gadgets)
*/
img {
width: 100%;
}
}
@media solely display and (min-device-width: 768px) and (max-device-width: 1024px){
/* Right here you'll be able to embody guidelines for the iPad native e mail consumer.
Machine viewport dimensions 768px x 1024px - portrait, 1024px x 768px - panorama
*/
img {
width: 100%;
}
}
</model>
Observe that we’ve added some feedback within the code snippet above. Make sure to take away the feedback earlier than testing or sending your e mail to keep away from getting blocked by spam filters.
2. Add “bells and whistles” to your media queries to optimize layouts.
It’s time so as to add “bells and whistles” to your media queries to optimize your format for cellular gadgets. In different phrases, you’ll be able to resize pictures and textual content. To be extra particular, let’s say you’re utilizing a picture at full dimension for desktop purchasers; simply resize that very same picture for cellular gadgets utilizing CSS inside your media question.
3. Modify how columns show throughout totally different gadgets.
Whereas that is under no circumstances needed, if you wish to get actually loopy, there’s yet another choice to optimize your HTML e mail format.
Let’s say you’ve got a three-column format and need it to look as two columns on an iPad and one column on an Android telephone or iPhone. To do that, you would present and conceal container divs relying on the machine.
Right here’s a working instance:
<model sort = “textual content/css”>
@media solely display and (max-device-width: 480px) {
physique[yahoo] #smallScreen {show:block !vital}
physique[yahoo] #desktop {show:none !vital}
}
@media solely display and (min-device-width: 768px) and (max-device-width: 1024px) {
physique[yahoo] #largeScreen {show:block !vital}
physique[yahoo] #desktop {show:none !vital}
}
</model>
</head>
<physique yahoo="repair">
<div id="smallScreen" model="show:none; colour:#FFF; background:#000;">
This can be a Small Cell Consumer
</div>
<div id="largeScreen" model="show:none; colour:#0F3; background:#FFC;">
This can be a Massive Cell Consumer
</div>
<div id="desktop" model="show:block; colour:#00F; background:#3F3;">
This can be a Normal Desktop Consumer
</div>
</physique>Keep in mind, there are a couple of downsides to this method. First, you may need to duplicate some content material. Secondly, despite the fact that you’re hiding two divs on this instance, the e-mail consumer must load all of your HTML and property. Contemplate reusing all your pictures in every occasion to regulate the general file dimension of your e mail.
How can I code a responsive HTML e mail with fluid hybrid design?
However wait, didn’t we already say that queries don’t work for some main e mail purchasers? That’s proper. In case your growth workforce is on board, you must think about using fluid hybrid strategies to develop responsive layouts. Take a look at our primer on fluid hybrid design. For a extra in-depth take a look at fluid hybrid design, take a look at business chief Nicole Merlin’s future-proof fluid hybrid tutorial.
Wrapping up
And that’s all there’s to coding a responsive HTML e mail format! You now know the fundamentals of making a responsive e mail format utilizing media queries and the place to go to search out an amazing fluid hybrid design tutorial.
As the ultimate step in any e mail growth course of, don’t overlook to check in case your design really works! Head over to Electronic mail on Acid to make the most of our Marketing campaign Precheck instrument to make sure your emails show as you plan for all of your customers each time.
This text was up to date on July 25, 2022. It first revealed in July of 2011.
Writer: The Electronic mail on Acid Crew
The Electronic mail on Acid content material workforce is made up of digital entrepreneurs, content material creators, and straight-up e mail geeks.
Join with us on LinkedIn, comply with us on Fb, and tweet at @EmailonAcid on Twitter for extra candy stuff and nice convos on e mail advertising.
Writer: The Electronic mail on Acid Crew
The Electronic mail on Acid content material workforce is made up of digital entrepreneurs, content material creators, and straight-up e mail geeks.
Join with us on LinkedIn, comply with us on Fb, and tweet at @EmailonAcid on Twitter for extra candy stuff and nice convos on e mail advertising.
