Отправка отзывчивой подписи Outlook 2016 по электронной почте - PullRequest
Новая
       87

Отправка отзывчивой подписи Outlook 2016 по электронной почте

0 голосов
/ 22 января 2020

Итак, у меня есть подпись html, которая отлично работает для Ma c Mail и других современных браузеров, но для Outlook 2016 это беспорядок. Это потому, что Outlook 2016 по-прежнему использует движок рендеринга Word HTML. Я знаю ..

Во всяком случае, с баннером в нижнем колонтитуле подписи, он теряет полную отзывчивость.

Кто-нибудь знает, что происходит?

  • Я использовал изображения-заполнители и изменил текст на lorem ipsum по соображениям конфиденциальности

Найти ниже Шаблон без баннера.

  • Когда я изменяю размер до ширины мобильного телефона, 3 изображения касаются друг друга. 
<!--[if mso]>
    <table border="0" cellspacing="0" cellpadding="0"><tr><td width="650">
<![endif]-->
<div style="max-width: 650px;">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td class="text-12 pb-35" style="font-size:12px; line-height:16px; color:#000001; font-family:Helvetica, Arial, sans-serif; text-align:left; min-width:auto !important; padding-bottom: 35px;">
                Kind regards,
                <br /><br />

                <strong>Lorem Ipsum</strong>
                <br />
                Lorem Ipsum
                <br /><br />

                M <a href="tel:+XXX" target="_blank" class="link c-black" style="text-decoration:none; color:#000001;"><span class="link nowrap c-black" style="text-decoration:none; white-space:nowrap; color:#000001;">+Lorem Ipsum</span></a>
            </td>
        </tr>
        <tr>
            <td class="pb-25" style="border-bottom: 1px solid #404040; padding-bottom: 25px;">
                <div class="box" style="float: left; display: inline;">
                    <table width="290" align="left" class="box-inner" valign="top" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; float: left; width: 290px;">
                        <tr>
                            <td class="img" width="290" style="font-size:0pt; line-height:0pt; text-align:left;">
                                <a href="#" target="_blank">
                                    <img src="https://placeimg.com/460/88" width="230" height="44" border="0" alt="" />
                                </a>
                            </td>
                            <td class="img" width="30" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                        </tr>
                    </table>
                </div>
                <div class="box" style="float: left; display: inline;">
                    <table align="left" class="box-inner" valign="top" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; float: left;">
                        <tr>
                            <td class="pt-20" style="padding-top: 20px;">
                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td valign="top" class="text-10 c-black l-black nowrap" nowrap="nowrap" style="font-size:10px; line-height:14px; font-family:Helvetica, Arial, sans-serif; text-align:left; min-width:auto !important; color:#000001; white-space:nowrap;">
                                            <a href="#" target="_blank" class="link" style="color:#000001; text-decoration:none;"><span class="link nowrap" style="color:#000001; text-decoration:none; white-space:nowrap;">
                                                Lorem Ipsum 1
                                                <br />
                                                Lorem Ipsum
                                            </span></a>
                                        </td>
                                        <td valign="top" class="img" width="10" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td valign="top" class="img" width="1" bgcolor="#404040" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td valign="top" class="img" width="10" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td valign="top" class="text-10 c-black l-black nowrap" nowrap="nowrap" style="font-size:10px; line-height:14px; font-family:Helvetica, Arial, sans-serif; text-align:left; min-width:auto !important; color:#000001; white-space:nowrap;">
                                            T <a href="tel:+#" target="_blank" class="link c-black" style="text-decoration:none; color:#000001;"><span class="link nowrap c-black" style="text-decoration:none; white-space:nowrap; color:#000001;">+Lorem Ipsum</span></a>
                                            <br />
                                            <a href="mailto:#" target="_blank" class="link c-black" style="text-decoration:none; color:#000001;"><span class="link nowrap c-black" style="text-decoration:none; white-space:nowrap; color:#000001;">Lorem Ipsum</span></a>
                                        </td>
                                        <td valign="top" class="img" width="10" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td valign="top" class="img" width="1" bgcolor="#404040" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td valign="top" class="img" width="10" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td valign="top" class="text-10 c-black l-black nowrap" nowrap="nowrap" style="font-size:10px; line-height:14px; font-family:Helvetica, Arial, sans-serif; text-align:left; min-width:auto !important; color:#000001; white-space:nowrap;">
                                            <a href="#" target="_blank" class="link" style="color:#000001; text-decoration:none;"><span class="link nowrap" style="color:#000001; text-decoration:none; white-space:nowrap;">Lorem Ipsum</span></a>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
        <tr>
            <td align="left" class="py-10" style="padding-top: 10px; padding-bottom: 10px;">
                <div class="box" style="float: left; display: inline;">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td class="pt-15" style="padding-top: 15px;">
                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td valign="bottom" class="img" width="158" style="font-size:0pt; line-height:0pt; text-align:left;">
                                            <a href="#" target="_blank">
                                                <!--[if mso]> 
                                                    <img src="https://placeimg.com/318/58" width="159" height="29" style="width: 100%; max-width: 159px;" border="0" alt="" />
                                                 <![endif]-->
                                                 <!--[if !mso]> <!----> 
                                                    <img src="https://placeimg.com/318/58" width="159" style="width: 100%; max-width: 159px;" border="0" alt="" />
                                                 <!-- <![endif]-->
                                            </a>
                                        </td>
                                        <td class="img" width="10" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td class="img" width="1" bgcolor="#7f7f7f" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td class="img" width="10" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td valign="bottom" class="img" width="138" style="font-size:0pt; line-height:0pt; text-align:left;">
                                            <a href="#" target="_blank">
                                                <!--[if mso]> 
                                                    <img src="https://placeimg.com/274/80" width="137" height="40" style="width: 100%; max-width: 137px;" border="0" alt="" />
                                                 <![endif]-->
                                                 <!--[if !mso]> <!----> 
                                                    <img src="https://placeimg.com/274/80" width="137" style="width: 100%; max-width: 137px;" border="0" alt="" />
                                                 <!-- <![endif]-->
                                            </a>
                                        </td>
                                        <td class="img" width="10" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td class="img" width="1" bgcolor="#7f7f7f" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td class="img" width="10" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td valign="bottom" class="img" width="85" style="font-size:0pt; line-height:0pt; text-align:left;">
                                            <a href="#" target="_blank">
                                                <!--[if mso]> 
                                                    <img src="https://placeimg.com/170/58" width="85" height="29" style="width: 100%; max-width: 85px;" border="0" alt="" />
                                                 <![endif]-->
                                                 <!--[if !mso]> <!----> 
                                                    <img src="https://placeimg.com/170/58" width="85" style="width: 100%; max-width: 85px;" border="0" alt="" />
                                                 <!-- <![endif]-->
                                            </a>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </div>      
            </td>
        </tr>


        <tr>
            <td class="text-9 c-grey" style="font-size:9px; line-height:13px; font-family:Helvetica, Arial, sans-serif; text-align:left; min-width:auto !important; color:#808080;">
                <strong>Disclaimer</strong>
                <br />
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </td>
        </tr>
    </table>
</div>
<!--[if mso]>
    </td></tr></table>
<![endif]-->

Найдите под шаблоном баннер. Этот теряет полную отзывчивость. Я думаю, что это из-за ширины баннера 650 (это максимальная ширина всей электронной почты).

Кто-нибудь знает, как сделать этот отзывчивым? Таким образом, изображение получает ширину 100% в Outlook 2016 за пример. 

<!--[if mso]>
    <table border="0" cellspacing="0" cellpadding="0"><tr><td width="650">
<![endif]-->
<div style="max-width: 650px;">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td class="text-12 pb-35" style="font-size:12px; line-height:16px; color:#000001; font-family:Helvetica, Arial, sans-serif; text-align:left; min-width:auto !important; padding-bottom: 35px;">
                Kind regards,
                <br /><br />

                <strong>Lorem Ipsum</strong>
                <br />
                Lorem Ipsum
                <br /><br />

                M <a href="tel:+XXX" target="_blank" class="link c-black" style="text-decoration:none; color:#000001;"><span class="link nowrap c-black" style="text-decoration:none; white-space:nowrap; color:#000001;">+Lorem Ipsum</span></a>
            </td>
        </tr>
        <tr>
            <td class="pb-25" style="border-bottom: 1px solid #404040; padding-bottom: 25px;">
                <div class="box" style="float: left; display: inline;">
                    <table width="290" align="left" class="box-inner" valign="top" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; float: left; width: 290px;">
                        <tr>
                            <td class="img" width="290" style="font-size:0pt; line-height:0pt; text-align:left;">
                                <a href="#" target="_blank">
                                    <img src="https://placeimg.com/460/88" width="230" height="44" border="0" alt="" />
                                </a>
                            </td>
                            <td class="img" width="30" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                        </tr>
                    </table>
                </div>
                <div class="box" style="float: left; display: inline;">
                    <table align="left" class="box-inner" valign="top" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; float: left;">
                        <tr>
                            <td class="pt-20" style="padding-top: 20px;">
                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td valign="top" class="text-10 c-black l-black nowrap" nowrap="nowrap" style="font-size:10px; line-height:14px; font-family:Helvetica, Arial, sans-serif; text-align:left; min-width:auto !important; color:#000001; white-space:nowrap;">
                                            <a href="#" target="_blank" class="link" style="color:#000001; text-decoration:none;"><span class="link nowrap" style="color:#000001; text-decoration:none; white-space:nowrap;">
                                                Lorem Ipsum 1
                                                <br />
                                                Lorem Ipsum
                                            </span></a>
                                        </td>
                                        <td valign="top" class="img" width="10" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td valign="top" class="img" width="1" bgcolor="#404040" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td valign="top" class="img" width="10" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td valign="top" class="text-10 c-black l-black nowrap" nowrap="nowrap" style="font-size:10px; line-height:14px; font-family:Helvetica, Arial, sans-serif; text-align:left; min-width:auto !important; color:#000001; white-space:nowrap;">
                                            T <a href="tel:+#" target="_blank" class="link c-black" style="text-decoration:none; color:#000001;"><span class="link nowrap c-black" style="text-decoration:none; white-space:nowrap; color:#000001;">+Lorem Ipsum</span></a>
                                            <br />
                                            <a href="mailto:#" target="_blank" class="link c-black" style="text-decoration:none; color:#000001;"><span class="link nowrap c-black" style="text-decoration:none; white-space:nowrap; color:#000001;">Lorem Ipsum</span></a>
                                        </td>
                                        <td valign="top" class="img" width="10" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td valign="top" class="img" width="1" bgcolor="#404040" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td valign="top" class="img" width="10" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td valign="top" class="text-10 c-black l-black nowrap" nowrap="nowrap" style="font-size:10px; line-height:14px; font-family:Helvetica, Arial, sans-serif; text-align:left; min-width:auto !important; color:#000001; white-space:nowrap;">
                                            <a href="#" target="_blank" class="link" style="color:#000001; text-decoration:none;"><span class="link nowrap" style="color:#000001; text-decoration:none; white-space:nowrap;">Lorem Ipsum</span></a>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
        <tr>
            <td align="left" class="py-10" style="padding-top: 10px; padding-bottom: 10px;">
                <div class="box" style="float: left; display: inline;">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td class="pt-15" style="padding-top: 15px;">
                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td valign="bottom" class="img" width="158" style="font-size:0pt; line-height:0pt; text-align:left;">
                                            <a href="#" target="_blank">
                                                <!--[if mso]> 
                                                    <img src="https://placeimg.com/318/58" width="159" height="29" style="width: 100%; max-width: 159px;" border="0" alt="" />
                                                 <![endif]-->
                                                 <!--[if !mso]> <!----> 
                                                    <img src="https://placeimg.com/318/58" width="159" style="width: 100%; max-width: 159px;" border="0" alt="" />
                                                 <!-- <![endif]-->
                                            </a>
                                        </td>
                                        <td class="img" width="10" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td class="img" width="1" bgcolor="#7f7f7f" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td class="img" width="10" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td valign="bottom" class="img" width="138" style="font-size:0pt; line-height:0pt; text-align:left;">
                                            <a href="#" target="_blank">
                                                <!--[if mso]> 
                                                    <img src="https://placeimg.com/274/80" width="137" height="40" style="width: 100%; max-width: 137px;" border="0" alt="" />
                                                 <![endif]-->
                                                 <!--[if !mso]> <!----> 
                                                    <img src="https://placeimg.com/274/80" width="137" style="width: 100%; max-width: 137px;" border="0" alt="" />
                                                 <!-- <![endif]-->
                                            </a>
                                        </td>
                                        <td class="img" width="10" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td class="img" width="1" bgcolor="#7f7f7f" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td class="img" width="10" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
                                        <td valign="bottom" class="img" width="85" style="font-size:0pt; line-height:0pt; text-align:left;">
                                            <a href="#" target="_blank">
                                                <!--[if mso]> 
                                                    <img src="https://placeimg.com/170/58" width="85" height="29" style="width: 100%; max-width: 85px;" border="0" alt="" />
                                                 <![endif]-->
                                                 <!--[if !mso]> <!----> 
                                                    <img src="https://placeimg.com/170/58" width="85" style="width: 100%; max-width: 85px;" border="0" alt="" />
                                                 <!-- <![endif]-->
                                            </a>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </div>      
            </td>
        </tr>

        <tr>
            <td class="fluid-img pb-25" style="font-size:0pt; line-height:0pt; text-align:left; padding-bottom: 25px;">

                <a href="#" target="_blank">
                    <!--[if mso]>
                        <img src="https://placeimg.com/1302/332" width="651" height="166" style="width: 100%; width:100;max-width: 651px;" border="0" alt="Lore Ipsum" />
                    <![endif]-->
                    <!--[if !mso]> <!---->
                        <img src="https://placeimg.com/1302/332" width="651" style="width: 100%; max-width: 651px;" border="0" alt="Lore Ipsum" />
                    <!-- <![endif]-->

                </a>
            </td>
        </tr>

        <tr>
            <td class="text-9 c-grey" style="font-size:9px; line-height:13px; font-family:Helvetica, Arial, sans-serif; text-align:left; min-width:auto !important; color:#808080;">
                <strong>Disclaimer</strong>
                <br />
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </td>
        </tr>
    </table>
</div>
<!--[if mso]>
    </td></tr></table>
<![endif]-->
...