Исправить код рассылки для правильной работы в Outlook - PullRequest
Новая
       9

Исправить код рассылки для правильной работы в Outlook

0 голосов
/ 16 января 2019

Я прошу помощи, чтобы исправить код бюллетеня для правильной работы на рабочем столе Outlook. Он отлично работает в других электронных письмах, даже в Outlook Mobile. В outlook рабочий стол портит большую часть новостной рассылки. Я также открыт для других предложений по созданию информационных бюллетеней для правильной работы на рабочем столе Outlook.

Вот код: 

<style type="text/css">
* {
    -webkit-font-smoothing: antialiased;
}
body {
    Margin: 0;
    padding: 0;
    min-width: 100%;
    font-family: Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    mso-line-height-rule: exactly;
}
table {
    border-spacing: 0;
    color: #333333;
    font-family: Arial, sans-serif;
}
img {
    border: 0;
}
.wrapper {
    width: 100%;
    table-layout: fixed;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
.webkit {
    max-width: 600px;
}
.outer {
    Margin: 0 auto;
    width: 100%;
    max-width: 600px;
}
.full-width-image img {
    width: 100%;
    max-width: 600px;
    height: auto;
}
.inner {
    padding: 10px;
}
p {
    Margin: 0;
    padding-bottom: 10px;
}
.h1 {
    font-size: 21px;
    font-weight: bold;
    Margin-top: 15px;
    Margin-bottom: 5px;
    font-family: Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.h2 {
    font-size: 18px;
    font-weight: bold;
    Margin-top: 10px;
    Margin-bottom: 5px;
    font-family: Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.one-column .contents {
    text-align: left;
    font-family: Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.one-column p {
    font-size: 14px;
    Margin-bottom: 10px;
    font-family: Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.two-column {
    text-align: center;
    font-size: 0;
}
.two-column .column {
    width: 100%;
    max-width: 300px;
    display: inline-block;
    vertical-align: top;
}
.contents {
    width: 100%;
}
.two-column .contents {
    font-size: 14px;
    text-align: left;
}
.two-column img {
    width: 100%;
    max-width: 300px;
    height: auto;
}
.two-column .text {
    padding-top: 10px;
}
.three-column {
    text-align: center;
    font-size: 0;
    padding-top: 10px;
    padding-bottom: 10px;
}
.three-column .column {
    width: 100%;
    max-width: 200px;
    display: inline-block;
    vertical-align: top;
}
.three-column .contents {
    font-size: 14px;
    text-align: center;
}
.three-column img {
    width: 100%;
    max-width: 180px;
    height: auto;
}
.three-column .text {
    padding-top: 10px;
}
.img-align-vertical img {
    display: inline-block;
    vertical-align: middle;
}
@media only screen and (max-device-width: 480px) {
table[class=hide], img[class=hide], td[class=hide] {
    display: none !important;
}
.contents1 {
    width: 100%;

</style>
<!--[if (gte mso 9)|(IE)]>
    <style type="text/css">
        table {border-collapse: collapse !important;}
    </style>
    <![endif]-->
</head>

<body style="Margin:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;min-width:100%;background-color:#f3f2f0;">
<center class="wrapper" style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background-color:#f3f2f0;">
  <table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#f3f2f0;" bgcolor="#f3f2f0;">
    <tr>
      <td width="100%"><div class="webkit" style="max-width:600px;Margin:0 auto;"> 

          <!--[if (gte mso 9)|(IE)]>

                        <table width="100" align="left" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0" >
                            <tr>
                                <td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
                                <![endif]--> 

          <!-- ======= start main body ======= -->
          <table class="outer" align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;Margin:0 auto;width:100%;max-width:600px;">
            <tr>
              <td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;"><!-- ======= start header ======= -->

                <table border="0" width="100%" cellpadding="0" cellspacing="0"  >
                  <tr>
                    <td><table style="width:100%;" cellpadding="0" cellspacing="0" border="0">
                        <tbody>
                          <tr>
                            <td align="center"><center>
                                <table border="0" align="center" width="100%" cellpadding="0" cellspacing="0" style="Margin: 0 auto;">
                                  <tbody>
                                    <tr>
                                      <td class="one-column" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" bgcolor="#FFFFFF"><!-- ======= start header ======= -->

                                        <table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#f3f2f0">
                                          <tr>
                                            <td class="two-column" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;text-align:left;font-size:0;" >&nbsp;</td>
                                          </tr>
                                          <tr>
                                            <td>&nbsp;</td>
                                          </tr>
                                        </table></td>
                                    </tr>
                                  </tbody>
                                </table>
                              </center></td>
                          </tr>
                        </tbody>
                      </table></td>
                  </tr>
                </table>

                <!-- ======= end header ======= --> 

                <!-- ======= start two column ======= -->
                <table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#FFFFFF"  style=" border-left:1px solid #e8e7e5; border-right:1px solid #e8e7e5">
                  <tr>
                    <td background="https://gallery.mailchimp.com/444a837423b315d2d2f73a03c/images/8ed1174a-8cea-49a4-8010-0c48fb55f96f.png" bgcolor="#000000" width="600" height="240" valign="top" align="center" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;text-align:center;font-size:0" 
class="two-column"><!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:260px;">
    <v:fill type="tile" src="https://gallery.mailchimp.com/444a837423b315d2d2f73a03c/images/8ed1174a-8cea-49a4-8010-0c48fb55f96f.png" color="#1f3ca6" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
                      <div>
                        <!--[if (gte mso 9)|(IE)]>
                                                    <table width="50%" style="border-spacing:0" >
                                                    <tr>
                                                    <td width="50%" valign="top" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
                                                    <![endif]-->
                        <div class="column" style="width:100%;max-width:299px;display:inline-block;vertical-align:top;">
                          <table width="100%" style="border-spacing:0">
                            <tr>
                              <td class="inner" style="padding-top:20px;padding-bottom:10px; padding-right:10px;padding-left:30px;"><table class="contents1" style="border-spacing:0; width:100%">
                                <tr>
                                  <td   align="center" valign="middle" style="padding-top:20px; padding-right:30px"><p style="font-size:30px; text-decoration:none; color:#ffffff; font-family: Verdana, Geneva, sans-serif; text-align:left">&nbsp;</p>
                                    <p style="font-size:30px; text-decoration:none; color:#ffffff; font-family: Verdana, Geneva, sans-serif; text-align:left"><strong>Agenda Internacional</strong></p>
                                    <p style="font-size:14px; text-decoration:none; color:#ffffff; font-family: Verdana, Geneva, sans-serif; text-align:left; line-height:18px">Semana de 18 a 22 Fevereiro 2019</p></td>
                                </tr>
                              </table></td>
                            </tr>
                          </table>
                        </div>
                        <!--[if (gte mso 9)|(IE)]>
                                                    </td><td width="50%" valign="top" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
                                                    <![endif]-->
                        <div class="column" style="width:100%;max-width:299px;display:inline-block;vertical-align:top;"></div>
                        <!--[if (gte mso 9)|(IE)]>
                                                    </td>
                                                    </tr>
                                                    </table>
                                                    <![endif]-->
                      </div>
                      <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]--></td>
                  </tr>
                </table>                <!-- ======= end two column ======= -->

1 Ответ

0 голосов
/ 16 января 2019

В настоящее время у вас есть одно изображение в качестве фона для двух ячеек таблицы. Вместо того, чтобы бороться против себя, разбейте изображение на две части. Не похоже, что второе изображение должно быть на заднем плане. Для этого создайте таблицу с двумя ячейками 

<table>
  <tr>
    <td>Agenda Internacional</td>
    <td>*corporate logo*</td>
  </tr>
<table>

Сделав это, вы можете добавить класс, чтобы в мобильном устройстве правая ячейка таблицы располагалась ниже левой. В настоящее время в почтовых клиентах, таких как Outlook для IOS, iPhone X, правая ячейка находится за пределами экрана.

В gmail и других почтовых клиентах фон повторяется. Вы должны добавить background-repeat: no-repeat;.

Хороший шаблон электронной почты, которым нужно следовать для создания более динамичных новостных рассылок, - это Cerberus. Еще одна хорошая шаблонная среда - Zurb Foundation for Email. Он также имеет HTML для компонента сайта. Я предлагаю вам скачать один из них и использовать его в качестве базы. Я думаю, вы получите гораздо лучший продукт.

Удачи.

...