1. Dom
  2. Pytanie i odpowiedź
  3. Bezwzględne pozycjonowanie wiadomości e-mail w Gmailu

Bezwzględne pozycjonowanie wiadomości e-mail w Gmailu

2010-08-04 16 views
34

Mam klienta, który chce przesyłać certyfikaty podarunkowe osobom, które zarejestrują się w swojej witrynie. Chcą, aby wszystko zostało zaprojektowane, więc nie mogę po prostu wysłać e-maila z tekstem. Próbuję umieścić tekst nad obrazem, aby nadal mógł być dynamiczny.Bezwzględne pozycjonowanie wiadomości e-mail w Gmailu

Próbuję to zrobić z absolutnym pozycjonowaniem. Niektóre systemy pocztowe to uwielbiają. Niektórzy go nienawidzą. Gmail go nienawidzi.

Używamy MailChimp dla kampanii. Oto pełne źródło wiadomości e-mail. Następuje po prostu fragment, który nie działa.

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

I tylko urywek martwię:

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

Uwaga: MailChimp łączyć zmienne są te rzeczy między | i |.

Oto obraz tego, jak to wygląda w Entourage. Czerwony pasek to prawdziwe nazwisko, więc .. ya: Email working http://img.skitch.com/20100804-m91tny1ck75adfibga6cundcxr.jpg

I tu jest to w gmail (wiem, że nazwa nie została ocenzurowana): Email not working http://img.skitch.com/20100804-rfrb1fejjubqr4id56yq1xihdp.jpg

Wszelkie pomysły, w jaki sposób uzyskać tej pracy w Gmailu?

Źródło

2010-08-04 hookedonwinter

+4

komentarz na temat tego: Wiele osób zamieszczających wydaje się, że Yahoo, Gmail itp to zrobić, ponieważ są leniwi/myśli :). W rzeczywistości uniemożliwiają one wiele ataków XSS i ataków pozycji. Dlatego usuwają te znaczniki – MJB

+0

@MJB, Co to jest atak pozycji? – Jonah

+0

Nakładasz coś innego, więc wygląda na koszerne, ale robi coś nieoczekiwanego, gdy aktywuje użytkownika – MJB

Odpowiedz

38

Niestety, nie można użyć position: absolute.

Ponadto, ponieważ program Outlook korzysta z programu renderującego HTML Worda, występują również problemy z wykorzystaniem pozycjonowania bezwzględnego.

Większość wiadomości e-mail w formacie HTML jest umieszczonych w tabelach.

Check this out.

Źródło

2010-08-04 06:47:55 alex

+1

Naprawdę miałem nadzieję, że to nie była odpowiedź .. :) Nie możesz też użyć obrazów tła, prawda? Nie mogłem więc po prostu zrobić stołu z bg tego obrazu. Dzięki za link. – hookedonwinter

+2

+1 ten link powinien być wymagany dla każdego, kto myśli programowo o wysyłanie wiadomości e-mail (i ich szefów). – slebetman

+0

@slebetman właśnie wysłał go do mojego szefa – hookedonwinter

3

Sugerowałbym wykonanie całej rzeczy jako tabeli (wsparcie div nie jest w 100% niezawodne w przypadku klientów poczty e-mail). Użyj właściwości granicy, aby nadać zielonej ramce tabelę. Wstaw obraz logo/banera w pierwszym wierszu tabeli (połączone trzy kolumny). Użyj następnych 3 wierszy dla To, From i Amount (z wartościami w scalonej drugiej i trzeciej kolumnie). I użyj ostatniej kolumny ostatniego rzędu dla kodu cupona.

Jeśli naprawdę chcesz podwójną ramkę, możesz zawinąć tabelę w div lub dla maksymalnej zgodności, zawiń tabelę w 1 kolumnę, 1 wiersz tabeli.

Tak, to jest brzydkie, ale klienci poczty e-mail mają bardzo błędne i/lub stare implementacje kodu HTML, więc nie jest to czas ani miejsce na skandal z brzydkim, niezwiązanym z internet2.0 kodem.

Zobacz link opublikowany przez alex, aby uzyskać więcej informacji.

Źródło

2010-08-04 07:09:10 slebetman

+0

Dobry pomysł. Spróbuję tego. Mogę po prostu robić zdjęcia z php w locie .. Lub powiedzieć im, aby użyli friggin tekstu i cieszę się, że mogą. – hookedonwinter

1

(Wiem, że odpowiadam 4 lata później ... ale prawdopodobnie to pomoże komuś ...) Jeśli przyjrzysz się uważnie, nie masz obrazów tła, masz prawdopodobnie 10 zdjęć lub więcej, wiele kolory tła i złożony stół.

Za obrazem nie ma obrazu. Możesz podzielić swój stół i skomponować obraz tła jako wiele fragmentów obrazu i dopasować kolor tła tekstu do tych obrazów.

Naprawdę ...w tym szablonie nie ma "wymaganych" obrazów tła, tylko złożona tabela.

Źródło

2014-10-16 05:10:50

Powiązane problemy

 Powiązane problemy