Newsletter II

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

Newsletter II

Newsletter para la agencia de publicidad Sr.Burns, construida con imágenes.

Una de mis funciones en esta empresa fue realizar las newsletter para Lexus , Florette y SR.Burns. 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 resultados 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 Sr.Burns.

El HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Newsletter II</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="padding: 0px 0px 0px 0px; font-family: Arial, sans-serif;" align="center">En caso de que no est&eacute; visualizando, <a target="_blank" href="%SHOWEDITION%">acceda aqu&iacute;</a>.</td>
</tr>
<tr>
<td colspan="2" style="line-height: 0; padding: 0px 0px 0px 0px;" align="center"><a href="" target="_blank"><img src="" align="none" height="329" width="600" /></a></td>
</tr>
<tr>
<td colspan="2" style="line-height: 0; padding: 0px 0px 0px 0px;" align="center"><a href="" target="_blank"><img src="" align="none" border="0" height="273" width="600" /></a></td>
</tr>
<tr>
<td colspan="2" style="line-height: 0; padding: 0px 0px 0px 0px; padding-top: 15px; padding-bottom: 15px;" align="center"><a href="" target="_blank"><img src="" align="none" border="0" height="273" width="600" /></a></td>
</tr>
<tr>
<td colspan="2" style="line-height: 0; padding: 0px 0px 0px 0px; padding-bottom: 15px;" align="center"><a href="" target="_blank"><img src="" align="none" height="273" width="600" /></a></td>
</tr>
<tr>
<td colspan="2" style="line-height: 0; padding: 0px 0px 0px 0px; padding-bottom: 15px;" align="center"><a href="" target="_blank"><img src="" align="none" height="273" width="600" /></a></td>
</tr>
<tr style="background-color: #fff; margin: 25px 0px 0px 0px;">
<td style="line-height: 0;" align="center"><img src="" vaspace="15" align="none" height="16" width="100" /> <a href="" target="_blank"><img src="" vaspace="15" align="none" height="26" width="14" /></a> <a href="" target="_blank" t=""><img src="" vaspace="15" align="none" height="27" width="26" /></a> <a href="" target="_blank"><img src="" vaspace="15" align="none" height="27" width="26" /></a> <a href="" target="_blank"><img src="" vaspace="15" align="none" height="27" width="26" /></a></td>
</tr>
<tr>
<td colspan="2" style="padding: 0px 0px 0px 0px; font-family: Arial, sans-serif;" align="center">En caso de que no quiera recibir m&aacute;s, <a target="_blank" href="%CANCEL%">acceda aqui</a> para cancelar</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Puedes ver otro ejemplo Newsletter I

Mariano J.

Escribe un comentario

Tu email no se hará visible