wake-up-neo.net

Absolute Positionierung in Google Mail-E-Mails

Ich habe einen Kunden, der Geschenkgutscheine an Personen senden möchte, die sich auf ihrer Website anmelden. Sie möchten, dass alles so aussieht, dass ich nicht einfach eine Text-E-Mail senden kann. Ich versuche, Text über dem Bild zu positionieren, damit es noch dynamisch sein kann.

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

Wir verwenden MailChimp für die Kampagne. Hier ist die vollständige Quelle der E-Mail. Dem zu folgen ist nur der Ausschnitt, der 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 nur der Ausschnitt, um den ich mir Sorgen mache:

<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-Merge-Variablen sind solche Dinge zwischen | und | .

Hier ist ein Bild davon, wie es in Entourage aussieht. Der rote Balken ist ein echter Name, also ... ya: E-Mail funktioniert http://img.skitch.com/20100804-m91tny1ck75adfibga6cundcxr.jpg

Und hier ist es in Google Mail (ich weiß, der Name wird nicht zensiert): E-Mail funktioniert nicht http://img.skitch.com/20100804-rfrb1fejjubqr4id56yq1xihdp.jpg

Irgendwelche Ideen, wie dies in Google Mail funktioniert?

44
hookedonwinter

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 angelegt.

Check this out .

51
alex

Ich würde vorschlagen, das Ganze als Tabelle zu machen (div-Support ist in E-Mail-Clients nicht zu 100% zuverlässig). Verwenden Sie die 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 3 Zeilen für An, Von und Betrag (mit den Werten in der zusammengeführten zweiten und dritten Spalte). Und verwenden Sie die letzte Spalte der letzten Zeile für den Gutscheincode.

Wenn Sie den doppelten Rahmen wirklich wollen, können Sie die Tabelle entweder in ein div umbrechen oder für maximale Kompatibilität die Tabelle in eine Tabelle mit 1 Spalte und 1 Zeile umbrechen.

Ja, es ist hässlich, aber E-Mail-Clients haben extrem fehlerhafte und/oder alte HTML-Implementierungen. Daher ist dies nicht der richtige Zeitpunkt, um sich über hässlichen Code zu streiten, der nicht wie Web 2.0 aussieht.

Siehe den von alex geposteten Link für weitere Informationen.

3
slebetman

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

Hinter einem Text befindet sich kein Bild. Sie können Ihre Tabelle aufteilen und Ihr Hintergrundbild als mehrere Bildfragmente zusammenstellen und die Hintergrundfarbe des Texts mit diesen Bildern abgleichen.

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

2
Beto Aveiga

Dies hat einen Trick für mich getan: http://blog.rebelmail.com/absolute-positioning-in-email/

Bitte beachten Sie, dass dies keine narrensichere Lösung ist. Ich hatte einige Probleme mit Outlook und muss es deaktivieren.

0
panec