So I'm building a responsive email that is supposed to work in basically every client. The email has an structure like the following:
Note: The text td is like 2/3 of the width on both rows.
So my first problem was getting outlook to display the image on the right when in the code it was before the text. Float and align did not work for that. So my fix there was adding conditional code, anywhere but outlook (which anyways doesn't support my responsive designs) the image was gonna be before the text with a float: right; in outlook the code will have the image after the text.
That was basically it, seems pretty much fine in Gmail, every outlook version I tested and I was happy. But then I got to outlook.com and my dreams were crushed! For some reason any conditional code was completely deleted so my images were not displayed.
I fix I found was using some classes and putting display:none on the image, adding ecx to the class and have it display:block. This fixed my issue in outlook.com however now both images are displayed in gmail and for the life of me I can't figure out how the hell to fix this issue.
I know we've all suffered with responsive emails and emails in general at some point but this thing is making me give up. Does anyone has any fix for something like this.
This would be a sample code:
<table align="center" class="container" style="border-collapse:collapse;" width="600">
<tbody>
<tr style="margin:0 !important;">
<td style="background-color:#CCDAE5">
<table cellpadding="0" cellspacing="0" class="textAreaT" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt">
<tbody style="margin:0 !important;">
<tr style="margin:0 !important;">
<td class="centerTd" style="margin-right:15px; margin-bottom:0 !important; margin-top:0 !important; margin-left:-2px; mso-table-lspace:0pt; mso-table-rspace:0pt"><img height="186" src="some_URL" style="margin: -1px 15px -1px -1px; width:246px; height:186px;" width="246" /></td>
<td class="rightText" style="margin-right:10px; "><!--<h1>Did you has a blog?</h1>--><span style="font-face: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; color: #004586;">Want to know what it<b>Schedule a campus tour today:</b><br />
• See classes<br />
• Speak with instructors <br />
• Learn about </span><br />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="margin:0; margin-top:-2px;">
<td style="margin:0;">
<table cellpadding="0" cellspacing="0" class="textAreaT" style="border-collapse:collapse;margin:0;">
<tbody>
<tr style="margin:0; margin-top:-2px"><!--[if !mso]><!-- -->
<td align="right" class="centerTd" style="margin-top:-3px; margin-right:-2px; margin-left:15px; float: right; margin-bottom:-2px; display: block"><img align="right" class="rightImg" height="186" src="some_URL2" style="margin: 2px 1px 1px 15px; width:246px; height:186px;" width="246" /></td>
<!--<![endif]-->
<td align="left" class="leftText" style="margin-left:10px; float:left; width:50%; margin-top: 32px; " width="300"><!--<h1> has a blog?</h1>--><span align="left" style="font-face: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; color: #004586;">During your visit:<br />
• Review options<br />
• Ask questions and get answers in a one-on-one </span><br />
</td>
<!--[if gte mso 9]>
<td class="outYes" align="right" class="centerTd" style="display:none; margin-top:-3px !important; margin-right:-2px; margin-left:15px; float: right" >
<img align="right" width="246" height="186" class="rightImg" src="some_URL2" style="margin-top:-3px; margin-right0; margin-left:15px; width:246px; height:186px;" />
</td>
<![endif]-->
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
Thanks for any help!
I have used this approach. When I ran this through Email on Acid it showed that outlook.com and other email clients worked.
<table class="force-row main-story" width="100%" cellpadding="6" cellspacing="0" border="0" align="left" style="margin-left:0px;margin-right:0px;">
<tbody>
<tr>
<td>
<div>
<!-- ======= RECOMMENDATION ======= -->
<!--
ADD TRANSPARENCY OF ~10 PIXELS TO THE RIGHT OR LEFT OF AN IMAGE TO CREATE A MARGIN FROM THE TEXT THAT WRAPS AROUND THE IMAGE. THIS IS NECESSARY BECAUSE SOME EMAIL CLIENTS WILL REMOVE MARGINS THAT ARE PART OF THE CSS STYLING. TO INSURE MARGINS ARE CONSISTENT AROUND IMAGES, ADD MARGINS IN THE IMAGE BEFORE SAVING IT FOR THE WEB.
-->
<img alt="Placeholder Image" src="images/image-placeholder-150x150.gif" align="left" style="outline: none; text-decoration: none; display: block; clear: none; width: 100%; height: auto; max-width: 150px; margin-left: 0px; margin-right: 10px; *width:150px;">
</div>
<h1>Heading 1</h1>
<p>Lorem ipsum Mollit cillum fugiat velit et Excepteur Ut qui ut ex commodo magna. Lorem ipsum Occaecat fugiat fugiat enim sint aliquip voluptate dolor Duis aliqua magna. Lorem ipsum Ex officia sit in dolor dolore laboris cupidatat quis dolor do ea do labore incididunt.</p>
</td>
</tr>
<tr>
<td>
<div>
<img alt="Placeholder Image" src="images/image-placeholder-150x150.gif" align="right" style="outline: none; text-decoration: none; display: block; clear: none; width: 100%; height: auto; max-width: 150px; margin-left: 0px; margin-right: 10px; *width:150px;">
</div>
<h1>Heading 1</h1>
<p>Lorem ipsum Mollit cillum fugiat velit et Excepteur Ut qui ut ex commodo magna. Lorem ipsum Fugiat nulla et ad voluptate.</p>
</td>
</tr>
</tbody>
</table>