An HTML electronic mail that renders completely in each shopper is a developer’s frustratingly elusive white whale. Whereas many electronic mail purchasers have improved help for sure options through the years, there are nonetheless lots of variations that make it unattainable to create an electronic mail that appears precisely the identical throughout each system and shopper.
However do you actually need 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 differ a bit, than to spend hours attempting to get your emails to look completely equivalent throughout each setting. 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 probably 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 appropriately by Outlook, builders must work with the precise idiosyncrasies of the Phrase rendering engine. You’ll be able to 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 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 needs 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 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 totally different gadgets and purchasers. You’ll be able to goal totally different variations of Outlook with Microsoft Workplace (MSO) conditional feedback and totally 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 electronic mail templates to clarify why you added a sure piece of code or styled a component in a selected manner. For instance:
<!-- Outlook kinds under. Don't strip MSO tagged feedback earlier than sending your electronic mail. -->Whereas HTML feedback are normally ignored by browsers and electronic mail purchasers, 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 electronic mail shopper that may 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 shopper..
MSO conditional feedback can embody plain textual content, HTML, or CSS. This may be helpful if it’s essential implement distinctive kinds, 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 electronic mail purchasers will ignore the remark and the kinds won’t be utilized.
It’s also possible to use MSO conditional feedback to incorporate CSS kinds within the <head> that focus on Outlook. As an illustration, for those who 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;
colour: #434345;
}
</model>
<![endif]-->You’ll be able to even use mso- prefixed CSS to model components 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 purchasers 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 shopper shouldn’t be Microsoft Outlook”. You’ll additionally must 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 it’s essential goal a number of variations of Outlook, you need to use circumstances like “higher than,” “lower than,” “equal to,” and so forth. by utilizing the next code:
| Code | Definition | MSO Remark Code |
| gt | Higher than | <!–[if gt mso 14]> Higher than MSO 2010 <![endif]–> |
| lt | Lower than | <!–[if lt mso 12]> Lower than MSO 2007 <![endif]–> |
| gte | Higher than or equal to | <!–[if gte mso 15]> Higher 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 manner, and in any shopper that isn’t MSO one more manner, you might write one thing like this:
<!--[if lte mso 15]>
<desk width=”100%” model=”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%” model=”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%” model=”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 need to use conditional CSS by way of media queries (@media) or assign fallback lessons inside your <model> tags in your electronic mail <head> to tailor the looks of an electronic mail to totally different purchasers and gadgets. Despite the fact that Outlook stands out as the thorniest electronic mail shopper to deal 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 otherwise from system to system. Since these different variables can’t be focused with MSO conditional feedback, electronic mail builders usually use conditional CSS to handle inconsistencies and apply kinds which are solely supported by sure purchasers.
Conditional CSS is a useful device for guaranteeing that your emails look as supposed throughout a variety of electronic mail purchasers and gadgets. Beneath, we’ll go into a bit extra element about a few of the widespread use circumstances for conditional CSS in addition to MSO conditional statements and provides some particular code examples.
When to make use of conditional code in electronic mail growth
In case your emails are being despatched to a number of electronic mail purchasers and can be learn on all kinds of gadgets, you’ll need 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 electronic mail content material for these purchasers that help it. Conditional code means that you can benefit from HTML5 movies, animated GIFs, net fonts, and extra to create hanging and impactful electronic mail campaigns, whereas offering fallback content material and design for purchasers that lack help for these options.
Listed below are a couple of different examples of the way you would possibly use conditional CSS in an electronic mail:
1. Making use of totally different kinds based mostly on electronic mail shopper or viewport measurement
An <h1> heading at 24px on a cellular electronic mail shopper would possibly look effective, however for those who’re studying that electronic mail on a desktop pc, 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 means that you can apply kinds based mostly on the scale of the viewport or different options of the subscriber’s system.
Within the under instance, the h1 components may have a font measurement of 24px by default. Nevertheless, 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 components can be elevated to 48px.
h1 {
font-size: 24px;
}
@media display screen and (min-width: 1025px) {
h1 {
font-size: 48px;
}
}
Word that once you’re utilizing @media, you’ll want to incorporate further brace after your @media assertion and earlier than your h1 selector. This code needs to be included in your <model> part in your electronic mail <head>.
You need to use comparable guidelines to use totally different kinds to different components in your electronic mail based mostly on viewport dimensions. Simply remember that not all electronic mail purchasers help media queries, so it’s possible you’ll want to make use of a number of @media guidelines or use them along with different conditional code to cowl a spread of purchasers.
2. Hiding particular electronic mail components
Some electronic mail purchasers don’t help sure HTML and CSS components. To forestall these components from being displayed awkwardly in sure environments, you’ll be able to use conditional CSS to cover them.
There are a couple of other ways you’ll be able to cover particular electronic mail components:
- 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 method 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 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 based mostly on a sure situation. For instance, you would possibly need 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 can be hidden from all different electronic mail purchasers.
- Embody a HTML5 hidden attribute. Though help for the HTML5 “hidden” attribute is proscribed. Within the electronic mail purchasers that do help it, nevertheless, your aspect can be hidden for display screen readers, won’t 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 components by making them solely clear utilizing the “opacity” property in HTML. Opacity ranges between 1 (opaque) and 0 (clear). For those who use opacity to cover a component, the aspect nonetheless exists and takes up the identical quantity of house 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’d like that further spacing and don’t essentially want that aspect to be solely unavailable, however it might probably look clunky if the thing could be very giant and complicated to these utilizing display screen readers.
<td model="opacity: 0;">
<img src="https://youranimatedgif.com/babygoats.gif" width="600" top="400"
model="show: block;">
</td>
- Set visibility to hidden. The
visibility:hidden;declaration works precisely like opacity, besides that it has the distinctive characteristic of with the ability to be overridden in baby components by setting the kid aspect tovisibility:seen;.
<td model=”visibility:hidden;”>
<img src="https://youranimatedgif.com/babygoats.gif" width="600" top="400"
model="show: block;">
</td>
- Use conditional CSS to cover components based mostly on the recipient’s electronic mail shopper. There are a number of methods you need to use CSS lessons to cover components based mostly on the e-mail shopper getting used. Jay Oram over at ActionRocket has some tips value testing.
It’s vital to notice that these are only a handful of strategies you need to use to cover components in your emails. Additionally, not all electronic mail purchasers will help all of those strategies, so it’s possible you’ll want to make use of a mix to realize the specified end result.
3. Web page break issues
The Phrase rendering engine in Outlook 2010 and prior variations wreaks havoc on electronic mail design attributable to its doc size restrict of round 1800 pixels. When your electronic mail turns into longer than this restrict, Outlook will unhelpfully add a web page break.
This could completely wreck your electronic mail design and make it troublesome to learn, particularly when the break occurs in the midst of a picture tag or another very important piece of HTML. MSO conditional statements mean you can 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 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 significantly 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 be capable to use a static width for Outlook whereas preserving fluid desk design in different electronic mail purchasers that respect div kinds.
</div>
<!--[if mso]>
</td>
</tr>
</desk>
<![endif]-->
Another 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 photographs in emails whereas offering fallback code for Outlook.
5. Bulletproof buttons and backgrounds
Bulletproof design components in electronic mail might have slight design variations from shopper to shopper, however they preserve 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 and not using a border radius in Outlook. The looks would possibly 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 colour for purchasers that don’t help background photographs. It additionally consists of VML markup for Outlook 2003 and earlier (which does help background photographs, 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="top:40px;v-text-anchor:center;width:200px;" arcsize="25%" stroke="f" fill="t">
<v:fill kind="tile" src="https://imgur.com/uQg9nTA" colour="#fa0031" />
<w:anchorlock/>
<middle model="colour:#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/"
model="background-color:#fa0031;colour:#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/"
model="background-color:#fa0031;background-image:url(https://imgur.com/uQg9nTA);border-radius:10px;colour:#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 E mail Code has a superb instance of how one can code a bulletproof button for electronic mail.
6. Changing GIFs with static photographs
Assist for animated GIFs in electronic mail is nearly common at this level… virtually. In fact, our buddy Outlook for Home windows nonetheless doesn’t help GIFs. Outlook doesn’t also have a commonplace therapy of GIFs throughout variations. Outlook 2007-2013 will merely show the primary body of the GIF, which might be effective for those who 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 will use conditional feedback to show a particular static picture.
First you’ll need to add your picture class and any kinds you need 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 shopper is NOT Outlook, to show the newborn 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 need 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 be capable 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 by way of the GIF.
7. Interactive electronic mail fallbacks
For those who’re utilizing interactive components in your emails, you’ll need to present fallbacks for purchasers that don’t help these options. Examples of interactive components embody hover animations, side-scrolling photographs, and picture carousels.
For hover animations, which have spotty electronic mail shopper help, you’ll be able to merely make it possible for your first picture is the one that you just need to be displayed as a static picture. E mail purchasers that don’t help the hover pseudo-class will merely ignore it. However for side-scrolling photographs, add a fallback class in your <model> part within the electronic mail <head> and declare the fallback in your desk. See the total code for facet scrolling photographs and fallbacks.
If you wish to create a picture carousel in your emails, it would 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 personal static picture fallback will assist be certain that your electronic mail shows effectively in purchasers that don’t help picture carousels.
Wish to get picture carousels and fallback content material proper? Try this useful tutorial for creating animated picture carousels for electronic mail.
8. Utilizing conditional code in your electronic mail templates
Utilizing MSO conditional feedback and conditional CSS in your electronic mail templates is an effective follow to get into. It should prevent time and design complications when drafting electronic mail campaigns and be certain that you don’t neglect to incorporate show choices for every of the key electronic mail purchasers and system sorts.
You’ll additionally be capable to relaxation straightforward understanding that your emails may have a constant look and dependable habits. However irrespective of how stable you suppose your electronic mail templates are, don’t neglect to check their show earlier than you hit ship!
Because of this you take a look at electronic mail campaigns
E mail purchasers can have extensively various help for HTML and CSS, and there are a lot of methods that you need to use to attempt to obtain constant rendering of your emails throughout totally different purchasers. The complexity of addressing these inconsistencies is the primary cause electronic mail groups want to check and preview their campaigns.
Use E mail on Acid by Sinch to check your emails throughout quite a lot of electronic mail purchasers to make sure your conditional CSS and different code works as anticipated. By testing your emails, you’ll be capable to catch and repair any show points earlier than your emails land in these worthwhile inboxes.
Creator: The E mail on Acid Group
The E mail on Acid content material crew 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.
Creator: The E mail on Acid Group
The E mail on Acid content material crew 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.
