1. Zuhause
  2. Frage und Antwort
  3. Absolute Positionierung in Google Mail-E-Mails

Absolute Positionierung in Google Mail-E-Mails

2010-08-04 4 views
34

Ich habe einen Kunden, der Geschenkgutscheine an Personen senden möchte, die sich auf ihrer Website anmelden. Sie wollen, dass alles so gestaltet ist, dass ich nicht einfach eine Text-E-Mail senden kann. Ich versuche, Text über das Bild zu positionieren, damit es immer noch dynamisch sein kann.Absolute Positionierung in Google Mail-E-Mails

Ich versuche, dies mit absoluter Positionierung zu tun. Einige E-Mail-Systeme lieben es. Manche hassen es. Gmail hasst es.

Wir verwenden MailChimp für die Kampagne. Hier ist die vollständige Quelle der E-Mail. Danach ist nur das Snippet, das nicht funktioniert.

<html> 
    <head> 
     <!-- This is a simple example template that you can edit to create your own custom templates --> 
     <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
     <title>*|MC:SUBJECT|*</title> 

    <style type="text/css">body{background-color:#bab145;text-align:center;}#layout{border:5px solid #999999;background:#ffffff;margin:10px auto;text-align:left;}#header{background-color:#cccccc;padding:0px;color:#333333;font-size:30px;font-family:Georgia;text-align:left;}#content{font-size:13px;color:#4d4d4d;font-family:Helvetica;line-height:1.25em;padding:10px 30px;}.primary-heading{font-size:28px;font-weight:bold;color:#8b0000;font-family:Georgia;line-height:150%;margin:25px 0 0 0;}.secondary-heading{font-size:20px;font-weight:bold;color:#000000;font-style:normal;font-family:Georgia;margin:25px 0 5px 0;}#footer{background-color:#eeeeee;border-top:0px none #ffffff;padding:20px;font-size:10px;color:#333333;line-height:100%;font-family:Verdana;}#footer a{color:#800000;text-decoration:underline;font-weight:normal;}a,a:link,a:visited{color:#800000;text-decoration:underline;font-weight:normal;}</style></head> 
    <body style="background-color: #bab145;text-align: center;"> 
     <table id="layout" border="0" cellspacing="0" cellpadding="0" width="600" style="border: 5px solid #999999;background: #ffffff;margin: 10px auto;text-align: left;"> 


      <tr> 
       <td id="content" style="font-size: 13px;color: #4d4d4d;font-family: Helvetica;line-height: 1.25em;padding: 10px 30px;"><div style="height:243px; width: 500px; position: relative;"> 
<img src="http://getfreepellets.com/images/GC_flat.jpg" style="position: absolute;"> 
    <div style="position: absolute; top: 110px; left: 130px;"> 
     *|FNAME|* *|LNAME|*</div> 
    <div style="position: absolute; top: 140px; left: 130px;"> 
     GetFreePellets.com</div> 
    <div style="position: absolute; top: 166px; left: 130px;"> 
     $100</div> 
    <div style="position: absolute; top: 200px; left: 370px;"> 
     *|COUPONCODE|*</div> 
</div> 
</td></tr> 

      <tr> 
       <td id="footer" style="background-color: #eeeeee;border-top: 0px none #ffffff;padding: 20px;font-size: 10px;color: #333333;line-height: 100%;font-family: Verdana;"> 
        <p><a href="*|ARCHIVE|*" class="adminText" style="color: #800000;text-decoration: underline;font-weight: normal;">view email in browser</a> | <a href="*|UNSUB|*" style="color: #800000;text-decoration: underline;font-weight: normal;">Unsubscribe</a> *|EMAIL|* | <a href="*|UPDATE_PROFILE|*" style="color: #800000;text-decoration: underline;font-weight: normal;">Update your profile</a> | <a href="*|FORWARD|*" style="color: #800000;text-decoration: underline;font-weight: normal;">Forward to a friend</a></p> 

        <p>*|LIST:DESCRIPTION|*</p> 

        <p>*|HTML:LIST_ADDRESS_HTML|*</p> 
        <p>Copyright (C) *|CURRENT_YEAR|* *|LIST:COMPANY|* All rights reserved.</p> 
       </td> 
      </tr> 
     </table> 
     <span style="padding: 0px;"></span> 
    <center><table width="95%" style="clear:both;margin:0px !important;padding:0px !important;margin-top:20px !important;border-top:1px solid #999 !important;border-bottom:1px solid #999 !important;" cellpadding="0" cellspacing="0"><tr> 
    <td align="left" style="padding:10px !important;margin:0px !important;color:#666 !important;background:#CCC !important;width:50% !important;border-bottom 1px solid #999 !important;font-family:Verdana,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;vertical-align:middle !important;text-align:left !important;"> 
     Sent to *|EMAIL|*. <a href="*|UNSUB|*" style="font-family:Verdana,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;color:#03C !important;">Unsubscribe</a> | 
     <a href="*|UPDATE_PROFILE|*" style="font-family:Verdana,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;color:#03C !important;">Update Profile</a> | 
     <a href="*|FORWARD|*" style="font-family:Verdana,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;color:#03C !important;">Forward to a Friend</a> 
    </td> 
    <td align="right" style="padding:10px !important;margin:0px !important;color:#666 !important;background:#CCC !important;width:50% !important;border-bottom 1px solid #999 !important;vertical-align:middle !important;text-align:right !important;"> 
     *|REWARDS|* 
    </td> 
</tr></table></center></body> 
</html>

Und gerade das Snippet Ich mache mir Sorgen um:

<tr> 
       <td id="content" style="font-size: 13px;color: #4d4d4d;font-family: Helvetica;line-height: 1.25em;padding: 10px 30px;"><div style="height:243px; width: 500px; position: relative;"> 
<img src="http://getfreepellets.com/images/GC_flat.jpg" style="position: absolute;"> 
    <div style="position: absolute; top: 110px; left: 130px;"> 
     *|FNAME|* *|LNAME|*</div> 
    <div style="position: absolute; top: 140px; left: 130px;"> 
     GetFreePellets.com</div> 
    <div style="position: absolute; top: 166px; left: 130px;"> 
     $100</div> 
    <div style="position: absolute; top: 200px; left: 370px;"> 
     *|COUPONCODE|*</div> 
</div> 
</td></tr>

Hinweis: MailChimp fusionieren Variablen die Dinge zwischen sind | und |.

Hier ist ein Bild von dem, wie es in Entourage aussieht. Der rote Balken ist ein richtiger Name, so .. ya: Email working http://img.skitch.com/20100804-m91tny1ck75adfibga6cundcxr.jpg

Und hier ist es in gmail (Ich weiß, dass der Name zensiert nicht): Email not working http://img.skitch.com/20100804-rfrb1fejjubqr4id56yq1xihdp.jpg

Alle Ideen, wie diese Funktion zu erhalten in Google Mail?

Quelle

2010-08-04 hookedonwinter

+4

Ein Kommentar zu diesem Thema: Eine Menge der Leute, die scheinen zu denken, dass Yahoo, Google Mail usw. dies tun, weil sie faul/gemein sind :). Tatsächlich verhindern sie viele XSS-Angriffe und positionieren Angriffe. Deshalb entfernen sie diese Tags – MJB

+0

@MJB, Was ist ein Positionsangriff? – Jonah

+0

Sie überlagern etwas anderes, so dass es koscher aussieht, aber etwas Unerwartetes tut, wenn der Benutzer aktiviert – MJB

Antwort

38

Leider können Sie position: absolute nicht verwenden.

Da Outlook den Word-HTML-Renderer verwendet, treten auch Probleme bei der absoluten Positionierung auf.

Die meisten HTML-E-Mails sind mit Tabellen ausgelegt.

Check this out.

Quelle

2010-08-04 06:47:55 alex

+1

Ich hoffte wirklich, dass das nicht die Antwort war .. :) Sie können auch keine Hintergrundbilder verwenden, richtig? Also konnte ich nicht einfach einen Tisch mit dem bg dieses Bildes machen. Danke für den Link. – hookedonwinter

+2

+1, dass Link für jeden, der über das programmatische Versenden von E-Mails (und deren Chefs) nachdenkt, erforderlich sein sollte. – slebetman

+0

@slebetman hat es einfach an meinen Chef geschickt – hookedonwinter

3

Ich würde vorschlagen, die ganze Sache als Tabelle (Div-Unterstützung ist nicht 100% zuverlässig in E-Mail-Clients). Verwenden Sie Rahmeneigenschaften, um der Tabelle den grünen Rahmen zu geben. Fügen Sie das Bild des Logos/Banners in die erste Zeile der Tabelle ein (drei Spalten zusammengeführt). Verwenden Sie die nächsten drei Zeilen für "An", "Von" und "Betrag" (mit den Werten in der zusammengeführten zweiten und dritten Spalte). Und verwende die letzte Spalte der letzten Zeile für den Cupon-Code.

Wenn Sie wirklich die doppelte Grenze wollen, dann können Sie entweder die Tabelle in ein div wickeln oder für maximale Kompatibilität, wickeln Sie die Tabelle in einer 1 Spalte, 1 Zeile Tabelle.

Ja, es ist hässlich, aber E-Mail-Clients haben extrem fehlerhafte und/oder alte Implementierungen von HTML, so dass dies nicht die Zeit oder der Ort ist, um sich über hässlichen, nicht web2.0-Code zu wühlen.

Siehe den Link von Alex für weitere Informationen gepostet.

Quelle

2010-08-04 07:09:10 slebetman

+0

Gute Idee. Ich werde es versuchen. Ich könnte einfach Bilder mit php on the fly machen .. Oder sagen Sie ihnen, friggin Text zu verwenden und seien Sie froh, dass sie können. – hookedonwinter

1

(Ich weiß, ich antworte 4 Jahre später ... aber wahrscheinlich wird es jemandem helfen ...) Wenn Sie genau hinsehen, haben Sie keine Hintergrundbilder, Sie haben möglicherweise 10 Bilder oder mehr, viele Hintergrundfarben und eine komplexe Tabelle.

Es gibt kein Bild hinter einem Text. Sie können Ihre Tabelle teilen und Ihr Hintergrundbild als mehrere Bildfragmente zusammenstellen und die Hintergrundfarbe des Textes mit diesen Bildern vergleichen.

Wirklich ...In dieser Vorlage gibt es keine "erforderlichen" Hintergrundbilder, nur eine komplexe Tabelle.

Quelle

2014-10-16 05:10:50

 Verwandte Themen

  • Keine verwandten Themen^_^