1. Inicio
  2. Pregunta y respuesta
  3. Posicionamiento absoluto en los correos electrónicos de Gmail

Posicionamiento absoluto en los correos electrónicos de Gmail

2010-08-04 15 views
34

Tengo un cliente que desea enviar certificados de regalo a las personas que se registran en su sitio. Quieren que todo esté diseñado, así que no puedo enviar un correo electrónico de texto. Intento colocar texto sobre la imagen para que pueda ser dinámica.Posicionamiento absoluto en los correos electrónicos de Gmail

Estoy tratando de hacer esto con un posicionamiento absoluto. Algunos sistemas de correo electrónico lo adoran. Algunos lo odian Gmail pasa a odiarlo.

Estamos usando MailChimp para la campaña. Aquí está la fuente completa del correo electrónico. A continuación, solo se trata del fragmento que no funciona.

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

Y sólo el fragmento que me preocupa:

<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 fusionar las variables son aquellas cosas entre | y |.

Aquí hay una imagen de cómo se ve en Entourage. La barra roja es un nombre real, por lo que .. ya: Email working http://img.skitch.com/20100804-m91tny1ck75adfibga6cundcxr.jpg

Y aquí es en Gmail (sé que el nombre no está censurada): Email not working http://img.skitch.com/20100804-rfrb1fejjubqr4id56yq1xihdp.jpg

¿Alguna idea sobre cómo conseguir este trabajo en gmail?

Fuente

2010-08-04 hookedonwinter

+4

Un comentario sobre esto: Mucha de la gente que publica parece pensar que yahoo, gmail, etc. hacen esto porque son perezosos/malo :). De hecho, están impidiendo muchos ataques XSS y ataques de posición. Es por eso que tiran estas etiquetas – MJB

+0

@MJB, ¿Qué es un ataque de posición? – Jonah

+0

Sobrepones algo más para que parezca kosher pero hace algo inesperado cuando el usuario activa – MJB

Respuesta

38

Desafortunadamente, no puede usar position: absolute.

Además, debido a que Outlook usa el renderizador de Word HTML, también se encontrará con problemas al usar el posicionamiento absoluto.

La mayoría de los correos electrónicos HTML se presentan con tablas.

Check this out.

Fuente

2010-08-04 06:47:55 alex

+1

Realmente esperaba que esa no fuera la respuesta ... :) Tampoco puedes usar imágenes de fondo, ¿correcto? Así que no podía hacer una tabla con el bg de esa imagen ... Gracias por el enlace. – hookedonwinter

+2

+1 ese enlace debería ser obligatorio para cualquiera que esté pensando en enviar correos electrónicos por programación (y sus jefes). – slebetman

+0

@slebetman acaba de enviarlo a mi jefe – hookedonwinter

3

Sugeriría hacer todo esto como una tabla (el soporte de div no es 100% confiable en clientes de correo electrónico). Use propiedades de borde para darle a la tabla el borde verde. Inserte la imagen del logotipo/pancarta en la primera fila de la tabla (tres columnas fusionadas). Use las siguientes 3 filas para A, De y Cantidad (con los valores en la segunda y tercera columnas fusionadas). Y use la última columna de la última fila para el código cupon.

Si realmente desea el borde doble, puede envolver la tabla en un div o para una compatibilidad máxima, envolver la tabla en una tabla de 1 columna, 1 fila.

Sí, es feo, pero los clientes de correo electrónico tienen implementaciones de HTML demasiado complicadas y/o antiguas, por lo que este no es el momento ni el lugar para ser irritable sobre el código feo que no es web2.0.

Consulte el enlace publicado por alex para obtener más información.

Fuente

2010-08-04 07:09:10 slebetman

+0

Buena idea. Voy a intentar eso. Tal vez solo haga imágenes con php sobre la marcha ... O dígales que usen texto friggin y estén contentos de que puedan hacerlo. – hookedonwinter

1

(Sé que estoy respondiendo 4 años después ... pero probablemente ayudará a alguien ...) Si miras detenidamente, no tienes imágenes de fondo, posiblemente tienes 10 imágenes o más, muchas colores de fondo y una mesa compleja.

No hay imagen detrás de un texto. Puede dividir su tabla y componer su imagen de fondo como fragmentos de imágenes múltiples, y hacer coincidir el color de fondo del texto con estas imágenes.

Realmente ...en esta plantilla no hay imágenes de fondo "requeridas", solo una tabla compleja.

Fuente

2014-10-16 05:10:50

Cuestiones relacionadas

 Cuestiones relacionadas