egoselfaxis
asked on
Need help implemeting fallback for non-supported CSS3 in Office365'sversion of Outlook
Does anyone here know how I might adapt this HTML code so that it displays correctly when viewing it as an HTML email using the installed software version of Outlook that's part of the Office365 suite? It's my understanding that the Office365 version of Outlook doesn't support CSS3 ... and that's fine. But I'd at least like to get some kind of suitable fallback in place .. even it it's just a single image instead of the slideshow. Does anyone here have any suggestions?
Thanks in advance,
- Yvan
Thanks in advance,
- Yvan
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Slider</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--[if gte mso 15]>
<style type="text/css">
table { font-size:1px; line-height:0; mso-margin-top-alt:1px;mso-line-height-rule: exactly; }
* { mso-line-height-rule: exactly; }
</style>
<![endif]-->
<style type="text/css">
.ReadMsgBody { width: 100%; background-color: #F6F6F6; }
.ExternalClass { width: 100%; background-color: #F6F6F6; }
body { width: 100%; background-color: #f6f6f6; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; font-family: Georgia, serif }
table { border-collapse: collapse !important; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -khtml-user-select: none; -o-user-select: none; -moz-user-select: none; -webkit-user-select: none; user-select: none; }
@-ms-viewport{ width: device-width; }
@media only screen and (max-width: 639px){
.wrapper{ width:100%; padding: 0 !important; }
}
@media only screen and (max-width: 480px){
.centerClass{ margin:0 auto !important; }
.imgClass{ width:100% !important; height:auto; }
.wrapper{ width:100%; padding: 0 !important; }
.container{ width:100%; padding: 0 !important; }
.mobile{ width:100%; display:block; padding: 0 !important; text-align:center !important;}
.mobile50{ width:100%; padding: 0 !important; text-align:center; }
*[class="mobileOff"] { width: 0px !important; display: none !important; }
*[class*="mobileOn"] { display: block !important; max-height:none !important; }
}
@-webkit-keyframes disapear {
0% {opacity: 0;}
100% {opacity: 0;}
}
@-moz-keyframes disapear {
0% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes disapear {
0% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes disapear {
0% {opacity: 0;}
100% {opacity: 0;}
}
#slider_theme.activeSlider{
position: relative;
width: 100%;
overflow: hidden;
min-height: 100px;
height: auto;
}
/* Control Overall Speed of Slideshow Here #1 */
#slider_theme.activeSlider .control{
position: relative;
left: 0px;
white-space:nowrap;
animation: slider-navigate 35s infinite;
-webkit-animation: slider-navigate 35s infinite;
-moz-animation: slider-navigate 35s infinite;
-o-animation: slider-navigate 35s infinite;
animation: slider-navigate 35s infinite;
font-size: 0px;
width: 100%;
}
#slider_theme .control img{
margin: 0px;
padding: 0px;
display: inline-block;
vertical-align: middle;
}
#slider_theme .control img:first-child{
width: 100%;
}
/* Control Overall Speed of Slideshow Here #2 */
#slider_theme.activeSlider .control img{
-moz-animation: show-width 35s infinite;
-webkit-animation: show-width 35s infinite;
-o-animation: show-width 35s infinite;
animation: show-width 35s infinite;
}
/* Percentages here need to be adjusted based on total number slides */
@keyframes show-width {
0%{ width: 12.5%; max-width: 12.5%; }
100%{ width: 12.5%; max-width: 12.5%; }
}
@-moz-keyframes show-width {
0%{ width: 12.5%; max-width: 12.5%; }
100%{ width: 12.5%; max-width: 12.5%; }
}
@-webkit-keyframes show-width {
0%{ width: 12.5%; max-width: 12.5%; }
100%{ width: 12.5%; max-width: 12.5%; }
}
@-o-keyframes show-width {
0%{ width: 12.5%; max-width: 12.5%; }
100%{ width: 12.5%; max-width: 12.5%; }
}
/* Percentage prefixes need to be adjusted based on total number of slides */
/* 1st value equals transition speed - 2nd value equals pause duration */
@keyframes slider-navigate {
0%{ left: 0%; display: block; width: 800%; }
9.25%{ left: 0%; }
12.5%{ left: -100%; }
21.75%{ left: -100%; }
25%{ left: -200%; }
34.25%{ left: -200%; }
37.5%{ left: -300%; }
46.75%{ left: -300%; }
50%{ left: -400%; }
59.25%{ left: -400%; }
62.5%{ left: -500%; }
71.75%{ left: -500%; }
75%{ left: -600%; }
84.25%{ left: -600%; }
87.5%{ left: -700%; }
96.75%{ left: -700%; }
100%{ left: -800%; width: 800%; }
}
@-webkit-keyframes slider-navigate {
0%{ left: 0%; display: block; width: 800%; }
9.25%{ left: 0%; }
12.5%{ left: -100%; }
21.75%{ left: -100%; }
25%{ left: -200%; }
34.25%{ left: -200%; }
37.5%{ left: -300%; }
46.75%{ left: -300%; }
50%{ left: -400%; }
59.25%{ left: -400%; }
62.5%{ left: -500%; }
71.75%{ left: -500%; }
75%{ left: -600%; }
84.25%{ left: -600%; }
87.5%{ left: -700%; }
96.75%{ left: -700%; }
100%{ left: -800%; width: 800%; }
}
@-moz-keyframes slider-navigate {
0%{ left: 0%; display: block; width: 800%; }
9.25%{ left: 0%; }
12.5%{ left: -100%; }
21.75%{ left: -100%; }
25%{ left: -200%; }
34.25%{ left: -200%; }
37.5%{ left: -300%; }
46.75%{ left: -300%; }
50%{ left: -400%; }
59.25%{ left: -400%; }
62.5%{ left: -500%; }
71.75%{ left: -500%; }
75%{ left: -600%; }
84.25%{ left: -600%; }
87.5%{ left: -700%; }
96.75%{ left: -700%; }
100%{ left: -800%; width: 800%; }
}
@-o-keyframes slider-navigate {
0%{ left: 0%; display: block; width: 800%; }
9.25%{ left: 0%; }
12.5%{ left: -100%; }
21.75%{ left: -100%; }
25%{ left: -200%; }
34.25%{ left: -200%; }
37.5%{ left: -300%; }
46.75%{ left: -300%; }
50%{ left: -400%; }
59.25%{ left: -400%; }
62.5%{ left: -500%; }
71.75%{ left: -500%; }
75%{ left: -600%; }
84.25%{ left: -600%; }
87.5%{ left: -700%; }
96.75%{ left: -700%; }
100%{ left: -800%; width: 800%; }
}
body[yahoo] #slider_theme .control img{
display: none;
}
body[yahoo] #slider_theme .control img:first-child{
display: block !important;
}
</style>
<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" style="background-color:#F6F6F6; font-family:Georgia,serif; margin:0; padding:0; min-width: 100%; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;">
<!--[if !mso]><!-- -->
<img style="min-width:640px; display:block; margin:0; padding:0" class="mobileOff" width="640" height="1" src="https://s14.postimg.org/7139vfhzx/spacer.gif">
<!--<![endif]-->
<!-- Start Background -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#F6F6F6">
<tr>
<td width="100%" valign="top" align="center">
<!-- Start Wrapper -->
<table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#222222">
<tr>
<td height="20" style="font-size:10px; line-height:10px;"> </td><!-- Spacer -->
</tr>
<tr>
<td align="center">
<!-- Start Container -->
<table width="640" cellpadding="0" cellspacing="0" border="0" class="container">
<tr>
<td width="640" class="mobile" style="font-family:Georgia; font-size:12px; line-height:20px; font-weight:bold; text-transform:uppercase; letter-spacing:2px; color:#FFFFFF;" align="center">
Slider
</td>
</tr>
</table>
<!-- Start Container -->
</td>
</tr>
<tr>
<td height="20" style="font-size:10px; line-height:10px;"> </td><!-- Spacer -->
</tr>
</table>
<!-- End Wrapper -->
<div class="mcnTextContent">
<table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#FFFFFF">
<tr>
<td height="20" style="font-size:10px; line-height:10px;"> </td>
</tr>
<tr>
<td align="center">
<table width="640" cellpadding="0" cellspacing="0" border="0" class="container">
<tr>
<td width="640" class="mobile" style="font-family:arial; font-size:12px; line-height:18px;">
<div id="slider_theme" class="activeSlider">
<div class="control">
<a href="https://royalpalm.com/" target="_blank">
<img src="https://gallery.mailchimp.com/4d0c6a0ad6b8b1831cff2d851/images/992eb8c7-29b6-4456-8938-60ec8c5775fd.jpg" style="width: 100%;"/>
<!--[if !mso]><!-->
<img src="https://gallery.mailchimp.com/4d0c6a0ad6b8b1831cff2d851/images/40054b86-45bb-4f16-af08-39fd3fc83c5e.jpg" style="max-width: 0.1px; width: 0.1px;"/>
<img src="https://gallery.mailchimp.com/4d0c6a0ad6b8b1831cff2d851/images/2688fbad-a95c-404b-be3f-b0c13ef70184.jpg" style="max-width: 0.1px; width: 0.1px;"/>
<img src="https://gallery.mailchimp.com/4d0c6a0ad6b8b1831cff2d851/images/4a76beb4-135f-4e25-84af-988f3c497708.jpg" style="max-width: 0.1px; width: 0.1px;"/>
<img src="https://gallery.mailchimp.com/4d0c6a0ad6b8b1831cff2d851/images/3d060da2-89fd-4836-bd90-7b3552c849c8.jpg" style="max-width: 0.1px; width: 0.1px;"/>
<img src="https://gallery.mailchimp.com/4d0c6a0ad6b8b1831cff2d851/images/0b8b6d76-4fd0-45e7-9eb9-4ae6ce45f0ba.jpg" style="max-width: 0.1px; width: 0.1px;"/>
<img src="https://gallery.mailchimp.com/4d0c6a0ad6b8b1831cff2d851/images/daf79bf7-f01f-4581-80d1-4c80abe05fc6.jpg" style="max-width: 0.1px; width: 0.1px;"/>
<img src="https://gallery.mailchimp.com/4d0c6a0ad6b8b1831cff2d851/images/86e06590-e146-4ca6-828f-5366adddc619.jpg" style="max-width: 0.1px; width: 0.1px;"/>
<img src="https://gallery.mailchimp.com/4d0c6a0ad6b8b1831cff2d851/images/992eb8c7-29b6-4456-8938-60ec8c5775fd.jpg" style="max-width: 0.1px; width: 0.1px;" />
<!--<![endif]-->
</a>
</div>
<div style="clear: both;"></div>
</div>
<div style="clear: both;"></div>
</td>
</tr>
<tr>
<td height="20" style="font-size:10px; line-height:10px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- Start Wrapper -->
<table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#FFFFFF">
<tr>
<td height="50" style="font-size:10px; line-height:10px;"> </td><!-- Spacer -->
</tr>
<tr>
<td align="center">
<!-- Start Container -->
<table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
<tr>
<td width="600" class="mobile" style="font-family:Georgia; font-size:12px; line-height:18px;" align="center">
<!-- Start Content -->
<table width="500" cellpadding="0" cellspacing="0" border="0" class="container">
<tr>
<td width="500" class="mobile" style="font-family:Georgia; font-size:26px; line-height:32px;" align="center">
Slider for email.
</td>
</tr>
<tr>
<td height="30" style="font-size:10px; line-height:10px;"></td>
</tr>
<tr>
<td width="500" class="mobile" style="font-family:Georgia; font-size:16px; line-height:20px; color:#747474;" align="center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet tincidunt ligula, at rutrum dolor. Nunc laoreet interdum neque, sit amet ornare leo imperdiet nec. Suspendisse gravida eget lectus vel sollicitudin. Nunc vulputate a ante in sagittis.
</td>
</tr>
</table>
<!-- End Content -->
</td>
</tr>
</table>
<!-- Start Container -->
</td>
</tr>
<tr>
<td height="60" style="font-size:10px; line-height:10px;"> </td><!-- Spacer -->
</tr>
</table>
<!-- End Wrapper -->
<!-- Start Wrapper -->
<table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#222222">
<tr>
<td height="20" style="font-size:10px; line-height:10px;"> </td><!-- Spacer -->
</tr>
<tr>
<td align="center">
<!-- Start Container -->
<table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
<tr>
<td width="600" class="mobile" style="font-family:Georgia; font-size:14px; line-height:20px; color:#FFFFFF;" align="center">
© 2015 Slider
</td>
</tr>
</table>
<!-- Start Container -->
</td>
</tr>
<tr>
<td height="20" style="font-size:10px; line-height:10px;"> </td><!-- Spacer -->
</tr>
</table>
<!-- End Wrapper -->
</td>
</tr>
</table>
<!-- End Background -->
</body>
</html>ASKER
I'm already well aware of the limitations of HTML email, though I still appreciate your advice. It's just that I'm so close to the finish line already (having gotten the animations to work in Mozilla Thunderbird and the IOS email client), and starting over from scratch simply isn't an option at this point. I'm just looking for some help implementing some kind of fallback for Outlook 2016 .. ideally something as simple as hiding all but the first image in the slideshow (so that the email displays similar to the way it does in Gmail).
- Yvan
- Yvan
>>> It's just that I'm so close to the finish line already (having gotten the animations
>>> to work in Mozilla Thunderbird and the IOS email client), and starting over from
>>> scratch simply isn't an option at this point.
Yup, I've been there. And it really sucked when I had to start over anyways.
You're fighting a battle which is more than just uphill - it's a vertical leap with a reinforced ceiling. For every time our project coordinators have wanted to create some fancy cool email, in *every* instance, we've had to revert to something simpler in order to maintain consistency of presentation. I wish you good luck in your efforts, though. Perhaps CSS support has improved since I tried this last.
>>> to work in Mozilla Thunderbird and the IOS email client), and starting over from
>>> scratch simply isn't an option at this point.
Yup, I've been there. And it really sucked when I had to start over anyways.
You're fighting a battle which is more than just uphill - it's a vertical leap with a reinforced ceiling. For every time our project coordinators have wanted to create some fancy cool email, in *every* instance, we've had to revert to something simpler in order to maintain consistency of presentation. I wish you good luck in your efforts, though. Perhaps CSS support has improved since I tried this last.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
This is what ended up working for me
A good starting place for you will be checking out current support guidelines for the variety of clients. Guides like those found at https://templates.mailchimp.com/resources/email-client-css-support/ and https://caniuse.email/ will give you a good idea of what you can and can't do. Once you have a template, you can use a number of services to test that template on the dozens of clients available in the wild today. Repeat those steps about 20-30 times, and you'll arrive at something usable.