1. casa
  2. Domanda e risposta
  3. Posizionamento assoluto nelle e-mail di Gmail

Posizionamento assoluto nelle e-mail di Gmail

2010-08-04 14 views
34

Ho un cliente che desidera inviare buoni regalo alle persone che si registrano sul loro sito. Vogliono che tutto sia progettato, quindi non posso semplicemente inviare una email di testo. Sto provando a posizionare il testo sull'immagine in modo che possa essere ancora dinamico.Posizionamento assoluto nelle e-mail di Gmail

Sto provando a farlo con posizionamento assoluto. Alcuni sistemi di posta elettronica lo adorano. Alcuni lo odiano. Gmail capita di odiarlo.

Utilizziamo MailChimp per la campagna. Ecco la fonte completa dell'email. Di seguito è solo lo snippet che non funziona.

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

E proprio il frammento che mi preoccupa:

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

Nota: MailChimp unire le variabili sono quelle cose tra | e |.

Ecco un'immagine di come appare in Entourage. La barra rossa è un vero e proprio nome, così .. ya: Email working http://img.skitch.com/20100804-m91tny1ck75adfibga6cundcxr.jpg

E qui è a gmail (So che il nome non è censurato): Email not working http://img.skitch.com/20100804-rfrb1fejjubqr4id56yq1xihdp.jpg

Tutte le idee su come ottenere questo lavoro in gmail?

fonte

2010-08-04 hookedonwinter

+4

Un commento su questo: un sacco di persone che postano sembrano pensare che yahoo, gmail ecc lo fanno perché sono pigri/cattivi :). Di fatto stanno impedendo molti attacchi XSS e attacchi di posizione. È per questo che spogliano questi tag – MJB

+0

@ MJB, che cos'è un attacco di posizione? – Jonah

+0

Sovrapponi qualcos'altro così sembra kosher ma fa qualcosa di inaspettato quando l'utente attiva – MJB

risposta

38

Sfortunatamente, non è possibile utilizzare position: absolute.

Inoltre, poiché Outlook sta utilizzando il renderer HTML di Word, si verificheranno anche problemi utilizzando il posizionamento assoluto.

La maggior parte delle email HTML sono strutturate con tabelle.

Check this out.

fonte

2010-08-04 06:47:55 alex

+1

Speravo davvero che non fosse la risposta .. :) Non puoi usare anche le immagini di sfondo, corretto? Quindi non potevo semplicemente fare un tavolo con la bg di quell'immagine .. Grazie per il link. – hookedonwinter

+2

+1 a quel collegamento dovrebbe essere richiesto di leggere per chiunque pensi di inviare email a livello di programmazione (e dei loro capi). – slebetman

+0

@slebetman lo ha appena inviato al mio capo – hookedonwinter

3

Suggerirei di fare il tutto come tabella (il supporto div non è affidabile al 100% nei client di posta elettronica). Usa le proprietà del bordo per dare alla tavola il bordo verde. Inserisci l'immagine del logo/banner nella prima riga della tabella (unite tre colonne). Utilizzare le 3 righe successive per A, Da e Quantità (con i valori nella seconda e terza colonna uniti). E usa l'ultima colonna dell'ultima riga per il codice di invito.

Se si desidera realmente il doppio bordo, è possibile avvolgere la tabella in un div o per garantire la massima compatibilità, avvolgere la tabella in una tabella a 1 colonna e 1 riga.

Sì, è brutto, ma client di posta elettronica hanno estremamente buggy e/o vecchie implementazioni di HTML, quindi questo non è il momento né il luogo per essere squirmish su, non web2.0 dall'aspetto codice di brutto.

Vedere il collegamento pubblicato da alex per ulteriori informazioni.

fonte

2010-08-04 07:09:10 slebetman

+0

Buona idea. Ci proverò. Potrei semplicemente creare immagini con php al volo .. O dire loro di usare un testo frivolo e di essere felice che possano farlo. – hookedonwinter

1

(So che sto rispondendo 4 anni dopo ... ma probabilmente aiuterà qualcuno ...) Se guardi attentamente, non hai immagini di sfondo, hai forse 10 o più immagini, molte colori di sfondo e una tabella complessa.

Non c'è alcuna immagine dietro un testo. È possibile dividere la tabella e comporre l'immagine di sfondo come più frammenti di immagine e abbinare il colore di sfondo del testo a queste immagini.

Davvero ...in questo modello non ci sono immagini di sfondo "richieste", solo una tabella complessa.

fonte

2014-10-16 05:10:50

Problemi correlati

 Problemi correlati