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 help for sure options over time, there are nonetheless numerous variations that make it not possible 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 differ a bit, than to spend hours attempting to get your emails to look completely equivalent throughout each surroundings. 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 probably 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 particular idiosyncrasies of the Phrase rendering engine. You may code your emails with Vector Markup Language (VML), nevertheless 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 bit 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 flexibility to deal with a restricted set of conditional statements. You should 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 permit builders so as to add ignored content material to their HTML paperwork. You would possibly use feedback in your e-mail templates to clarify 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 often ignored by browsers and e-mail shoppers, MSO tags have 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 may be 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 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 you want to 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 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 types won’t be utilized.
You can even use MSO conditional feedback to incorporate CSS types within the <head> that concentrate on Outlook. As an example, for those who needed to make the physique type 16px Arial in a darkish grey, you’d use the next code:
<!--[if mso]>
<type>
.physique {
font-family: Arial, sans serif;
font-size: 16px;
coloration: #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 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 shopper just isn’t 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 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 you want to goal a number of variations of Outlook, you need to use circumstances like “better than,” “lower than,” “equal to,” and many others. 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 technique, in any newer model of Outlook one other approach, and in any shopper that isn’t MSO yet one more approach, you can write one thing like this:
<!--[if lte mso 15]>
<desk width=”100%” type=”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%” type=”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%” type=”border: 3px stable #2e2ed2;”><tr><td>
<p>This data will show provided that the shopper just 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 <type> tags in your e-mail <head> to tailor the looks of an e-mail to completely different shoppers and gadgets. Although Outlook stands out as the thorniest e-mail shopper 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 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 supposed throughout a variety of e-mail shoppers and gadgets. Beneath, we’ll go into slightly extra element about among 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 probably 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 help it. Conditional code lets you benefit from HTML5 movies, animated GIFs, internet fonts, and extra to create putting and impactful e-mail campaigns, whereas offering fallback content material and design for shoppers that lack help for these options.
Listed here are a couple of different examples of the way you would possibly use conditional CSS in an e-mail:
1. Making use of completely different types based mostly on e-mail shopper or viewport measurement
An <h1> heading at 24px on a cellular e-mail shopper would possibly look tremendous, however for those who’re studying that e-mail on a desktop pc, your title could seem 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 lets you apply types based mostly on the scale of the viewport or different options of the subscriber’s system.
Within the beneath instance, the h1 parts 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 parts will probably be elevated to 48px.
h1 {
font-size: 24px;
}
@media display screen and (min-width: 1025px) {
h1 {
font-size: 48px;
}
}
Observe that while you’re utilizing @media, you’ll want to incorporate further 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 should use related guidelines to use completely different types to different parts in your e-mail based mostly on viewport dimensions. Simply remember that not all e-mail shoppers help media queries, so chances are you’ll want to make use of a number of @media guidelines or use them along side different conditional code to cowl a variety of shoppers.
2. Hiding particular e-mail parts
Some e-mail shoppers don’t help sure HTML and CSS parts. To forestall these parts from being displayed awkwardly in sure environments, you possibly can use conditional CSS to cover them.
There are a couple of alternative ways you possibly can conceal particular e-mail parts:
- Use inline CSS. You should 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 should use the mso-hide property in a mode 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 should 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 should use an MSO conditional remark to cover a component based mostly on a sure situation. For instance, you would possibly 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 probably be hidden from all different e-mail shoppers.
- Embody a HTML5 hidden attribute. Though help for the HTML5 “hidden” attribute is proscribed. Within the e-mail shoppers that do help it, nonetheless, your ingredient will probably 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 may conceal parts by making them fully 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 ingredient nonetheless exists and takes up the identical quantity of area as if it have been being displayed. It may also be chosen by the person and is readable by a display screen reader. That is helpful in order for you that further spacing and don’t essentially want that ingredient to be fully unavailable, however it could look clunky if the item could be very giant and complicated to these utilizing display screen readers.
<td type="opacity: 0;">
<img src="https://youranimatedgif.com/babygoats.gif" width="600" peak="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 having the ability to be overridden in little one parts by setting the kid ingredient tovisibility:seen;.
<td type=”visibility:hidden;”>
<img src="https://youranimatedgif.com/babygoats.gif" width="600" peak="400"
type="show: block;">
</td>
- Use conditional CSS to cover parts based mostly on the recipient’s e-mail shopper. There are a number of methods you need to use CSS lessons to cover parts based mostly on the e-mail shopper getting used. Jay Oram over at ActionRocket has some tips value trying out.
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 chances are you’ll 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 on account 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 will completely wreck your e-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 permit you to create layouts that may work particularly with these variations of Outlook.
For instance, you can 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 challenge.
<!--[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 drive 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 helpful notably if you end up 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 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 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 can even use ghost tables to conditionally show background photographs in emails whereas offering fallback code for Outlook.
5. Bulletproof buttons and backgrounds
Bulletproof design parts in e-mail could have slight design variations from shopper to shopper, 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, nevertheless 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 coloration for shoppers that don’t help background photographs. It additionally consists of VML markup for Outlook 2003 and earlier (which does help background photographs, in contrast to 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="peak:40px;v-text-anchor:center;width:200px;" arcsize="25%" stroke="f" fill="t">
<v:fill kind="tile" src="https://imgur.com/uQg9nTA" coloration="#fa0031" />
<w:anchorlock/>
<heart type="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/"
type="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/"
type="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 E mail Code has instance of find out how to code a bulletproof button for e-mail.
6. Changing GIFs with static photographs
Assist for animated GIFs in e-mail is sort of common at this level… nearly. After all, our buddy Outlook for Home windows nonetheless doesn’t help GIFs. Outlook doesn’t actually have a normal remedy of GIFs throughout variations. Outlook 2007-2013 will merely show the primary body of the GIF, which might be tremendous 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 are able to 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 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 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 be capable 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 via the GIF.
7. Interactive e-mail fallbacks
For those who’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 embody hover animations, side-scrolling photographs, and picture carousels.
For hover animations, which have spotty e-mail shopper help, you possibly can merely be sure that your first picture is the one that you simply wish to be displayed as a static picture. E mail shoppers that don’t help the hover pseudo-class will merely ignore it. However for side-scrolling photographs, add a fallback class in your <type> part within the e-mail <head> and declare the fallback in your desk. See the complete code for aspect scrolling photographs 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 would possibly simply get an empty and weirdly formatted field. Offering your personal static picture fallback will assist be sure that your e-mail shows effectively in shoppers that don’t help picture carousels.
Need to get picture carousels and fallback content material proper? Try this useful 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 effective follow to get into. It’ll prevent time and design complications when drafting e-mail campaigns and be sure that you don’t neglect to incorporate show choices for every of the main e-mail shoppers and system varieties.
You’ll additionally be capable to relaxation straightforward figuring out that your emails may have a constant look and dependable habits. However irrespective of how stable you assume your e-mail templates are, don’t neglect to check their show earlier than you hit ship!
This is the reason you take a look at e-mail campaigns
E mail shoppers 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 completely different shoppers. The complexity of addressing these inconsistencies is the primary cause e-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 e-mail shoppers 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 useful inboxes.
Writer: 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 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.
Writer: 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 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.
