OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to make outlook email signature responsive

  • Thread starter Thread starter titus
  • Start date Start date
T

titus

Guest
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

Code:
<!--[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 .
<p>I'm setting up a new email signature for my client which needs to be responsive . </p>

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

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

<p>As a part of my research , i tried using this email boilerplate which ended up in the same way . - <a href="https://github.com/seanpowell/Email-Boilerplate" rel="nofollow noreferrer">https://github.com/seanpowell/Email-Boilerplate</a></p>

<pre><code><!--[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]-->
</code></pre>

<p><a href="https://jsfiddle.net/623y57p1/1/" rel="nofollow noreferrer">https://jsfiddle.net/623y57p1/1/</a></p>

<p>Have a look at the demo i made . This is responsive in browsers , but not in outlook . </p>
Continue reading...
 

Latest posts

M
Replies
0
Views
1
Miguel Mesquita Alfaiate
M
S
Replies
0
Views
1
Shubhankar Pande
S
Top