An HTML e-mail that renders completely in each shopper is a developer’s frustratingly elusive white whale. Whereas many e-mail shoppers have improved assist for sure options over time, there are nonetheless loads of variations that make it unattainable to create an e-mail that appears precisely the identical throughout each system and shopper.
However do you really want your emails to look precisely the identical from shopper to shopper? It’s higher to have emails that look enticing and are readable, even when they fluctuate a bit, than to spend hours attempting to get your emails to look completely similar 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 precise idiosyncrasies of the Phrase rendering engine. You may code your emails with Vector Markup Language (VML), however it solely works in older variations of Outlook (2007-2013), in order that gained’t actually resolve 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 must be executed. When a chunk of code says, “If A is true, then execute B,” situation “A” have to be met to ensure that “B” to execute.
Whereas advanced conditional code is proscribed 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 may 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 enable builders so as to add ignored content material to their HTML paperwork. You may use feedback in your e-mail templates to elucidate why you added a sure piece of code or styled a component in a selected approach. For instance:
<!-- Outlook types beneath. Don't strip MSO tagged feedback earlier than sending your e-mail. -->Whereas HTML feedback are normally 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 shopper that may render all feedback — T-online. So in case your emails are being despatched to t-online.de domains, you should utilize the workaround from Rémi Parmentier’s GitHub to cover these feedback from that shopper..
MSO conditional feedback can embody plain textual content, HTML, or CSS. This may be helpful if that you must implement distinctive types, content material, or habits for various variations of Outlook.
Right here’s an instance of an MSO conditional remark that renders an HTML desk that may solely be displayed in Outlook:
<!--[if mso]>
<desk><tr><td>
<p>This info 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 types is not going to be utilized.
You may as well use MSO conditional feedback to incorporate CSS types within the <head> that focus on Outlook. For example, for those who needed to make the physique type 16px Arial in a darkish grey, you’ll use the next code:
<!--[if mso]>
<type>
.physique {
font-family: Arial, sans serif;
font-size: 16px;
shade: #434345;
}
</type>
<![endif]-->You may even use mso- prefixed CSS to type parts particular to Outlook and insert these types inside your MSO conditional feedback. The next instance creates the equal of a textual content shadow in Outlook.
<!--[if mso]>
<p type="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 extra remark closing symbols, you should utilize MSO conditional feedback to focus on all shoppers moreover Outlook:
<!--[if !mso]><!-->
<p>It is a secret message for everybody who doesn’t use Outlook!</p>
<!--<![endif]-->“if !mso” is declaring, “if the shopper shouldn’t be 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 may 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 that you must goal a number of variations of Outlook, you should utilize circumstances like “better than,” “lower than,” “equal to,” and so on. by utilizing the next code:
| Code | Definition | MSO Remark Code |
| gt | Larger than | <!–[if gt mso 14]> Larger than MSO 2010 <![endif]–> |
| lt | Lower than | <!–[if lt mso 12]> Lower than MSO 2007 <![endif]–> |
| gte | Larger than or equal to | <!–[if gte mso 15]> Larger 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 approach, and in any shopper that isn’t MSO one more approach, you might write one thing like this:
<!--[if lte mso 15]>
<desk width=”100%” type=”border: 1px stable #dedede;”><tr><td>
<p>This info will show solely in Microsoft Outlook 2013 and newer.</p>
</td></tr></desk>
<![endif]-->
<!--[if gt mso 15]>
<desk width=”80%” type=”border: 2px stable #000000;”><tr><td>
<p>This info will show solely in Microsoft Outlook 2010 and older.</p>
</td></tr></desk>
<![endif]-->
<!--[if !mso]><!-->
<desk width=”100%” type=”border: 3px stable #2e2ed2;”><tr><td>
<p>This info will show provided that the shopper shouldn't be Microsoft Outlook.</p>
</td></tr></desk>
<!--<![endif]-->Conditional CSS
Along with utilizing CSS inside MSO conditional feedback, you should utilize conditional CSS by way of media queries (@media) or assign fallback lessons inside your <type> tags in your e-mail <head> to tailor the looks of an e-mail to completely different shoppers and gadgets. Regardless that Outlook stands out as the thorniest e-mail shopper to take care of, others even have various ranges of assist for CSS.
Moreover, cell gadgets have all kinds of viewport sizes, which implies emails can show very in a different way from system to system. 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 types which are solely supported by sure shoppers.
Conditional CSS is a useful software for guaranteeing that your emails look as meant throughout a variety of e-mail shoppers and gadgets. Beneath, we’ll go into a bit extra element about a few of the widespread 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 will likely be learn on all kinds of gadgets, you’ll wish to use a minimum of some quantity of conditional code to make sure that they show effectively.
However conditional code additionally permits builders to create extra participating e-mail content material for these shoppers that assist it. Conditional code permits you to make the most of 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 assist for these options.
Listed below are a couple of different examples of the way you may use conditional CSS in an e-mail:
1. Making use of completely different types primarily based on e-mail shopper or viewport measurement
An <h1> heading at 24px on a cell e-mail shopper may look high quality, however for those who’re studying that e-mail on a desktop laptop, your title could appear small in comparison with your physique copy. You may set a bigger h1 measurement for desktop shows utilizing a conditional CSS media question. The @media rule permits you to apply types primarily based on the scale of the viewport or different options of the subscriber’s system.
Within the beneath instance, the h1 parts could 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 will likely be elevated to 48px.
h1 {
font-size: 24px;
}
@media display screen and (min-width: 1025px) {
h1 {
font-size: 48px;
}
}
Be aware that while you’re utilizing @media, you’ll want to incorporate extra brace after your @media assertion and earlier than your h1 selector. This code must be included in your <type> part in your e-mail <head>.
You need to use related guidelines to use completely different types to different parts in your e-mail primarily based on viewport dimensions. Simply bear in mind that not all e-mail shoppers assist media queries, so it’s possible you’ll want to make use of a number of @media guidelines or use them together with different conditional code to cowl a variety of shoppers.
2. Hiding particular e-mail parts
Some e-mail shoppers don’t assist sure HTML and CSS parts. To forestall these parts from being displayed awkwardly in sure environments, you may use conditional CSS to cover them.
There are a couple of alternative ways you may conceal 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 type="show:none;">Hidden content material</div>
- Use the mso-hide property. You need to use the mso-hide property in a method tag to cover a component in sure variations of Microsoft Outlook. For instance:
<type> .mso-hide {show:none;} </type> <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 screen 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 primarily based on a sure situation. For instance, you may wish to conceal 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 will likely be hidden from all different e-mail shoppers.
- Embody a HTML5 hidden attribute. Though assist for the HTML5 “hidden” attribute is proscribed. Within the e-mail shoppers that do assist it, nonetheless, your aspect will likely be hidden for display screen 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 may conceal parts by making them completely clear utilizing the “opacity” property in HTML. Opacity ranges between 1 (opaque) and 0 (clear). In the event you use opacity to cover a component, the aspect nonetheless exists and takes up the identical quantity of area as if it had been being displayed. It will also be chosen by the person and is readable by a display screen reader. That is helpful if you need that further spacing and don’t essentially want that aspect to be completely unavailable, however it may possibly look clunky if the thing may be very giant and complicated to these utilizing display screen readers.
<td type="opacity: 0;">
<img src="https://youranimatedgif.com/babygoats.gif" width="600" top="400"
type="show: block;">
</td>
- Set visibility to hidden. The
visibility:hidden;declaration works precisely like opacity, besides that it has the distinctive function of with the ability to be overridden in baby parts by setting the kid aspect tovisibility:seen;.
<td type=”visibility:hidden;”>
<img src="https://youranimatedgif.com/babygoats.gif" width="600" top="400"
type="show: block;">
</td>
- Use conditional CSS to cover parts primarily based on the recipient’s e-mail shopper. There are a number of methods you should utilize CSS lessons to cover parts primarily based on the e-mail shopper getting used. Jay Oram over at ActionRocket has some methods price trying out.
It’s essential to notice that these are only a handful of strategies you should utilize to cover parts in your emails. Additionally, not all e-mail shoppers will assist all of those strategies, so it’s possible you’ll want to make use of a mix to attain 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 resulting from 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 will completely wreck your e-mail design and make it tough to learn, particularly when the break occurs in the course of a picture tag or another important piece of HTML. MSO conditional statements help you create layouts that may work particularly with these variations of Outlook.
For instance, you might create a desk with a pressured 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 subject.
<!--[if lte mso 14]>
<desk width=”100%” type=”border: 1px stable #dedede;”><tr><td>
<p>First row of desk content material.</p>
</td></tr>
<tr type="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%” type=”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 beneficial significantly when 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 alternative ways to create a ghost desk. One possibility is to construct a fixed-width desk wrapped in MSO conditional feedback and insert the fluid desk types in div tags that Outlook will ignore.
<!--[if mso]>
<desk function="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="340">
<![endif]-->
<div type="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 set 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 types.
</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 function="presentation" width="100%" type="all:unset;opacity:0;">
<tr>
<![endif]-->
<!--[if false]></td></tr></desk><![endif]-->
<div type="show:desk;width:100%;">
<!--[if true]>
<td width="100%">
<![endif]-->
<!--[if !true]><!-->
<div type="show:table-cell;width:100%">
<!--<![endif]-->
Column content material
<!--[if !true]><!-->
</div>
<!--<![endif]-->
<!--[if true]>
</td>
<![endif]-->
</div>
<!--[if true]>
</tr>
</desk>
<![endif]-->You may as well 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 shopper to shopper, however they keep 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 may differ barely, however it 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 shade for shoppers that don’t assist background pictures. It additionally contains VML markup for Outlook 2003 and earlier (which does assist 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/" type="top:40px;v-text-anchor:center;width:200px;" arcsize="25%" stroke="f" fill="t">
<v:fill kind="tile" src="https://imgur.com/uQg9nTA" shade="#fa0031" />
<w:anchorlock/>
<middle type="shade:#ffffff;font-family:sans-serif;font-size:13px;font-weight:daring;">Instance Button</middle>
</v:roundrect>
<![endif]-->
<!--[if gte mso 12]>
<a href="https://www.emailonacid.com/weblog/article/email-development/how-to-make-your-emails-bulletproof/"
type="background-color:#fa0031;shade:#ffffff;font-family:sans-serif;font-size:13px;font-weight:daring;top:40px;text-align:middle;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/"
type="background-color:#fa0031;background-image:url(https://imgur.com/uQg9nTA);border-radius:10px;shade:#ffffff;show:inline-block;font-family:sans-serif;font-size:13px;font-weight:daring;line-height:40px;text-align:middle;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 the way to code a bulletproof button for e-mail.
6. Changing GIFs with static pictures
Assist for animated GIFs in e-mail is sort of common at this level… virtually. After all, our buddy Outlook for Home windows nonetheless doesn’t assist GIFs. Outlook doesn’t also have a customary remedy of GIFs throughout variations. Outlook 2007-2013 will merely show the primary body of the GIF, which might be high quality for those who needed to design all of your GIFs in order that the primary body communicated the message you needed. 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 will use conditional feedback to show a selected static picture.
First you’ll wish to add your picture class and any types you wish to the <type> part of your <head>. Then, you’ll declare your picture class and supply between two MSO conditional tags stating that if the e-mail shopper 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 shopper is Outlook.
<!--[if mso]>
<img src="babygoats-static.jpg">
<![endif]-->
With the above code, most of your recipients will have the ability to get pleasure from some stampeding child goats in animated GIF format, whereas Outlook customers can expertise the nonetheless very cute static picture taken halfway by way of the GIF.
7. Interactive e-mail fallbacks
In the event you’re utilizing interactive parts in your emails, you’ll wish to present fallbacks for shoppers that don’t assist these options. Examples of interactive parts embody hover animations, side-scrolling pictures, and picture carousels.
For hover animations, which have spotty e-mail shopper assist, 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 assist the hover pseudo-class will merely ignore it. However for side-scrolling pictures, add a fallback class in your <type> 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 on your emails, it’d look superb 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 may simply get an empty and weirdly formatted field. Offering your personal static picture fallback will assist make sure that your e-mail shows effectively in shoppers that don’t assist 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’ll prevent time and design complications when drafting e-mail campaigns and make sure that you don’t overlook to incorporate show choices for every of the foremost e-mail shoppers and system varieties.
You’ll additionally have the ability to relaxation simple understanding that your emails could have a constant look and dependable habits. However regardless of how stable you assume your e-mail templates are, don’t overlook to check their show earlier than you hit ship!
That is why you check e-mail campaigns
Electronic mail shoppers can have broadly various assist for HTML and CSS, and there are lots of methods that you should utilize to attempt to obtain constant rendering of your emails throughout completely different shoppers. The complexity of addressing these inconsistencies is the primary motive 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 priceless inboxes.
Writer: The Electronic mail on Acid Staff
The Electronic mail on Acid content material staff 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.
Writer: The Electronic mail on Acid Staff
The Electronic mail on Acid content material staff 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.
