An HTML e mail that renders completely in each consumer is a developer’s frustratingly elusive white whale. Whereas many e mail shoppers have improved help for sure options through the years, there are nonetheless a whole lot of variations that make it inconceivable to create an e mail that appears precisely the identical throughout each machine and consumer.
However do you actually need your emails to look precisely the identical from consumer to consumer? It’s higher to have emails that look enticing and are readable, even when they range a bit, than to spend hours attempting to get your emails to look completely equivalent throughout each atmosphere. That is the place conditional code swoops in to save lots of the day.
Outlook and the necessity for conditional code
Microsoft Outlook (MSO) is maybe essentially the most infamous for its inconsistencies in rendering emails. Whereas Outlook for Mac and Outlook on-line each use Webkit to render emails, Outlook for Home windows makes use of Microsoft Phrase.
If a marketing campaign must be displayed accurately by Outlook, builders should work with the particular idiosyncrasies of the Phrase rendering engine. You’ll be able to code your emails with Vector Markup Language (VML), but it surely solely works in older variations of Outlook (2007-2013), in order that received’t actually remedy your rendering consistency issues.
What’s conditional code?
Conditional code makes use of “if” statements to find out whether or not directions inside your code ought to be executed. When a bit of code says, “If A is true, then execute B,” situation “A” have to be met to ensure that “B” to execute.
Whereas complicated conditional code is restricted to programming languages (e.g. JavaScript, PHP, Python, C#, et al), markup languages like HTML and CSS do have the power to deal with a restricted set of conditional statements. You need to use these conditional statements in your HTML emails to show platform-specific content material throughout completely different gadgets and shoppers. You’ll be able to goal completely different variations of Outlook with Microsoft Workplace (MSO) conditional feedback and completely different gadgets utilizing conditional CSS.
MSO conditional feedback
MSO conditional feedback use the identical <!-- and --> tags that permit builders so as to add ignored content material to their HTML paperwork. You would possibly use feedback in your e mail templates to elucidate why you added a sure piece of code or styled a component in a specific means. For instance:
<!-- Outlook kinds under. Don't strip MSO tagged feedback earlier than sending your e mail. -->Whereas HTML feedback are often ignored by browsers and e mail shoppers, MSO tags had been developed by Microsoft to be acknowledged and their content material is displayed solely by Outlook. Though in most conditions any content material inside a remark utilizing MSO tags will show solely in Outlook, there’s one e mail consumer that can render all feedback — T-online. So in case your emails are being despatched to t-online.de domains, you need to use the workaround from Rémi Parmentier’s GitHub to cover these feedback from that consumer..
MSO conditional feedback can embrace plain textual content, HTML, or CSS. This may be helpful if you want to implement distinctive kinds, content material, or conduct for various variations of Outlook.
Right here’s an instance of an MSO conditional remark that renders an HTML desk that can solely be displayed in Outlook:
<!--[if mso]>
<desk><tr><td>
<p>This data will show solely in Microsoft Outlook.</p>
</td></tr></desk>
<![endif]-->
On this instance, the desk and its contents will solely be acknowledged and utilized by Outlook. Different e mail shoppers will ignore the remark and the kinds is not going to be utilized.
It’s also possible to use MSO conditional feedback to incorporate CSS kinds within the <head> that focus on Outlook. For example, should you wished to make the physique model 16px Arial in a darkish grey, you’d use the next code:
<!--[if mso]>
<model>
.physique {
font-family: Arial, sans serif;
font-size: 16px;
coloration: #434345;
}
</model>
<![endif]-->You’ll be able to even use mso- prefixed CSS to model parts particular to Outlook and insert these kinds inside your MSO conditional feedback. The next instance creates the equal of a textual content shadow in Outlook.
<!--[if mso]>
<p model="mso-effects-shadow-color: #2e2ed2; mso-effects-shadow-alpha: 100%;
mso-effects-shadow-dpiradius: 0pt; mso-effects-shadow-dpidistance: 10pt;
mso-effects-shadow-angledirection: 2700000; mso-effects-shadow-pctsx: 100%;
mso-effects-shadow-pctsy: 100%;">Cool Blue Textual content Shadow Impact</p>
<![endif]-->With a slight change in syntax and a few further remark closing symbols, you need to use MSO conditional feedback to focus on all shoppers apart from Outlook:
<!--[if !mso]><!-->
<p>This can be a secret message for everybody who doesn’t use Outlook!</p>
<!--<![endif]-->“if !mso” is declaring, “if the consumer isn’t Microsoft Outlook”. You’ll additionally have to append your preliminary <!--[if !mso]> tag with <!--> and preface your closing <![endif]--> tag with <!-- to ensure that Outlook to acknowledge this code.
You’ll be able to even goal particular variations of Outlook by declaring the model quantity after “if mso”.
| Outlook Model | MSO Remark Code |
| All variations of Outlook | <!–[if mso]> code <![endif]–> |
| Outlook 2000 | <!–[if mso 9]> code <![endif]–> |
| Outlook 2002 | <!–[if mso 10]> code <![endif]–> |
| Outlook 2003 | <!–[if mso 11]> code <![endif]–> |
| Outlook 2007 | <!–[if mso 12]> code <![endif]–> |
| Outlook 2010 | <!–[if mso 14]> code <![endif]–> |
| Outlook 2013 | <!–[if mso 15]> code <![endif]–> |
| Outlook 2016 and 2019 | <!–[if mso 16]> code <![endif]–> |
If you want to goal a number of variations of Outlook, you need to use circumstances like “larger than,” “lower than,” “equal to,” and so forth. by utilizing the next code:
| Code | Definition | MSO Remark Code |
| gt | Better than | <!–[if gt mso 14]> Better than MSO 2010 <![endif]–> |
| lt | Lower than | <!–[if lt mso 12]> Lower than MSO 2007 <![endif]–> |
| gte | Better than or equal to | <!–[if gte mso 15]> Better than or equal to MSO 2013 <![endif]–> |
| lte | Lower than or equal to | <!–[if lte mso 11]> Lower than or equal to MSO 2003 <![endif]–> |
| | | or | <!–[if mso 9 | mso 10]> If MSO 2000 or 2002 <![endif]–> |
| ! | not | <!–[if !mso 9]><!–> If not MSO <!–<![endif]–> |
So if you wish to show a desk in Outlook 2013 and older a method, in any newer model of Outlook one other means, and in any consumer that isn’t MSO one more means, you might write one thing like this:
<!--[if lte mso 15]>
<desk width=”100%” model=”border: 1px stable #dedede;”><tr><td>
<p>This data will show solely in Microsoft Outlook 2013 and newer.</p>
</td></tr></desk>
<![endif]-->
<!--[if gt mso 15]>
<desk width=”80%” model=”border: 2px stable #000000;”><tr><td>
<p>This data will show solely in Microsoft Outlook 2010 and older.</p>
</td></tr></desk>
<![endif]-->
<!--[if !mso]><!-->
<desk width=”100%” model=”border: 3px stable #2e2ed2;”><tr><td>
<p>This data will show provided that the consumer isn't Microsoft Outlook.</p>
</td></tr></desk>
<!--<![endif]-->Conditional CSS
Along with utilizing CSS inside MSO conditional feedback, you need to use conditional CSS through media queries (@media) or assign fallback lessons inside your <model> tags in your e mail <head> to tailor the looks of an e mail to completely different shoppers and gadgets. Though Outlook would be the thorniest e mail consumer to cope with, others even have various ranges of help for CSS.
Moreover, cellular gadgets have all kinds of viewport sizes, which suggests emails can show very in another way from machine to machine. Since these different variables can’t be focused with MSO conditional feedback, e mail builders usually use conditional CSS to deal with inconsistencies and apply kinds which might be solely supported by sure shoppers.
Conditional CSS is a useful device for making certain that your emails look as supposed throughout a variety of e mail shoppers and gadgets. Beneath, we’ll go into just a little extra element about a number of the frequent use instances for conditional CSS in addition to MSO conditional statements and provides some particular code examples.
When to make use of conditional code in e mail growth
In case your emails are being despatched to a number of e mail shoppers and might be learn on all kinds of gadgets, you’ll wish to use no less than some quantity of conditional code to make sure that they show nicely.
However conditional code additionally permits builders to create extra partaking e mail content material for these shoppers that help it. Conditional code lets you benefit from HTML5 movies, animated GIFs, net fonts, and extra to create hanging and impactful e mail campaigns, whereas offering fallback content material and design for shoppers that lack help for these options.
Listed here are just a few different examples of the way you would possibly use conditional CSS in an e mail:
1. Making use of completely different kinds based mostly on e mail consumer or viewport measurement
An <h1> heading at 24px on a cellular e mail consumer would possibly look positive, however should you’re studying that e mail on a desktop laptop, your title could appear small in comparison with your physique copy. You’ll be able to set a bigger h1 measurement for desktop shows utilizing a conditional CSS media question. The @media rule lets you apply kinds based mostly on the scale of the viewport or different options of the subscriber’s machine.
Within the under instance, the h1 parts can have a font measurement of 24px by default. Nonetheless, if the width of the viewport is 1025px or extra (which is probably going the case on a laptop computer or desktop show), the font measurement of the h1 parts might be elevated to 48px.
h1 {
font-size: 24px;
}
@media display and (min-width: 1025px) {
h1 {
font-size: 48px;
}
}
Word that whenever you’re utilizing @media, you’ll want to incorporate further brace after your @media assertion and earlier than your h1 selector. This code ought to be included in your <model> part in your e mail <head>.
You need to use related guidelines to use completely different kinds to different parts in your e mail based mostly on viewport dimensions. Simply bear in mind that not all e mail shoppers help media queries, so you might want to make use of a number of @media guidelines or use them at the side of different conditional code to cowl a spread of shoppers.
2. Hiding particular e mail parts
Some e mail shoppers don’t help sure HTML and CSS parts. To stop these parts from being displayed awkwardly in sure environments, you may use conditional CSS to cover them.
There are just a few other ways you may cover particular e mail parts:
- Use inline CSS. You need to use inline CSS to cover a component by setting the show property to none. For instance:
<div model="show:none;">Hidden content material</div>
- Use the mso-hide property. You need to use the mso-hide property in a mode tag to cover a component in sure variations of Microsoft Outlook. For instance:
<model> .mso-hide {show:none;} </model> <div class="mso-hide">Hidden content material</div>
- Use show:none in a media question: You need to use a media question to cover a component on sure gadgets by setting the show property to none.
@media solely display and (max-width: 600px) {
.hide-on-mobile {
show: none;
}
}
- Use an MSO conditional remark. You need to use an MSO conditional remark to cover a component based mostly on a sure situation. For instance, you would possibly wish to cover a component if the model of Outlook is older than 2010.
<!--[if gt mso 14]>
<img src=”https://yourimagelocation.com/picture.jpg”>
<![endif]-->
Within the above code, the picture will solely show in Outlook variations later than 2010 and might be hidden from all different e mail shoppers.
- Embody a HTML5 hidden attribute. Though help for the HTML5 “hidden” attribute is restricted. Within the e mail shoppers that do help it, nevertheless, your component might be hidden for display readers, is not going to be selectable, and can keep hidden even when CSS doesn’t load. Right here’s an instance of hiding a desk row inside a desk:
<desk><tr hidden><td>
<p>hidden desk cell content material</p>
</tr></td>
<tr><td>
<p>seen desk cell content material</p>
</tr></td>
</desk>
- Set opacity to zero. You’ll be able to cover parts by making them completely clear utilizing the “opacity” property in HTML. Opacity ranges between 1 (opaque) and 0 (clear). In case you use opacity to cover a component, the component nonetheless exists and takes up the identical quantity of house as if it had been being displayed. It can be chosen by the person and is readable by a display reader. That is helpful if you’d like that additional spacing and don’t essentially want that component to be completely unavailable, however it will possibly look clunky if the article could be very massive and complicated to these utilizing display readers.
<td model="opacity: 0;">
<img src="https://youranimatedgif.com/babygoats.gif" width="600" peak="400"
model="show: block;">
</td>
- Set visibility to hidden. The
visibility:hidden;declaration works precisely like opacity, besides that it has the distinctive function of having the ability to be overridden in youngster parts by setting the kid component tovisibility:seen;.
<td model=”visibility:hidden;”>
<img src="https://youranimatedgif.com/babygoats.gif" width="600" peak="400"
model="show: block;">
</td>
- Use conditional CSS to cover parts based mostly on the recipient’s e mail consumer. There are a number of methods you need to use CSS lessons to cover parts based mostly on the e-mail consumer getting used. Jay Oram over at ActionRocket has some methods value testing.
It’s vital to notice that these are only a handful of strategies you need to use to cover parts in your emails. Additionally, not all e mail shoppers will help all of those strategies, so you might want to make use of a mixture to realize the specified end result.
3. Web page break issues
The Phrase rendering engine in Outlook 2010 and prior variations wreaks havoc on e mail design as a consequence of its doc size restrict of round 1800 pixels. When your e mail turns into longer than this restrict, Outlook will unhelpfully add a web page break.
This may completely wreck your e mail design and make it troublesome to learn, particularly when the break occurs in the course of a picture tag or another important piece of HTML. MSO conditional statements mean you can create layouts that can work particularly with these variations of Outlook.
For instance, you might create a desk with a compelled web page break just for Outlook 2010 and older, whereas displaying a normally-styled desk for newer variations of Outlook that don’t have this difficulty.
<!--[if lte mso 14]>
<desk width=”100%” model=”border: 1px stable #dedede;”><tr><td>
<p>First row of desk content material.</p>
</td></tr>
<tr model="page-break-before: at all times"><td>
<p>This code will power a web page break at desk row.</p>
</td></tr>
<tr><td>
<p>Final row of desk content material.</p>
</td></tr></desk>
<![endif]-->
<!--[if gt mso 14]>
<desk width=”100%” model=”border: 1px stable #dedede;”><tr><td>
<p>First row of desk content material.</p>
</td></tr>
<tr><td>
<p>That is only a regular row of content material now.</p>
</td></tr>
<tr><td>
<p>Final row of desk content material.</p>
</td></tr></desk>
<![endif]-->
4. Ghost tables
Creating “ghost tables” in emails is helpful notably if you find yourself utilizing fluid design in emails and also you don’t need Outlook to interrupt issues simply because it doesn’t acknowledge the min-width, max-width, and inline-block properties. There are a few other ways to create a ghost desk. One choice is to construct a fixed-width desk wrapped in MSO conditional feedback and insert the fluid desk kinds in div tags that Outlook will ignore.
<!--[if mso]>
<desk position="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="340">
<![endif]-->
<div model="show:inline-block; width:100%; min-width:200px; max-width:340px;">
<p>Right here’s the desk cell content material. Since we’ve declared a hard and fast width for the desk cell within the MSO conditional assertion, we’ll have the ability to use a static width for Outlook whereas preserving fluid desk design in different e mail shoppers that respect div kinds.
</div>
<!--[if mso]>
</td>
</tr>
</desk>
<![endif]-->
An alternative choice is to make use of <!--[if true]> tags to create your ghost tables.
<!--[if true]>
<desk position="presentation" width="100%" model="all:unset;opacity:0;">
<tr>
<![endif]-->
<!--[if false]></td></tr></desk><![endif]-->
<div model="show:desk;width:100%;">
<!--[if true]>
<td width="100%">
<![endif]-->
<!--[if !true]><!-->
<div model="show:table-cell;width:100%">
<!--<![endif]-->
Column content material
<!--[if !true]><!-->
</div>
<!--<![endif]-->
<!--[if true]>
</td>
<![endif]-->
</div>
<!--[if true]>
</tr>
</desk>
<![endif]-->It’s also possible to use ghost tables to conditionally show background pictures in emails whereas offering fallback code for Outlook.
5. Bulletproof buttons and backgrounds
Bulletproof design parts in e mail might have slight design variations from consumer to consumer, however they maintain their performance throughout all platforms and gadgets. A button could also be coded to show with rounded corners and seem completely in Apple Mail, however seem with no border radius in Outlook. The looks would possibly differ barely, but it surely doesn’t have an effect on the performance.
Beneath is an instance of a bulletproof button with a picture background in addition to a fallback coloration for shoppers that don’t help background pictures. It additionally consists of VML markup for Outlook 2003 and earlier (which does help background pictures, not like later variations of Outlook).
<div><!--[if mso 11]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:workplace:phrase" href="https://www.emailonacid.com/weblog/article/email-development/how-to-make-your-emails-bulletproof/" model="peak:40px;v-text-anchor:center;width:200px;" arcsize="25%" stroke="f" fill="t">
<v:fill sort="tile" src="https://imgur.com/uQg9nTA" coloration="#fa0031" />
<w:anchorlock/>
<heart model="coloration:#ffffff;font-family:sans-serif;font-size:13px;font-weight:daring;">Instance Button</heart>
</v:roundrect>
<![endif]-->
<!--[if gte mso 12]>
<a href="https://www.emailonacid.com/weblog/article/email-development/how-to-make-your-emails-bulletproof/"
model="background-color:#fa0031;coloration:#ffffff;font-family:sans-serif;font-size:13px;font-weight:daring;peak:40px;text-align:heart;text-decoration:none;width:200px;">Instance Button</a>
<![endif]-->
<a href="https://www.emailonacid.com/weblog/article/email-development/how-to-make-your-emails-bulletproof/"
model="background-color:#fa0031;background-image:url(https://imgur.com/uQg9nTA);border-radius:10px;coloration:#ffffff;show:inline-block;font-family:sans-serif;font-size:13px;font-weight:daring;line-height:40px;text-align:heart;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;">Instance Button</a></div>
Don’t want to make use of VML in your code? Mark Robbins over at Good Electronic mail Code has a great instance of code a bulletproof button for e mail.
6. Changing GIFs with static pictures
Help for animated GIFs in e mail is sort of common at this level… virtually. In fact, our buddy Outlook for Home windows nonetheless doesn’t help GIFs. Outlook doesn’t actually have a commonplace therapy of GIFs throughout variations. Outlook 2007-2013 will merely show the primary body of the GIF, which might be positive should you wished to design all of your GIFs in order that the primary body communicated the message you wished. Sadly, Outlook 2016-2019 will play the animated GIF as soon as after which show a play button over the picture.
To maintain our Outlook subscribers from feeling design-neglected and to convey our visible message extra successfully, we are able to use conditional feedback to show a particular static picture.
First you’ll wish to add your picture class and any kinds you wish to the <model> part of your <head>. Then, you’ll declare your picture class and supply between two MSO conditional tags stating that if the e-mail consumer is NOT Outlook, to show the child goats GIF.
<!--[if !mso]><!-->
<img class="notoutlook-img" src="https://www.emailonacid.com/weblog/article/email-development/conditional-css-code/babygoats.gif">
<!--<![endif]-->
Then, you’ll wish to add directions on what to show if the consumer is Outlook.
<!--[if mso]>
<img src="babygoats-static.jpg">
<![endif]-->
With the above code, most of your recipients will have the ability to take pleasure in some stampeding child goats in animated GIF format, whereas Outlook customers can expertise the nonetheless very cute static picture taken halfway via the GIF.
7. Interactive e mail fallbacks
In case you’re utilizing interactive parts in your emails, you’ll wish to present fallbacks for shoppers that don’t help these options. Examples of interactive parts embrace hover animations, side-scrolling pictures, and picture carousels.
For hover animations, which have spotty e mail consumer help, you may merely make it possible for your first picture is the one that you just wish to be displayed as a static picture. Electronic mail shoppers that don’t help the hover pseudo-class will merely ignore it. However for side-scrolling pictures, add a fallback class in your <model> part within the e mail <head> and declare the fallback in your desk. See the total code for aspect scrolling pictures and fallbacks.
If you wish to create a picture carousel in your emails, it’d look wonderful in Apple Mail, however Gmail, Yahoo! Mail, and Outlook will all render a single static picture. Relying on the way you code your carousel, you would possibly simply get an empty and weirdly formatted field. Offering your individual static picture fallback will assist be sure that your e mail shows nicely in shoppers that don’t help picture carousels.
Need to get picture carousels and fallback content material proper? Try this beneficial tutorial for creating animated picture carousels for e mail.
8. Utilizing conditional code in your e mail templates
Utilizing MSO conditional feedback and conditional CSS in your e mail templates is an efficient follow to get into. It is going to prevent time and design complications when drafting e mail campaigns and be sure that you don’t overlook to incorporate show choices for every of the foremost e mail shoppers and machine sorts.
You’ll additionally have the ability to relaxation straightforward figuring out that your emails can have a constant look and dependable conduct. However regardless of how stable you assume your e mail templates are, don’t overlook to check their show earlier than you hit ship!
For this reason you take a look at e mail campaigns
Electronic mail shoppers can have extensively various help for HTML and CSS, and there are various methods that you need to use to attempt to obtain constant rendering of your emails throughout completely different shoppers. The complexity of addressing these inconsistencies is the primary cause e mail groups want to check and preview their campaigns.
Use Electronic mail on Acid by Sinch to check your emails throughout quite a lot of e mail shoppers to make sure your conditional CSS and different code works as anticipated. By testing your emails, you’ll have the ability to catch and repair any show points earlier than your emails land in these precious inboxes.
Creator: The Electronic mail on Acid Workforce
The Electronic mail on Acid content material group is made up of digital entrepreneurs, content material creators, and straight-up e 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 e mail advertising and marketing.
Creator: The Electronic mail on Acid Workforce
The Electronic mail on Acid content material group is made up of digital entrepreneurs, content material creators, and straight-up e 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 e mail advertising and marketing.
