Newsletter

Newsletter / Mariano J. Muzas HTML5, CSS3, PHP, Mysql, bbdd, javascript, JQuery, JQuerymobile, Bootstrap, Material Design, WordPress, Newsletter, Api de Facebook, Api de twitter, PrestaShop.

Newsletter

Newsletter para Lexus, construida con imágenes.

Durante 10 meses fui el encargado de realizar las newsletter para Lexus y Florette. Construidas con tablas anidadas en HTML, dentro de un div contenedor donde definimos el color de fondo.

Creada con imágenes, por un lado con esto se gana en velocidad a la hora de trabajar, pero en ocasiones mailchimp genera problemas con las distancias de las imágenes.

Para evitar sustos indeseados, es conveniente realizar todas la pruebas necesarias en diferentes gestores de correo electrónico.

Recomendaciones:

Estilos CSS en línea. El link al CSS en el head, no es soportado por Hotmail, Yahoo y Gmail.

Usar un ancho máximo de 600px en las imágenes. Si es de mayor ancho, corremos el riesgo de que se interprete nuestra Newsletter como Spam.

Llamar a las imágenes usando rutas absolutas.

No usar caracteres especiales o extraños en los nombres de las imágenes, de lo contrario algunos gestores como Gmail, no las interpretan y no mostraran nada.

A continuación, podéis ver uno de los modelos habituales en las nerwsletter para Lexus.

Y el código para quien pueda sacarle partido.

<!DOCTYPE html>
<html>
    <head>
        <title>Newsletter</title>
        <meta http-equiv=content-type content="text/html; charset=utf-8">
        <meta http-equiv=X-UA-Compatible content="IE=EmulateIE8"/>
        <meta http-equiv=cache-control content=no-cache>
        <meta name=description content=""/>
        <meta name=keywords content=""/>
        <style type="text/css">
            div#content {
                margin-top: 0px;
                margin-left: auto;
                margin-right: auto;
            }
        </style>
    </head>
<body>
<div id="content" style="margin-top: 0px; margin-left: auto; margin-right: auto;">
<table style="padding: 0; border-collapse: collapse; border-spacing: 0; text-align: center; background-color: #fff;" align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td colspan="2" style="line-height:0; padding: 0px 0px 0px 0px;" align="center">
<img src="rutadelaimagen/imagen.jpg" alt="" height="114" align="none" width="600" />
</td>
</tr>
<tr>
<td colspan="2" style="line-height:0; padding: 0px 0px 0px 0px;" align="center">
<a title="" href="" target="_blank"><img src="rutadelaimagen/imagen.jpg" alt="" align="none" border="0" width="600" /></a>
</td>
</tr>
<tr>
<td style="line-height:0; margin: 0px 0px 0px 0px;height:273px" align="center">
<a href="" target="_blank" title=""><img src="rutadelaimagen/imagen.jpg" alt="" align="none" border="0" width="300" /></a>
</td>
<td style="line-height:0; margin: 0px 0px 0px 0px;" align="center">
<a href=""><img src="rutadelaimagen/imagen.jpg" alt="" align="none" border="0" width="300" /></a>
</td>
</tr>
<tr>
<td colspan="2" style="line-height:0; padding: 0px 0px 0px 0px;" align="center">
<a href="" target="_blank" title=""><img src="rutadelaimagen/imagen.jpg" alt="" align="none" border="0" width="600" /></a>
</td>
</tr>
<tr style="background-color: #fff;">
<td style="line-height:0; padding: 0px 0px 0px 0px;" align="center">
<a href="" target="_blank" title=""><img src="rutadelaimagen/imagen.jpg" alt="" border="0" /></a>
</td>
<td style="line-height:0; padding: 0px 0px 0px 0px;" align="center">
<a href="" target="_blank" title=""><img src="rutadelaimagen/imagen.jpg" alt="" border="0" /></a>
</td>
</tr>
<tr>
<td colspan="2" style="line-height:0;padding: 0px 0px 0px 0px;" align="center">
<img src="rutadelaimagen/imagen.jpg" alt="" border="0" />
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

 

Mariano J. Muzas.

Gracias por poner el código, así da gusto.

Juan / 24-12-2016

Para eso mismo lo he puesto, me alegro de que te sea útil.

Mariano J. / 25-12-2016

Escribe un comentario

Tu email no se hará visible