You’ve created an important HTML electronic mail format. At the very least, it seems good on your laptop. However what in case your electronic mail subscribers open your electronic mail advertising and marketing marketing campaign or electronic mail e-newsletter on a cellular machine?
Likelihood is, in the event you haven’t coded your electronic mail format in a mobile-responsive manner, your message will likely be garbled in your subscriber’s display screen. In 2019, cellular opens accounted for 42% of all electronic mail opens. Take into consideration that: except you employ responsive designs, at the very least 42% of your readers received’t be capable of see your message appropriately.
Let’s dive into the how-to of responsive electronic mail improvement on this article. We’ll go over one of the simplest ways to make your HTML electronic mail template responsive, introduce the fluid hybrid technique, and supply a fast tutorial on responsive electronic mail design with media queries.
Should you’re not able to dive into the code, take a look at our free responsive HTML templates or discover our complete record of free templates on the internet. Alternatively, in the event you simply wish to dip your toes into code, take a look at the low-code resolution to electronic mail improvement: the MJML markup language.
What are responsive HTML emails (and why do I would like them)?
A responsive HTML electronic mail is precisely because it sounds – it responds to variations in your reader’s display screen capabilities and display screen dimension whatever the electronic mail shopper they use to view your electronic mail. Bear in mind: “Cellular-responsive” isn’t the identical as “mobile-friendly.” In actual fact, responsiveness goes past “mobile-friendly” to carry an optimized, accessible expertise to your customers, no matter how and the place they view your message.
What’s one of the simplest ways to make an electronic mail template responsive?
Making an HTML electronic mail responsive is a bit completely different from responsive net design.
The extent of assist for HTML and CSS requirements varies extensively throughout electronic mail companies and apps. So whereas we are able to depend on issues like media queries, flexbox, grid, and JavaScript on the internet, they aren’t all the time supported in HTML electronic mail (plus, you may’t use JavaScript in electronic mail as a result of it poses a safety threat).
Some electronic mail apps don’t assist CSS media queries, so we should consider carefully about how we construct responsive electronic 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 shopper that throws out your media queries except you may implement a hack the place you embody your complete 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 hard.
The excellent news is you could design and construct a easy electronic 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 electronic mail coding technique.
Why is the fluid hybrid technique a good way to create responsive emails?
Fluid hybrid design, also called “spongy” design, is a improvement technique through which the responsiveness of the e-mail is baked into the format itself with no need media queries.
It consists of three elements:
- Fluid: It’s best to format content material utilizing percentages of max-widths or widths to create flexibility inside your HTML electronic 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 manage the scale of your parts relying on the accessible area.
- Ghost Tables: Lastly, you mix these fluid and hybrid elements 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 method 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 almost each electronic mail shopper.
How can I code a responsive HTML electronic mail with media queries?
Now that you simply’ve discovered the fundamentals, let’s dive into coding responsive HTML electronic 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.
- Alter how columns show throughout completely different units.
Earlier than you begin
Earlier than beginning, take a look at our fast refresher on coding emails in the event you’re a bit rusty. For this tutorial, you’ll want a working data 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 called embedding your stylesheet within the header. We’ve mentioned inline CSS elsewhere in the event you want a refresher, however inline CSS is the popular technique for media queries. With inline CSS, you may regulate display screen dimension accordingly. Try the next code:
<model kind = “textual content/css”>
@media solely display screen and (max-device-width: 480px) {
/* Right here you may embody guidelines for the Android and iPhone
native electronic mail shoppers.
System 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 completely different units)
*/
img {
width: 100%;
}
}
@media solely display screen and (min-device-width: 768px) and (max-device-width: 1024px){
/* Right here you may embody guidelines for the iPad native electronic mail shopper.
System 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. You’ll want to take away the feedback earlier than testing or sending your electronic 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 units. In different phrases, you may resize photos and textual content. To be extra particular, let’s say you’re utilizing a picture at full dimension for desktop shoppers; simply resize that very same picture for cellular units utilizing CSS inside your media question.
3. Alter how columns show throughout completely different units.
Whereas that is in no way essential, if you wish to get actually loopy, there’s another choice to optimize your HTML electronic mail format.
Let’s say you’ve got a three-column format and wish it to seem as two columns on an iPad and one column on an Android telephone or iPhone. To do that, you might present and conceal container divs relying on the machine.
Right here’s a working instance:
<model kind = “textual content/css”>
@media solely display screen and (max-device-width: 480px) {
physique[yahoo] #smallScreen {show:block !vital}
physique[yahoo] #desktop {show:none !vital}
}
@media solely display screen 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;">
It is a Small Cellular Consumer
</div>
<div id="largeScreen" model="show:none; colour:#0F3; background:#FFC;">
It is a Giant Cellular Consumer
</div>
<div id="desktop" model="show:block; colour:#00F; background:#3F3;">
It is a Customary Desktop Consumer
</div>
</physique>Bear in mind, there are just a few downsides to this strategy. First, you might need to duplicate some content material. Secondly, though you’re hiding two divs on this instance, the e-mail shopper should load all of your HTML and property. Contemplate reusing your entire photos in every occasion to manage the general file dimension of your electronic mail.
How can I code a responsive HTML electronic mail with fluid hybrid design?
However wait, didn’t we already say that queries don’t work for some main electronic mail shoppers? That’s proper. In case your improvement group is on board, it is best to think about using fluid hybrid strategies to develop responsive layouts. Try our primer on fluid hybrid design. For a extra in-depth have a look at fluid hybrid design, have a look at business chief Nicole Merlin’s future-proof fluid hybrid tutorial.
Wrapping up
And that’s all there may be to coding a responsive HTML electronic mail format! You now know the fundamentals of making a responsive electronic mail format utilizing media queries and the place to go to search out an important fluid hybrid design tutorial.
As the ultimate step in any electronic mail improvement course of, don’t neglect to check in case your design really works! Head over to E-mail on Acid to reap the benefits of our Marketing campaign Precheck device 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.
Creator: The E-mail on Acid Staff
The E-mail on Acid content material group is made up of digital entrepreneurs, content material creators, and straight-up electronic 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 electronic mail advertising and marketing.
Creator: The E-mail on Acid Staff
The E-mail on Acid content material group is made up of digital entrepreneurs, content material creators, and straight-up electronic 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 electronic mail advertising and marketing.
