How to make outlook email signature responsive

Question

I'm setting up a new email signature for my client which needs to be responsive .

I tried out one layout which includes div , tables etc which works out good on desktops but not on mobiles .

Below is one such sample but the email appears as same is desktop & mobile with the cells / divs shifting one under the other .

As a part of my research , i tried using this email boilerplate which ended up in the same way . - https://github.com/seanpowell/Email-Boilerplate

<!--[if gte mso 9]>
    <table cellspacing=0><tr><td style="font-family: Arial; font-size: 10pt; color: #fff; background-color: orange; width: 250px; height: 100px; padding: 3px; vertical-align: top">
<![endif]-->
<div style="float: left; font-family: Arial; font-size: 10pt; color: #fff; background-color: orange; width: 250px; height: 100px; padding: 3px; vertical-align: top">
    <strong>Administrator</strong><br>Phone {qwfqwfcqwdqwfqfgqwfqwbfjqnwjkfqnwjfbqiwnf qwnfiquwnqwnfiqnwifjnqwfinqwifnqwjinfqjiwnfijqwnf}<br>Email <a href="mailto:{E-mail}" style="color: #fff; text-decoration: none;">{qwfqwfqwcqwfqwfqwfdqwcrqwrqwcrqwrqwrcqwrxqwrqwcxqrwqxrqwxqwx}</a>
</div>
<!--[if gte mso 9]>
    </td><td style="font-family: Arial; font-size: 10pt; color: #fff; background-color: red; width: 250px; height: 100px; padding: 3px; vertical-align: top">
<![endif]-->
<div style="float: left; font-family: Arial; font-size: 10pt; color: #fff; background-color: red; width: 250px; height: 100px; padding: 3px; vertical-align: top">
    <strong>qwfqwfqwdqw fqwfqwfqwdfqwdqwfqwfqwdqwdqwdqw</strong> ​
</div>
<!--[if gte mso 9]>    
</td></tr></table>
    <![endif]-->

https://jsfiddle.net/623y57p1/1/

Have a look at the demo i made . This is responsive in browsers , but not in outlook .

Answer 1

I created a sample code that works with Outlook. The two columns of this email footer will display side-by-side if the viewing window is wider than 580px. If it goes below that width, it will revert to two stacked columns. You can set the width breakpoint by adjusting <td width="290">.

<table align="center" role="contentinfo" cellspacing="0" cellpadding="0" border="1" width="100%" style="margin: 0 auto;">
  <tr>
    <td width="290" style="direction: ltr !important; display: inline-block;">
      Column A
    </td>
    <td width="290" style="direction: ltr !important; display: inline-block;">
      Column B
    </td>
  </tr>
</table>

Please keep in mind a few caveats:

• Outlook 2007-2019 does not support responsive email. There is no support for @media queries.

• The width for the table must be set to <table width="100%">.

• The width for the table cells to 290 because the maximum width for an Outlook viewing window is 580px.

• You can turn off <table border="1"> It's on for demonstration purposes.

• <table role="contentinfo"> supports screen readers. Please leave it to help visually impaired users know about the structure of your email message.

• https://jsfiddle.net/wallyglenn/w0s4xmc0/60529/

Good luck.