You’ve created an ideal HTML electronic mail structure. At the least, it seems good on your pc. However what in case your electronic mail subscribers open your electronic mail advertising and marketing marketing campaign or electronic mail publication on a cellular machine?
Likelihood is, if you happen to haven’t coded your electronic mail structure in a mobile-responsive approach, your message can be garbled in your subscriber’s display. In 2019, cellular opens accounted for 42% of all electronic mail opens. Take into consideration that: except you utilize responsive designs, at the least 42% of your readers received’t be capable to see your message appropriately.
Let’s dive into the how-to of responsive electronic mail improvement on this article. We’ll go over the easiest way 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.
If you happen to’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, if you happen to simply need to dip your toes into code, take a look at the low-code answer to electronic mail improvement: the MJML markup language.
What are responsive HTML emails (and why do I want them)?
A responsive HTML electronic mail is precisely because it sounds – it responds to variations in your reader’s display capabilities and display dimension whatever the electronic mail shopper they use to view your electronic mail. Keep in mind: “Cellular-responsive” isn’t the identical as “mobile-friendly.” In reality, 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 electronic mail template responsive?
Making an HTML electronic mail responsive is just a little totally different from responsive internet design.
The extent of assist for HTML and CSS requirements varies broadly 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’ll be able to’t use JavaScript in electronic mail as a result of it poses a safety danger).
Some electronic mail apps don’t assist CSS media queries, so we should think twice 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’ll be able to implement a hack the place you embrace 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 every single place is hard.
The excellent news is which you could design and construct a easy electronic mail that may look wonderful in each mail app, together with people who don’t assist media queries, through the use of the fluid hybrid electronic mail coding technique.
Why is the fluid hybrid technique an effective way to create responsive emails?
Fluid hybrid design, often known as “spongy” design, is a improvement technique through which the responsiveness of the e-mail is baked into the structure itself while not having media queries.
It consists of three parts:
- Fluid: You need 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 fastened pixel widths (or max-widths) to regulate the scale of your parts 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 may solely render on Microsoft Outlook on a Home windows machine.
Fluid hybrid design is on its technique to changing media query-based design because the go-to framework for responsive emails. This method creates emails that look nice on nearly any machine and in practically each electronic mail shopper.
How can I code a responsive HTML electronic mail with media queries?
Now that you just’ve realized 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 person.
- Optimize your structure with media queries.
- Regulate how columns show throughout totally different gadgets.
Earlier than you begin
Earlier than beginning, take a look at our fast refresher on coding emails if you happen to’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 person.
First, we have to arrange your media queries to detect the person’s machine. You are able to do this within the <fashion> part of the header in your HTML doc. That is often known as embedding your stylesheet within the header. We’ve mentioned inline CSS elsewhere if you happen to want a refresher, however inline CSS is the popular technique for media queries. With inline CSS, you’ll be able to modify display dimension accordingly. Try the next code:
<fashion sort = “textual content/css”>
@media solely display and (max-device-width: 480px) {
/* Right here you'll be able to embrace guidelines for the Android and iPhone
native electronic 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 embrace guidelines for the iPad native electronic mail shopper.
Machine viewport dimensions 768px x 1024px - portrait, 1024px x 768px - panorama
*/
img {
width: 100%;
}
}
</fashion>
Observe that we’ve added some feedback within the code snippet above. Be sure you 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 structure 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. Regulate how columns show throughout totally different gadgets.
Whereas that is in no way needed, if you wish to get actually loopy, there’s another choice to optimize your HTML electronic mail structure.
Let’s say you might have a three-column structure and need it to seem as two columns on an iPad and one column on an Android cellphone or iPhone. To do that, you would present and conceal container divs relying on the machine.
Right here’s a working instance:
<fashion sort = “textual content/css”>
@media solely display and (max-device-width: 480px) {
physique[yahoo] #smallScreen {show:block !essential}
physique[yahoo] #desktop {show:none !essential}
}
@media solely display and (min-device-width: 768px) and (max-device-width: 1024px) {
physique[yahoo] #largeScreen {show:block !essential}
physique[yahoo] #desktop {show:none !essential}
}
</fashion>
</head>
<physique yahoo="repair">
<div id="smallScreen" fashion="show:none; shade:#FFF; background:#000;">
It is a Small Cellular Consumer
</div>
<div id="largeScreen" fashion="show:none; shade:#0F3; background:#FFC;">
It is a Giant Cellular Consumer
</div>
<div id="desktop" fashion="show:block; shade:#00F; background:#3F3;">
It is a Normal Desktop Consumer
</div>
</physique>Keep in mind, there are a number of 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 belongings. Contemplate reusing your whole pictures in every occasion to regulate 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 purchasers? That’s proper. In case your improvement workforce is on board, it’s 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 trade chief Nicole Merlin’s future-proof fluid hybrid tutorial.
Wrapping up
And that’s all there’s to coding a responsive HTML electronic mail structure! You now know the fundamentals of making a responsive electronic mail structure utilizing media queries and the place to go to search out an ideal fluid hybrid design tutorial.
As the ultimate step in any electronic mail improvement course of, don’t overlook to check in case your design really works! Head over to E-mail on Acid to make the most of our Marketing campaign Precheck software to make sure your emails show as you propose 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 E-mail on Acid Workforce
The E-mail on Acid content material workforce is made up of digital entrepreneurs, content material creators, and straight-up electronic mail geeks.
Join with us on LinkedIn, observe us on Fb, and tweet at @EmailonAcid on Twitter for extra candy stuff and nice convos on electronic mail advertising and marketing.
Writer: The E-mail on Acid Workforce
The E-mail on Acid content material workforce is made up of digital entrepreneurs, content material creators, and straight-up electronic mail geeks.
Join with us on LinkedIn, observe us on Fb, and tweet at @EmailonAcid on Twitter for extra candy stuff and nice convos on electronic mail advertising and marketing.
