Responsive E-Mail-Bereich Outlook-Problem

Question

Nach 3 Tagen des Aufbaus von Newslettern für Kunden stieß ich auf ein Problem. Ich habe einen Abschnitt mit einem Bild auf der linken Seite und etwas Text auf der rechten Seite gemacht. This is what it looks like

Und das ist der Code:

<div class="column narrow" style="text-align: left; color: 
     #430861; font-size: 16px; line-height: 24px; font-family: Open 
     Sans,sans-serif; Float: left; max-width: 320px; min-width: 200px; width: 
     320px; width: calc(72200px - 12000%)"> 

     <div style="font-size: 12px; font-style: normal; font-weight: 
     normal" align="center"> 
      <img class="gnd-corner-image gnd-corner-image-center 
     gnd-corner-image-top gnd-corner-image-bottom" style="border: 0; display: 
     block; height: auto; width: 100%; max-width: 397px" width="200" 
       src="http://i1.cmail20.com/ei/j/66/2D8/3C7/174211/temp_import/csfinal/AfbeeldingenVCCmailing-05.jpg"> 
     </div> 

    </div> 

    <div class="column wide" style="text-align: left; color: 
     #430861; font-size: 16px; line-height: 24px; font-family: Open 
     Sans,sans-serif; Float: left; max-width: 400px; min-width: 320px; width: 
     320px; width: calc(8000% - 47600px)"> 

     <div style="Margin-left: 20px; Margin-right: 20px; 
     Margin-top: 12px"> 
      <div style="line-height: 4px; font-size: 1px">&nbsp;</div> 
     </div> 

     <div style="Margin-left: 20px; Margin-right: 20px; 
     Margin-bottom: 12px"> 
      <h2 class="size-16" style="Margin-top: 0; Margin-bottom: 0; 
     font-style: normal; font-weight: normal; color: #430861; font-size: 
     16px; line-height: 24px" lang="x-size-16"><span style="color: 
     #ffffff"><strong>WE ARE ARRIVING SOON!</strong><br> 
     Lashing + Securing will be fully available in<br> 
     Q4&nbsp;2017</span></h2> 
     </div> 


    </div> 
</div> 

Es sieht gut aus auf jedem Handy, außer auf dem Nexus 5 und es ist terrible auf Outlook (alle Versionen, Desktop und web)

Weiß jemand, wie man das für Outlook und für das Nexus 5 repariert?

Mehr Informationen:

• Die Breite 600px sein muss.
• Die Bilder sollten auf der linken Seite und der Text auf der rechten Seite sein.

Ich würde Ihre Hilfe sehr schätzen.

Answer 1

Zuerst für Newsletter, verwenden <table>, <tr> und <td>, wenn Sie nicht tun, dass, wirst du viele Probleme haben, auf vielen Geräten/Webmail usw. Tatsächlich sind die meisten der E-Mailing 600px sein muss, Mit dieser Breite werden Sie auch einige Probleme vermeiden.

Zweitens keine Klasse verwenden, bevorzugen reiner Inline-CSS wie: style="font-size:16px;"

Drittens Meiner Meinung nach, sollten Sie Lackmus und EmailOnAcid Websites und Foren (und Stackoverflow natürlich) überprüfen, und vielleicht sollten Sie versuchen, die MailTester-Tools von EmailOnAcid. Ich habe es in meiner Firma, es ist wirklich nützlich!

Schließlich ist hier eine (sehr kurz) Beispiel für einen Code, den Sie verwenden können, ist es ein Teil einer Vorlage verwende ich: https://jsfiddle.net/6tq8ufdr/

<table bgcolor="#fff" width="100%" height="100%" cellpadding="0" cellspacing="0" border="0" style="margin:0 auto;"> 
    <tbody> 
     <tr> 
      <td align="center" bgcolor="#ebf9ff"> 
       <table cellpadding="0" cellspacing="0" border="0"> 
        <tbody>          
         <tr bgcolor="#ffffff"> 
          <td height="200" width="600"> 
           <table cellpadding="0" cellspacing="0" border="0"> 
            <tbody> 
             <tr> 
              <td height="200" width="200" valign="middle" align="center" style="height:200px;"> 
               <img style="display:block;" src="http://del.h-cdn.co/assets/cm/15/10/54f682bbc4bc5_-_cooked-bacon-de-cp.jpg" alt="bacon"/> 
              </td> 
              <td height="200" width="15"></td> // because margin and padding won't work properly on many webmail (Outlook too) 
              <td height="200" width="370" valign="middle" align="left" style="height:200px;">       <p>Ut sagittis nulla at arcu pretium maximus. Morbi ut turpis tincidunt, scelerisque massa eget, rutrum lectus. Aenean sed ullamcorper leo. Quisque lacus dolor, tristique id mollis pellentesque, tempus ut augue. Cras mauris ipsum, molestie sit amet eros vel, tempus rutrum odio. Pellentesque consectetur quam non nisl vulputate euismod. Integer quis magna nec urna malesuada efficitur.</p> 
              </td> 
              <td height="200" width="15"></td> // because margin and padding won't work properly on many webmail (Outlook too) 
             </tr> 
            </tbody> 
           </table> 
          </td> 
         </tr>                       
        </tbody> 
       </table> 
      </td> 
     </tr> 
    </tbody> 
</table> 

der <head> usw. Vergessen Sie nicht