HTML-E-Mail-Schaltflächenausrichtung in Outlook

Question

Ich habe einige Probleme bei der Ausrichtung der Call-to-Action-Schaltflächen in einer HTML-E-Mail, die ich für einen Client erstelle. Die Schaltflächen erscheinen links und sind nicht richtig ausgefüllt.

Dies ist, wie sie in meinem Browser erscheinen und die meisten E-Mail-Clients:

Und das ist, wie sie in Outlook 2016 angezeigt:

Hier ist mein Inky Markup :

<row class="call-to-actions"> 
    <columns small="6"> 
     <spacer size="50"></spacer> 
     <button class="facebook float-right" href="#">Like on Facebook</button> 
     <spacer size="50"></spacer> 
    </columns> 
    <columns small="6"> 
     <spacer size="50"></spacer> 
     <button class="twitter" href="#">Follow on Twitter</button> 
     <spacer size="50"></spacer> 
    </columns> 
</row> 

Mein SASS für die Tasten:

table { 
    &.button { 
    table { 
     td { 
     background: transparent !important; 
     } 
    } 
    &.facebook { 
     table { 
     background-color: #3b5998; 
     td { 
      a { 
      background-color: #3b5998; 
      border: none; 
      line-height: 30px; 
      } 
     } 
     } 
    } 

    &.twitter { 
     table { 
     background-color: #1da1f2; 
     td { 
      background-color: #1da1f2; 
      a { 
      background-color: #1da1f2; 
      border: none; 
      line-height: 30px; 
      } 
     } 
     } 
    } 
    } 
} 

I Foundation for Email bin mit der Markierung nach oben in E-Mail-freundliche HTML zu kompilieren. Dies ist, wie es die generierte Ausgabe ist:

<table class="row call-to-actions" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%"> 

    <tbody> 
    <tr style="padding:0;text-align:left;vertical-align:top"> 
     <th class="small-6 large-6 columns first" 
     style="Margin:0 auto;color:#878787;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:1.6;margin:0 auto;padding:0;padding-bottom:0!important;padding-left:16px;padding-right:10px!important;text-align:left;width:274px"> 

     <table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"> 
      <tbody> 
      <tr style="padding:0;text-align:left;vertical-align:top"> 
       <th style="Margin:0;color:#878787;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:1.6;margin:0;padding:0;text-align:left"> 

       <table class="spacer" 
       style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"> 
        <tbody> 
        <tr style="padding:0;text-align:left;vertical-align:top"> 
         <td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#878787;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:50px;font-weight:400;hyphens:auto;line-height:50px;margin:0;mso-line-height-rule:exactly;padding:0;text-align:left;vertical-align:top;word-wrap:break-word" 
         height="50px"></td> 
        </tr> 
        </tbody> 
       </table> 
       <table class="button facebook float-right" 
       style="Margin:0;border-collapse:collapse;border-spacing:0;float:right;margin:0;padding:0;text-align:left;vertical-align:top;width:auto"> 

        <tbody> 
        <tr style="padding:0;text-align:left;vertical-align:top"> 
         <td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#878787;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;hyphens:auto;line-height:1.6;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word"> 

         <table style="background-color:#3b5998;border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"> 

          <tbody> 
          <tr style="padding:0;text-align:left;vertical-align:top"> 
           <td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;background:0 0!important;border:none;border-collapse:collapse!important;color:#fff;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;hyphens:auto;line-height:1.6;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word"> 

           <a href="#" 
           style="Margin:0;background-color:#3b5998;border:none;border-radius:500px;color:#fff;display:inline-block;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:30px;margin:0;padding:8px 16px 8px 16px;text-align:left;text-decoration:none"> 
           Like on Facebook</a> 
           </td> 
          </tr> 
          </tbody> 
         </table> 
         </td> 
        </tr> 
        </tbody> 
       </table> 
       <table class="spacer" 
       style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"> 
        <tbody> 
        <tr style="padding:0;text-align:left;vertical-align:top"> 
         <td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#878787;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:50px;font-weight:400;hyphens:auto;line-height:50px;margin:0;mso-line-height-rule:exactly;padding:0;text-align:left;vertical-align:top;word-wrap:break-word" 
         height="50px"></td> 
        </tr> 
        </tbody> 
       </table> 
       </th> 
      </tr> 
      </tbody> 
     </table> 
     </th> 
     <th class="small-6 large-6 columns last" 
     style="Margin:0 auto;color:#878787;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:1.6;margin:0 auto;padding:0;padding-bottom:0!important;padding-left:10px!important;padding-right:16px;text-align:left;width:274px"> 

     <table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"> 
      <tbody> 
      <tr style="padding:0;text-align:left;vertical-align:top"> 
       <th style="Margin:0;color:#878787;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:1.6;margin:0;padding:0;text-align:left"> 

       <table class="spacer" 
       style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"> 
        <tbody> 
        <tr style="padding:0;text-align:left;vertical-align:top"> 
         <td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#878787;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:50px;font-weight:400;hyphens:auto;line-height:50px;margin:0;mso-line-height-rule:exactly;padding:0;text-align:left;vertical-align:top;word-wrap:break-word" height="50px"></td> 
        </tr> 
        </tbody> 
       </table> 
       <table class="button twitter" 
       style="Margin:0;border-collapse:collapse;border-spacing:0;margin:0;padding:0;text-align:left;vertical-align:top;width:auto"> 

        <tbody> 
        <tr style="padding:0;text-align:left;vertical-align:top"> 
         <td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#878787;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;hyphens:auto;line-height:1.6;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word"> 

         <table style="background-color:#1da1f2;border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"> 

          <tbody> 
          <tr style="padding:0;text-align:left;vertical-align:top"> 
           <td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;background:0 0!important;background-color:#1da1f2;border:none;border-collapse:collapse!important;color:#fff;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;hyphens:auto;line-height:1.6;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word"> 

           <a href="#" 
           style="Margin:0;background-color:#1da1f2;border:none;border-radius:500px;color:#fff;display:inline-block;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:30px;margin:0;padding:8px 16px 8px 16px;text-align:left;text-decoration:none"> 
           Follow on Twitter</a> 
           </td> 
          </tr> 
          </tbody> 
         </table> 
         </td> 
        </tr> 
        </tbody> 
       </table> 
       <table class="spacer" 
       style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"> 
        <tbody> 
        <tr style="padding:0;text-align:left;vertical-align:top"> 
         <td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#878787;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:50px;font-weight:400;hyphens:auto;line-height:50px;margin:0;mso-line-height-rule:exactly;padding:0;text-align:left;vertical-align:top;word-wrap:break-word" height="50px"></td> 
        </tr> 
        </tbody> 
       </table> 
       </th> 
      </tr> 
      </tbody> 
     </table> 
     </th> 
    </tr> 
    </tbody> 
</table> 

Was fehlt mir?

Answer 1

Einige Ihrer Stile werden nicht von E-Mail-Clients wie Outlook unterstützt. Ich würde empfehlen, Ihren Code mit einem Werkzeug wie this zu scannen. Sie können viele Tools wie folgt finden.

Answer 2

padding Unterstützung ist mit Outlook 2007-2016 fehlerhaft. Mit Notes funktioniert es überhaupt nicht.

• https://www.campaignmonitor.com/css/box-model/padding/

line-height ist Buggy auch mit Outlook.

• https://www.campaignmonitor.com/css/text-fonts/line-height/

ich die <td height="30"> an die Eltern Ihrer href Einstellung könnten versuchen, so dass Sie Ihre Höhe für die Schaltfläche erhalten, „Like auf Facebook“.

Darüber hinaus wird font-family:'Circular Book' nicht mit Outlook funktionieren. Web-Schriftart-Unterstützung ist ebenfalls fehlerhaft. Einige Schriftarten funktionieren, aber Schriftarten mit zwei Namen, die nicht websicher sind, führen dazu, dass Outlook wieder auf die websichere Schriftart Times New Roman zurückgesetzt wird.

Viel Glück.

Answer 3

Dies ist ein sehr häufiges Problem in Outlook. Ich empfehle Bulletproof Buttons by Campaign Monitor. Es ist sehr schön Cross-Plattform und funktioniert super genial.