Absolute Positionierung in Google Mail-E-Mails
Ich habe einen Kunden, der senden will, Geschenkgutscheine für Menschen, die sich auf Ihrer Website. Sie wollen alles heraus entworfen, so kann ich nicht senden Sie einfach eine text-E-Mail. Ich versuche, die position von text über das Bild, so dass es noch dynamischer.
Ich versuche, dies zu tun mit einer absoluten Positionierung. Einige E-Mail-Systeme, die es lieben. Manche hassen es. Gmail passiert, es zu hassen.
Verwenden wir MailChimp für die Kampagne. Hier ist die vollständige Quelle der E-Mail. Folgende, die 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 nur das snippet, ich bin besorgt:
<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 die Dinge zwischen | und |.
Hier ist ein Bild von dem, was es sieht aus wie in Entourage. Die rote bar ist ein echter name, also.. ya:
E-Mail-arbeiten http://img.skitch.com/20100804-m91tny1ck75adfibga6cundcxr.jpg
Und hier ist es in Google Mail (ich weiß den Namen nicht zensiert):
E-Mail funktioniert nicht http://img.skitch.com/20100804-rfrb1fejjubqr4id56yq1xihdp.jpg
Irgendwelche Ideen auf, wie man diese Arbeit in gmail?
InformationsquelleAutor der Frage hookedonwinter | 2010-08-04
Du musst angemeldet sein, um einen Kommentar abzugeben.
Kann man leider nicht verwenden
position: absolute
.Auch, weil Outlook den Word-HTML-renderer, werden Sie auch Probleme mit der Verwendung von absoluter Positionierung.
Meisten HTML-E-Mails angelegt werden, mit Tabellen.
Check this out.
InformationsquelleAutor der Antwort alex
Ich würde vorschlagen, macht die ganze Sache als eine Tabelle (div-Unterstützung ist nicht 100% zuverlässig in der E-Mail-clients). Verwenden Sie border-Eigenschaften geben Sie der Tabelle die grüne Grenze. Fügen Sie das Bild von dem logo/banner in der ersten Zeile der Tabelle (verschmolzen mit drei Spalten). Verwenden Sie die nächsten 3 Zeilen für An, Aus und Höhe (mit den Werten der zusammengeführten zweite und Dritte Spalte). Und die Letzte Spalte der letzten Zeile des cupon-code.
Wenn Sie wirklich wollen, den doppelten Rahmen, Sie können dann entweder wickeln Sie die Tabelle in ein div oder für maximale Kompatibilität, wickeln Sie die Tabelle in 1 Spalte, 1 Zeile Tabelle.
Ja es ist hässlich aber E-Mail-clients extrem buggy und/oder alte Implementierungen von HTML, so ist dies nicht die Zeit oder Ort zu sein squirmish zu hässlich, nicht-web2.0-code suchen.
Sehen den link gepostet von alex für mehr info.
InformationsquelleAutor der Antwort slebetman
Dieser hat einen trick für mich:
http://blog.rebelmail.com/absolute-positioning-in-email/
Bitte beachten Sie, dass ist nicht eine narrensichere Lösung. Ich hatte einige Probleme mit Outlook und brauchen, um es zu deaktivieren.
InformationsquelleAutor der Antwort panec
(Ich weiß, ich bin zu beantworten, 4 Jahre später... aber wahrscheinlich wird es helfen, jemand,...)
Wenn Sie genau hinsehen, werden Sie nicht haben, hintergrund-Bilder, Sie haben möglicherweise 10 oder mehr Bilder, viele hintergrund-Farben und einer komplexen Tabelle.
Es gibt kein Bild hinter einem text. Sie könnten teilen Sie Ihre Tabelle, und erstellen Sie Ihr Hintergrundbild als mehrfach-Bild-Fragmente, und passen Sie die text hintergrund Farbe mit diesen Bildern.
Wirklich... in dieser Vorlage gibt es keine "erforderlich" hintergrund-Bilder, nur eine komplexe Tabelle.
InformationsquelleAutor der Antwort Beto Aveiga