Письмо не отображается должным образом в Outlook - скрыть изображение на мобильном телефоне и не импортировать шрифт - PullRequest
Новая
       151

Письмо не отображается должным образом в Outlook - скрыть изображение на мобильном телефоне и не импортировать шрифт

0 голосов
/ 25 февраля 2020

Электронная почта отлично работает в Gmail и других почтовых клиентах, но в outlook ее полный беспорядок (см. Рисунок в приложении).

Я не могу понять, почему столбец сокращается в outlook

Я хочу, чтобы среднее изображение было скрыто на мобильном устройстве и отображено на рабочем столе.

Шрифт также не импортируется в Outlook.

Примите во внимание любые предложения. Спасибо за ваше время!

enter image description here

<html xmlns="http://www.w3.org/1999/xhtml" style="margin:0;padding:0;"><head>
    


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
 <meta name="x-apple-disable-message-reformatting">
    <meta name="referrer" content="no-referrer">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <title>google email</title>
  

<!--[if (mso)|(mso 16)]>
<style type="text/css">
   .fallback-text { font-family: arial narrow, sans-serif; }
   body, table, td, a, span { font-family: arial narrow, Helvetica, sans-serif !important; }
   a { text-decoration: none; }
</style>
<![endif]-->


 <style type="text/css">
@media screen {
  @font-face {
    font-family: 'RobotoCondensed-Regular';
    font-style: normal;
    font-weight: 400;
    src: local('RobotoCondensed-Regular'), local('RobotoCondensed-Regular'), url(https://fonts.gstatic.com/s/robotocondensed/v18/ieVl2ZhZI2eCN5jzbjEETS9weq8-19-7DRs5.woff2) format('woff2');
  }

  .main-header-txt {
    font-size: 40px;
    font-weight: bold;
  }

  .paragraph-txt {
  ;
    font-size: 18px;

  }

  .sub-header-txt {
    padding: 10px 10px;
    font-size: 30px;
    font-weight: bold;
    line-height: 30px;
  }

  .white-sub-header-txt {
    padding: 0;
    font-size: 30px;
    font-weight: bold;
    line-height: 30px;
    color: #ffffff;
  }

  a.links-white {
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
  }

  .nohide {
    display: none;
  }
}

@media only screen and (max-width: 640px) {
   *[class=desktop]{display:none !important;}
    *[class=mobile]{display:block !important;width:auto !important;max-height:inherit !important;overflow:visible !important;float:none !important;}
    *[class="block"]{display:block !important;padding:5px;}
  .deviceWidth {
    width: 440px !important;
    margin: 0 auto!important;
    padding: 0;
  }

  .b2-padding {
    margin: 15px 0px !important;
  }

  .center {
    text-align: center !important;
  }

  .main-header-txt {
    font-size: 40px;
    padding: 20px 10px;
    line-height: 40px;
  font-weight:bold;  
  }

  .hide {
    display: none;
  }

  .img-b2 {
    height: auto;
    width: 100%;
  }

  .white-sub-header-txt {
    padding: 0;
    font-size: 40px;
    font-weight: bold;
    line-height: 50px;
    color: #ffffff;
  }

  .nohide {
    display: block;
  }

  .paragraph-txt {

    font-size: 18px;
  }
}
</style>
  </head>

<body style="width: 100%; background-color: #ffffff; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; font-family: 'RobotoCondensed-Regular', Arial, Sans-Serif;">

<!---------------------------------------------------------------------- Header STARTS ---------------------------------------------------------------->
  <table role="presentation" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
  
   <tbody><tr>
    <td width="100%" valign="top" bgcolor="#ffffff" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
     <table width="100%" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
      
       <tbody><tr>
        <td width="100%" valign="top" bgcolor="#f8f8f8" style="padding-top: 1px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
          <table role="presentation" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
  
          
           <tbody><tr>
            <td width="100%" bgcolor="#3c3c3b" class="deviceWidth" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
             <table border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" style="border-collapse: collapse; background-color: #3c3c3b; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" bgcolor="#3c3c3b">
              
               <tbody><tr>
                <td style="padding: 10px 20px; background-color: #3c3c3b; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" class="center" bgcolor="#3c3c3b">
                 <a target="_blank" href="https://www.google.co.uk/?utm_source=%%=v(@track)=%%&amp;utm_medium=email&amp;utm_campaign=%%=v(@CampaignTracking)=%%&amp;utm_content=google-email-logo"><img src="https://dummyimage.com/120x90/000/fff" alt="google logo" border="0"></a>
                </td>
               </tr>
              
             </tbody></table>
            </td>
           </tr>
          
         </tbody></table>
         <!--header logo-->
        <table role="presentation" width="100%" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#f5f5f5" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
          
           <tbody><tr>
            <td width="100%" class="deviceWidth" align="center" valign="top" bgcolor="#f5f5f5" style="padding-top: 5px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
            </td>
           </tr>
           <tr>
            <td align="center" class="deviceWidth fallback-text" style="font-size: 16px; color: #272727; text-align: center; font-family: 'RobotoCondensed-Regular', Arial, Sans-Serif; vertical-align: middle; padding: 10px 5px 10px 5px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" valign="middle">
             <a target="_blank" href="https://www.google.co.uk/google/?utm_source=%%=v(@track)=%%&amp;utm_medium=email&amp;utm_campaign=%%=v(@CampaignTracking)=%%&amp;utm_content=google-email-menu-google" style="text-decoration:none;text-underline:none; color: #3b3b3c;">TAB1</a>
             &nbsp;&nbsp;&nbsp;&nbsp;
             <a target="_blank" href="https://www.google.co.uk/google/?utm_source=%%=v(@track)=%%&amp;utm_medium=email&amp;utm_campaign=%%=v(@CampaignTracking)=%%&amp;utm_content=google-email-menu-google" style="text-decoration:none;text-underline:none; color: #3b3b3c;">TAB2</a>
             &nbsp;&nbsp;&nbsp;&nbsp;
             <a target="_blank" href="https://www.google.co.uk/google/?utm_source=%%=v(@track)=%%&amp;utm_medium=email&amp;utm_campaign=%%=v(@CampaignTracking)=%%&amp;utm_content=google-email-menu-google" style="text-decoration:none;text-underline:none; color: #3b3b3c;">TAB3</a>
             &nbsp;&nbsp;&nbsp;&nbsp;
             <a target="_blank" href="https://www.google.co.uk/google/?utm_source=%%=v(@track)=%%&amp;utm_medium=email&amp;utm_campaign=%%=v(@CampaignTracking)=%%&amp;utm_content=google-email-menu-google" style="text-decoration:none;text-underline:none; color: #3b3b3c;">TAB1TAB2</a>
             &nbsp;&nbsp;&nbsp;&nbsp;
             <a target="_blank" href="https://www.google.co.uk/google/?utm_source=%%=v(@track)=%%&amp;utm_medium=email&amp;utm_campaign=%%=v(@CampaignTracking)=%%&amp;utm_content=google-email-menu-google" style="text-decoration:none;text-underline:none; color: red;">TAB4
            </a></td>
           </tr>
          
         </tbody></table>
        </td>
       </tr>
      
     </tbody></table>
    </td>
   </tr>
  
 </tbody></table>
<!---------------------------------------------------------------------- Header ENDS ---------------------------------------------------------------->

    
     <!--banner1-->
       
     <table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" align="center" bgcolor="#3b3b3c" style="border-collapse: collapse; background-color: #3b3b3c; width: 100%; max-width: 640px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
    
     <tbody><tr>
      <td class="mobile" align="center" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; overflow: hidden;">
       <p style="mso-table-lspace:0;mso-table-rspace:0; margin:0">
        <a target="_blank" href="https://www.google.co.uk/?utm_source=%%=v(@track)=%%&amp;utm_medium=email&amp;utm_campaign=%%=v(@CampaignTracking)=%%&amp;utm_content=Banner1-IMAGE">
         <img width="100%" max-width="640px" src="https://dummyimage.com/969x626/000/fff" alt="" border="0" style="display:block; width:100%;max-width:640px;" class="deviceWidth">
        </a>
       </p>
      </td>
     </tr>
  
  </tbody></table>
   
    <table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" align="center" bgcolor="#978B8B" style="border-collapse: collapse; width: 100%; max-width: 640px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
    
     <tbody><tr>
     
      <td colspan="3" width="100%" class="deviceWidth fallback-text" style="text-decoration: none; text-underline: none; color: #ffffff; font-weight: bold; text-align: center; font-family: 'RobotoCondensed-Regular', Arial, Sans-Serif; vertical-align: top; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" bgcolor="#978B8B" align="center" valign="top">
        <table style="border-collapse: collapse; width: auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" cellpadding="0" cellspacing="0" border="0" align="center"><tbody><tr><td height="30" style="height: 30px;  mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding:0px;"></td></tr></tbody></table>
        
      <span class="main-header-txt">
     
        <b>WRAP UP</b>
         
         </span>
          
           <table style="border-collapse: collapse; width: auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" cellpadding="0" cellspacing="0" border="0" align="center"><tbody><tr><td height="10" style="height: 10px;  mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding:0px;"></td></tr></tbody></table>
      </td>
     </tr>
     
     <tr>
     <td width="5%"></td>
      <td width="90%" style=" color: #ffffff; text-align: center; font-family: 'RobotoCondensed-Regular', Arial, Sans-Serif; line-height: 25px; vertical-align: top; font-weight: 300; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" bgcolor="#978B8B" align="center" valign="top">
      <span class="paragraph-txt">
   DummyText
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
     </span>
     </td>
       <td width="5%"></td>
     </tr>
       
          <tr height="60">
      <td colspan="3" class="fallback-text" style="font-size: 16px; color: #ffffff; text-align: center; font-family: 'RobotoCondensed-Regular', Arial, Sans-Serif; line-height: 25px; text-decoration: underline; vertical-align: top; padding: 0px 15px 15px 15px; font-weight: bold; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" line-height:50px;="" bgcolor="#978B8B" align="center" valign="top">
      
 <table style="border-collapse: collapse; width: auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" cellpadding="0" cellspacing="0" border="0" align="center"><tbody><tr><td height="20" style="height: 20px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" bgcolor="#ffffff"></td></tr></tbody></table>
 
    
   <table class="fullwidth" style="border-collapse: collapse; width: auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" cellpadding="0" cellspacing="0" border="0" align="center"><tbody><tr><td height="20" style="height: 20px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;"></td></tr></tbody></table>
      </td>
     </tr>
     
 
    
   </tbody></table>
   
   
       <!--end banner 1-->
        
        <!--spacer-->
         <table class="nohide" style="border-collapse: collapse; width: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" cellpadding="0" cellspacing="0" border="0" align="center" width="100%"><tbody><tr><td height="10" style="height: 10px; background-color: #ffffff; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" bgcolor="#ffffff"></td></tr></tbody></table>
         
         
       <!-- banner 2-->
   
   <table height="250" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#3b3b3c" style="border-collapse: collapse; margin: 10px auto; text-align: center; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
     
      <tbody><tr>
       <td class="center" style="padding: 0 0 0 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
       
        <table width="270" height="250" border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
         
          <tbody><tr>
           <td align="center" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
            <p style="mso-table-lspace:0;mso-table-rspace:0; margin:0">
             <a target="_blank" href="https://www.google.co.uk/?utm_source=%%=v(@track)=%%&amp;utm_medium=email&amp;utm_campaign=%%=v(@CampaignTracking)=%%&amp;utm_content=Split-Banner-Image1">
              <img width="270" height="250" src="https://dummyimage.com/540x500/000/fff&amp;text=left" alt="" border="0" style="display:block; background-color: #3b3b3c; align:left; text-align: center;" class="img-b2">
             </a>
            </p>
           </td>
          </tr>

        </tbody></table>
        
         <table width="100" height="250" border="0" cellpadding="0" cellspacing="0" align="left" class="hide" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
         
          <tbody><tr>
           <td align="center" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
            <p style="mso-table-lspace:0;mso-table-rspace:0; margin:0">
             <a target="_blank" href="https://www.google.co.uk/?utm_source=%%=v(@track)=%%&amp;utm_medium=email&amp;utm_campaign=%%=v(@CampaignTracking)=%%&amp;utm_content=Split-Banner-Image1">
              <img width="100" height="250" src="https://dummyimage.com/200x500/000/fff&amp;text=middle" alt="" border="0" style="display:block; background-color: #3b3b3c; align:left; text-align: center;" class="">
             </a>
            </p>
           </td>
          </tr>
    
        </tbody></table>


        <table width="270" height="250" border="0" cellpadding="0" cellspacing="0" align="right" bgcolor="#3b3b3c" class="deviceWidth" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
         
         
          <tbody><tr>
           <td width="270" align="center" class="fallback-text" style="text-align: center; font-family: 'RobotoCondensed-Regular',Arial, sans-serif; line-height: 20px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
            <br>
            <br>
           <p>new new new new new</p>
  
           </td>
          </tr>
         
         
         
         
          </tbody></table>
          
       </td>
      </tr>
     
    </tbody></table>
         
              <!--end banner 2-->   

   

 
<!--spacer-->
         <table class="nohide" style="border-collapse: collapse; width: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" cellpadding="0" cellspacing="0" border="0" align="center" width="100%"><tbody><tr><td height="10" style="height: 10px; background-color: #ffffff; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" bgcolor="#ffffff"></td></tr></tbody></table>
        

<!----------------------------------------------------------------- footer STARTS here --------------------------------------------------------------------------------->
    <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="fallback-text device" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
     
      <tbody><tr>
       <td bgcolor="#363636" style="padding: 10px 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
        <table width="100%" border="0" cellpadding="10" cellspacing="0" align="center" class="deviceWidth" style="border-collapse: collapse; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
         
          <tbody><tr>
           <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
            <table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" class="deviceWidth" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
             
              <tbody><tr>
               <td valign="top" style="font-size: 11px; color: #f1f1f1; font-weight: normal; font-family: 'RobotoCondensed-Regular',Arial, sans-serif; line-height: 26px; vertical-align: top; text-align: center; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" class="center" align="center">
               
                
              
                
                
                <br>
               </td>
              </tr>
             
            </tbody></table>
            <table border="0" class="deviceWidth" cellspacing="0" width="600" cellpadding="0" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
              <tbody><tr>
               
              </tr>
            </tbody></table>
            
               <table border="0" class="deviceWidth" cellspacing="0" width="600" cellpadding="0" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                 <tbody><tr>
                <td align="right" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                  <a target="_blank" href="https://itunes.apple.com/gb/app/apple-store/id1039829129?mt=8" style="border:0;"></a>
                </td>
                <td width="10" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;"></td>
                <td align="left" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                  <a target="_blank" href="https://play.google.com/store/apps/details?id=uk.co.google.hybrid&amp;hl=en_GB" style="border:0;"></a>
                </td>
                 </tr>
               </tbody></table>

               <table border="0" class="deviceWidth" cellspacing="0" width="600" cellpadding="0" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                 <tbody><tr>
                <td valign="top" style="text-decoration: none; text-underline: none; font-size: 11px; color: #f1f1f1; color: #999999; font-family: Arial, sans-serif; padding-bottom: 20px; text-align: center; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" class="center" align="center">
                </td>
                 </tr>
               </tbody></table>
               
            <table width="100%" cellpadding="0" cellspacing="0" border="0" align="left" class="deviceWidth" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
             
              <tbody><tr>
               <td valign="top" style="font-size: 11px; color: #f1f1f1; color: #999999; font-family: Arial, sans-serif; line-height: 15px; padding-bottom: 20px; text-align: center; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" class="center" align="center">
               g xn fcn hgch c h <span class="fallback-text" style="mso-table-lspace:0;mso-table-rspace:0; margin:0; font-size:11px; line-height: 15px; color: #999999; text-decoration: none; ">%%emailaddr%%</span>
                <br><br>
                If you do not wish to receive our newsletters, please <br><br>
               chmchmcgmn
                <span class="fallback-text" style="mso-table-lspace:0;mso-table-rspace:0; margin:0; font-size:11px; line-height: 15px; color: #999999; text-decoration: none;"><font color="#999999">mhgck</font></span> hcgv
                <br><br>
               mhgcmcg <a style="font-family:'RobotoCondensed-Regular', arial,sans-serif; text-align:center;" href="http://www.google.co.uk/h/option/terms_conditions/?utm_source=%%=v(@track)=%%&amp;utm_medium=email&amp;utm_campaign=%%=v(@CampaignTracking)=%%&amp;utm_content=google-email-termsandconditions" target="_blank"></a> &amp; <a style="font-family:'RobotoCondensed-Regular', arial,sans-serif; font-weight: normal; color: #999999; text-align:center;" href="http://www.google.co.uk/h/option/PrivacyPolicy/?utm_source=%%=v(@track)=%%&amp;utm_medium=email&amp;utm_campaign=%%=v(@CampaignTracking)=%%&amp;utm_content=google-email-privacypolicy" target="_blank"><span style="text-decoration: underline; color: #999999">
               </span></a></td>
              </tr>
             
            </tbody></table>
            
            
            
            
            
           </td>
          </tr>
         
        </tbody></table>
       </td>
      </tr>
      
      
     
    </tbody></table>



<!----------------------------------------------------------------- footer ENDS here --------------------------------------------------------------------------------->
</body></html>

Ответы [ 3 ]

2 голосов
/ 25 февраля 2020

Похоже, что вы используете только проценты для ширины, когда вы должны использовать жесткие значения пикселей для рабочего стола. Многие настольные клиенты (ОСОБЕННО Outlook) нуждаются в жестких пикселях. Ваш мобильный материал может использовать процент, поскольку все эти клиенты читают%.

В качестве примера приведена модифицированная версия одной из ваших таблиц. В нем есть жесткое значение пикселя для ширины и класс медиазапроса, который составляет ширину 100% для всего, что не является заданным размером рабочего стола. У всех ваших мобильных классов также должны быть важные ярлыки, чтобы некоторые почтовые клиенты не могли их перезаписать. 

<table role="presentation" width="640" class="wrapper" border="0" cellpadding="0" cellspacing="0" bgcolor="#f5f5f5" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
  <tr>
    <td >
      This is my text
    </td>
  </tr>
</table>

@media only screen and (max-width: 639px) {
.wrapper {
  width: 100% !important;
 }
}
1 голос
/ 26 февраля 2020

Я попытался немного исправить ваш код, и вот что я сделал:

  • Добавил таблицу-призрак вокруг кода вашей электронной почты. Таблицы-призраки используют код, аналогичный тому, который используется в строке 14 для CSS. Если Outlook 2009 и выше, покажите начало таблицы. Первый размещается после тега body. Еще один в самом конце кода (до body закрытия) для закрытия таблицы.
  • Среднее изображение скрыто с CSS в медиа-запросе. Если медиа-запрос поддерживается в любом почтовом клиенте и имеет размер экрана 640 пикселей и ниже, среднее изображение будет скрыто.
  • Веб-шрифты не поддерживаются в Outlook. Вам нужно будет использовать веб-сейф для всех перспектив. Однако, если у пользователя установлен шрифт на его компьютере, он сможет просмотреть шрифт. Вы можете найти все веб-безопасные шрифты здесь . Примечание : Comi c sans больше не доступен в iOS. 

<html xmlns="http://www.w3.org/1999/xhtml" style="margin:0;padding:0;"><head>
    


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
 <meta name="x-apple-disable-message-reformatting">
    <meta name="referrer" content="no-referrer">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <title>google email</title>
  

<!--[if (mso)|(mso 16)]>
<style type="text/css">
   .fallback-text { font-family: arial narrow, sans-serif; }
   body, table, td, a, span { font-family: arial narrow, Helvetica, sans-serif !important; }
   a { text-decoration: none; }
</style>
<![endif]-->


 <style type="text/css">
@media screen {
  @font-face {
    font-family: 'RobotoCondensed-Regular';
    font-style: normal;
    font-weight: 400;
    src: local('RobotoCondensed-Regular'), local('RobotoCondensed-Regular'), url(https://fonts.gstatic.com/s/robotocondensed/v18/ieVl2ZhZI2eCN5jzbjEETS9weq8-19-7DRs5.woff2) format('woff2');
  }

  .main-header-txt {
    font-size: 40px;
    font-weight: bold;
  }

  .paragraph-txt {
  ;
    font-size: 18px;

  }

  .sub-header-txt {
    padding: 10px 10px;
    font-size: 30px;
    font-weight: bold;
    line-height: 30px;
  }

  .white-sub-header-txt {
    padding: 0;
    font-size: 30px;
    font-weight: bold;
    line-height: 30px;
    color: #ffffff;
  }

  a.links-white {
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
  }

  .nohide {
    display: none;
  }
}

@media only screen and (max-width:640px) {
   *[class=desktop]{display:none !important;}
    *[class=mobile]{display:block !important;width:auto !important;max-height:inherit !important;overflow:visible !important;float:none !important;}
    *[class="block"]{display:block !important;padding:5px;}
  .deviceWidth {
    width: 100% !important;
    max-width:640px !important;
    margin: 0 auto!important;
    padding: 0;
  }

  .b2-padding {
    margin: 15px 0px !important;
  }

  .center {
    text-align: center !important;
  }

  .main-header-txt {
    font-size: 40px;
    padding: 20px 10px;
    line-height: 40px;
  font-weight:bold;  
  }

  .hide {
    display: none !important;
  }

  .img-b2 {
    height: auto;
    width: 100%;
  }

  .white-sub-header-txt {
    padding: 0;
    font-size: 40px;
    font-weight: bold;
    line-height: 50px;
    color: #ffffff;
  }

  .nohide {
    display: block;
  }

  .paragraph-txt {

    font-size: 18px;
  }
}
</style>
  </head>

<body style="width: 100%; background-color: #ffffff; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; font-family: 'RobotoCondensed-Regular', Arial, Sans-Serif;">

    <!--[if (gte mso 9)|(IE)]>
<table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td align="left" valign="top" width="700">
<![endif]-->
    
<!---------------------------------------------------------------------- Header STARTS ---------------------------------------------------------------->
  <table role="presentation" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;max-width:640px;">
  
   <tbody><tr>
    <td width="100%" valign="top" bgcolor="#ffffff" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
     <table width="100%" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
      
       <tbody><tr>
        <td width="100%" valign="top" bgcolor="#f8f8f8" style="padding-top: 1px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
          <table role="presentation" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
  
          
           <tbody><tr>
            <td width="100%" bgcolor="#3c3c3b" class="deviceWidth" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
             <table border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" style="border-collapse: collapse; background-color: #3c3c3b; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" bgcolor="#3c3c3b">
              
               <tbody><tr>
                <td style="padding: 10px 20px; background-color: #3c3c3b; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" class="center" bgcolor="#3c3c3b">
                 <a target="_blank" href="https://www.google.co.uk/?utm_source=%%=v(@track)=%%&amp;utm_medium=email&amp;utm_campaign=%%=v(@CampaignTracking)=%%&amp;utm_content=google-email-logo"><img src="https://dummyimage.com/120x90/000/fff" alt="google logo" border="0"></a>
                </td>
               </tr>
              
             </tbody></table>
            </td>
           </tr>
          
         </tbody></table>
         <!--header logo-->
        <table role="presentation" width="100%" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#f5f5f5" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
          
           <tbody><tr>
            <td width="100%" class="deviceWidth" align="center" valign="top" bgcolor="#f5f5f5" style="padding-top: 5px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
            </td>
           </tr>
           <tr>
            <td align="center" class="deviceWidth fallback-text" style="font-size: 16px; color: #272727; text-align: center; font-family: 'RobotoCondensed-Regular', Arial, Sans-Serif; vertical-align: middle; padding: 10px 5px 10px 5px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" valign="middle">
             <a target="_blank" href="https://www.google.co.uk/google/?utm_source=%%=v(@track)=%%&amp;utm_medium=email&amp;utm_campaign=%%=v(@CampaignTracking)=%%&amp;utm_content=google-email-menu-google" style="text-decoration:none;text-underline:none; color: #3b3b3c;">TAB1</a>
             &nbsp;&nbsp;&nbsp;&nbsp;
             <a target="_blank" href="https://www.google.co.uk/google/?utm_source=%%=v(@track)=%%&amp;utm_medium=email&amp;utm_campaign=%%=v(@CampaignTracking)=%%&amp;utm_content=google-email-menu-google" style="text-decoration:none;text-underline:none; color: #3b3b3c;">TAB2</a>
             &nbsp;&nbsp;&nbsp;&nbsp;
             <a target="_blank" href="https://www.google.co.uk/google/?utm_source=%%=v(@track)=%%&amp;utm_medium=email&amp;utm_campaign=%%=v(@CampaignTracking)=%%&amp;utm_content=google-email-menu-google" style="text-decoration:none;text-underline:none; color: #3b3b3c;">TAB3</a>
             &nbsp;&nbsp;&nbsp;&nbsp;
             <a target="_blank" href="https://www.google.co.uk/google/?utm_source=%%=v(@track)=%%&amp;utm_medium=email&amp;utm_campaign=%%=v(@CampaignTracking)=%%&amp;utm_content=google-email-menu-google" style="text-decoration:none;text-underline:none; color: #3b3b3c;">TAB1TAB2</a>
             &nbsp;&nbsp;&nbsp;&nbsp;
             <a target="_blank" href="https://www.google.co.uk/google/?utm_source=%%=v(@track)=%%&amp;utm_medium=email&amp;utm_campaign=%%=v(@CampaignTracking)=%%&amp;utm_content=google-email-menu-google" style="text-decoration:none;text-underline:none; color: red;">TAB4
            </a></td>
           </tr>
          
         </tbody></table>
        </td>
       </tr>
      
     </tbody></table>
    </td>
   </tr>
  
 </tbody></table>
<!---------------------------------------------------------------------- Header ENDS ---------------------------------------------------------------->

    
     <!--banner1-->
       
     <table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" align="center" bgcolor="#3b3b3c" style="border-collapse: collapse; background-color: #3b3b3c; width: 100%; max-width: 640px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
    
     <tbody><tr>
      <td class="mobile" align="center" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; overflow: hidden;">
       <p style="mso-table-lspace:0;mso-table-rspace:0; margin:0">
        <a target="_blank" href="https://www.google.co.uk/?utm_source=%%=v(@track)=%%&amp;utm_medium=email&amp;utm_campaign=%%=v(@CampaignTracking)=%%&amp;utm_content=Banner1-IMAGE">
         <img width="100%" max-width="640px" src="https://dummyimage.com/969x626/000/fff" alt="" border="0" style="display:block; width:100%;max-width:640px;" class="deviceWidth">
        </a>
       </p>
      </td>
     </tr>
  
  </tbody></table>
   
    <table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" align="center" bgcolor="#978B8B" style="border-collapse: collapse; width: 100%; max-width: 640px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
    
     <tbody><tr>
     
      <td colspan="3" width="100%" class="deviceWidth fallback-text" style="text-decoration: none; text-underline: none; color: #ffffff; font-weight: bold; text-align: center; font-family: 'RobotoCondensed-Regular', Arial, Sans-Serif; vertical-align: top; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" bgcolor="#978B8B" align="center" valign="top">
        <table style="border-collapse: collapse; width: auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" cellpadding="0" cellspacing="0" border="0" align="center"><tbody><tr><td height="30" style="height: 30px;  mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding:0px;"></td></tr></tbody></table>
        
      <span class="main-header-txt">
     
        <b>WRAP UP</b>
         
         </span>
          
           <table style="border-collapse: collapse; width: auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" cellpadding="0" cellspacing="0" border="0" align="center"><tbody><tr><td height="10" style="height: 10px;  mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding:0px;"></td></tr></tbody></table>
      </td>
     </tr>
     
     <tr>
     <td width="5%"></td>
      <td width="90%" style=" color: #ffffff; text-align: center; font-family: 'RobotoCondensed-Regular', Arial, Sans-Serif; line-height: 25px; vertical-align: top; font-weight: 300; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" bgcolor="#978B8B" align="center" valign="top">
      <span class="paragraph-txt">
   DummyText
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
     </span>
     </td>
       <td width="5%"></td>
     </tr>
       
          <tr height="60">
      <td colspan="3" class="fallback-text" style="font-size: 16px; color: #ffffff; text-align: center; font-family: 'RobotoCondensed-Regular', Arial, Sans-Serif; line-height: 25px; text-decoration: underline; vertical-align: top; padding: 0px 15px 15px 15px; font-weight: bold; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" line-height:50px;="" bgcolor="#978B8B" align="center" valign="top">
      
 <table style="border-collapse: collapse; width: auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" cellpadding="0" cellspacing="0" border="0" align="center"><tbody><tr><td height="20" style="height: 20px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" bgcolor="#ffffff"></td></tr></tbody></table>
 
    
   <table class="fullwidth" style="border-collapse: collapse; width: auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" cellpadding="0" cellspacing="0" border="0" align="center"><tbody><tr><td height="20" style="height: 20px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;"></td></tr></tbody></table>
      </td>
     </tr>
     
 
    
   </tbody></table>
   
   
       <!--end banner 1-->
        
        <!--spacer-->
         <table class="nohide" style="border-collapse: collapse; width: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" cellpadding="0" cellspacing="0" border="0" align="center" width="100%"><tbody><tr><td height="10" style="height: 10px; background-color: #ffffff; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" bgcolor="#ffffff"></td></tr></tbody></table>
         
         
       <!-- banner 2-->
   
   <table height="250" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#3b3b3c" style="border-collapse: collapse; margin: 10px auto; text-align: center; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
     
      <tbody><tr>
       <td class="center" style="padding: 0 0 0 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
       
        <table width="270" height="250" border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
         
          <tbody><tr>
           <td align="center" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
            <p style="mso-table-lspace:0;mso-table-rspace:0; margin:0">
             <a target="_blank" href="https://www.google.co.uk/?utm_source=%%=v(@track)=%%&amp;utm_medium=email&amp;utm_campaign=%%=v(@CampaignTracking)=%%&amp;utm_content=Split-Banner-Image1">
              <img width="270" height="250" src="https://dummyimage.com/540x500/000/fff&amp;text=left" alt="" border="0" style="display:block; background-color: #3b3b3c; align:left; text-align: center;" class="img-b2">
             </a>
            </p>
           </td>
          </tr>

        </tbody></table>
        
         <table width="100" height="250" border="0" cellpadding="0" cellspacing="0" align="left" class="hide" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
         
          <tbody><tr>
           <td align="center" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
            <p style="mso-table-lspace:0;mso-table-rspace:0; margin:0">
             <a target="_blank" href="https://www.google.co.uk/?utm_source=%%=v(@track)=%%&amp;utm_medium=email&amp;utm_campaign=%%=v(@CampaignTracking)=%%&amp;utm_content=Split-Banner-Image1">
              <img width="100" height="250" src="https://dummyimage.com/200x500/000/fff&amp;text=middle" alt="" border="0" style="display:block; background-color: #3b3b3c; align:left; text-align: center;" class="">
             </a>
            </p>
           </td>
          </tr>
    
        </tbody></table>


        <table width="270" height="250" border="0" cellpadding="0" cellspacing="0" align="right" bgcolor="#3b3b3c" class="deviceWidth" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
         
         
          <tbody><tr>
           <td width="270" align="center" class="fallback-text" style="text-align: center; font-family: 'RobotoCondensed-Regular',Arial, sans-serif; line-height: 20px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
            <br>
            <br>
           <p>new new new new new</p>
  
           </td>
          </tr>
         
         
         
         
          </tbody></table>
          
       </td>
      </tr>
     
    </tbody></table>
         
              <!--end banner 2-->   

   

 
<!--spacer-->
         <table class="nohide" style="border-collapse: collapse; width: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" cellpadding="0" cellspacing="0" border="0" align="center" width="100%"><tbody><tr><td height="10" style="height: 10px; background-color: #ffffff; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" bgcolor="#ffffff"></td></tr></tbody></table>
        

<!----------------------------------------------------------------- footer STARTS here --------------------------------------------------------------------------------->
    <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="fallback-text device" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
     
      <tbody><tr>
       <td bgcolor="#363636" style="padding: 10px 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
        <table width="100%" border="0" cellpadding="10" cellspacing="0" align="center" class="deviceWidth" style="border-collapse: collapse; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
         
          <tbody><tr>
           <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
            <table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" class="deviceWidth" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
             
              <tbody><tr>
               <td valign="top" style="font-size: 11px; color: #f1f1f1; font-weight: normal; font-family: 'RobotoCondensed-Regular',Arial, sans-serif; line-height: 26px; vertical-align: top; text-align: center; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" class="center" align="center">
               
                
              
                
                
                <br>
               </td>
              </tr>
             
            </tbody></table>
            <table border="0" class="deviceWidth" cellspacing="0" width="600" cellpadding="0" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
              <tbody><tr>
               
              </tr>
            </tbody></table>
            
               <table border="0" class="deviceWidth" cellspacing="0" width="600" cellpadding="0" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                 <tbody><tr>
                <td align="right" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                  <a target="_blank" href="https://itunes.apple.com/gb/app/apple-store/id1039829129?mt=8" style="border:0;"></a>
                </td>
                <td width="10" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;"></td>
                <td align="left" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                  <a target="_blank" href="https://play.google.com/store/apps/details?id=uk.co.google.hybrid&amp;hl=en_GB" style="border:0;"></a>
                </td>
                 </tr>
               </tbody></table>

               <table border="0" class="deviceWidth" cellspacing="0" width="600" cellpadding="0" align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                 <tbody><tr>
                <td valign="top" style="text-decoration: none; text-underline: none; font-size: 11px; color: #f1f1f1; color: #999999; font-family: Arial, sans-serif; padding-bottom: 20px; text-align: center; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" class="center" align="center">
                </td>
                 </tr>
               </tbody></table>
               
            <table width="100%" cellpadding="0" cellspacing="0" border="0" align="left" class="deviceWidth" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
             
              <tbody><tr>
               <td valign="top" style="font-size: 11px; color: #f1f1f1; color: #999999; font-family: Arial, sans-serif; line-height: 15px; padding-bottom: 20px; text-align: center; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" class="center" align="center">
               g xn fcn hgch c h <span class="fallback-text" style="mso-table-lspace:0;mso-table-rspace:0; margin:0; font-size:11px; line-height: 15px; color: #999999; text-decoration: none; ">%%emailaddr%%</span>
                <br><br>
                If you do not wish to receive our newsletters, please <br><br>
               chmchmcgmn
                <span class="fallback-text" style="mso-table-lspace:0;mso-table-rspace:0; margin:0; font-size:11px; line-height: 15px; color: #999999; text-decoration: none;"><font color="#999999">mhgck</font></span> hcgv
                <br><br>
               mhgcmcg <a style="font-family:'RobotoCondensed-Regular', arial,sans-serif; text-align:center;" href="http://www.google.co.uk/h/option/terms_conditions/?utm_source=%%=v(@track)=%%&amp;utm_medium=email&amp;utm_campaign=%%=v(@CampaignTracking)=%%&amp;utm_content=google-email-termsandconditions" target="_blank"></a> &amp; <a style="font-family:'RobotoCondensed-Regular', arial,sans-serif; font-weight: normal; color: #999999; text-align:center;" href="http://www.google.co.uk/h/option/PrivacyPolicy/?utm_source=%%=v(@track)=%%&amp;utm_medium=email&amp;utm_campaign=%%=v(@CampaignTracking)=%%&amp;utm_content=google-email-privacypolicy" target="_blank"><span style="text-decoration: underline; color: #999999">
               </span></a></td>
              </tr>
             
            </tbody></table>
            
            
            
            
            
           </td>
          </tr>
         
        </tbody></table>
       </td>
      </tr>
      
      
     
    </tbody></table>



<!----------------------------------------------------------------- footer ENDS here --------------------------------------------------------------------------------->
    
    <!--[if (gte mso 9)|(IE)]>
        </td>
    </tr>
</table>
<![endif]-->
</body></html>
1 голос
/ 25 февраля 2020

Mailchimp still (февраль 2020 г.) рекомендует использовать таблицы и изображения shim.gif для макета электронной почты. Посмотрите этот ответ для некоторой предыстории - pixel.gif, почему люди используют его?

Мы должны предположить, что почтовые клиенты используют самую отсталую систему рендеринга HTML и работают соответственно , Это может помочь вашему процессу начать как можно проще, а затем добавлять функции до тех пор, пока они не сломают вещи. 

<center>
<table border="0" cellpadding="0" cellspacing="0" align="center"
bgcolor="#f5f5f5">
  <tr><td>
    This is my text
    <img src="https://my_website/trans.gif" width="640" height="1">
  </td></tr>
</table>
</center>

Как ни круто, это должно дать вам столбец шириной 640 пикселей.

ради безопасности также стоит хранить строки длиной до 79 символов:

Каждая строка символов ДОЛЖНА быть не более 998 символов и ДОЛЖНА быть не более 78 символов, исключая CRLF.

RFC2822 https://tools.ietf.org/html/rfc2822#page -6

...