Google Image
Cómo lo habíamos anticipado en nuestro post anterior, les queremos dejar algunos tips para elaborar un newsletter en HTML. Es importante conocerlo, ya que es parte de las buenas prácticas que se deben tener en cuenta cuando se realizan campañas de email marketing:
- Un diseño lo más simple posible
- Utilizar tablas (sí, tablas) y no divs para posicionar los elementos de nuestro newsletter. Preferentemente usar tablas diferentes para cada parte del contenido y evitar en lo posible, las tablas anidadas y la combinación de columnas.
- Si queremos incluir un color para el fondo de nuestro newsletter deberemos crear una tabla de 100 % de ancho con ese color de fondo.No usemos hojas de estilo externas ni embebidas en el head. Podemos utilizar CSS sólo aplicando los estilos “in-line”, es decir repitiendo cada estilo dentro de cada etiqueta HTML mediante la propiedad style. Puede resultar tedioso, pero es la única forma totalmente segura de aplicar formato mediante CSS a un newsletter. Usando con inteligencia las funciones de buscar y reemplazar de cualquier editor podremos cambiar estilos sin tanto trabajo. Un ejemplo aplicado a un párrafo (el código y el resultado):
<p style=”font-family: Arial, Helvetica, sans-serif; font-size: 12px; background-color: #f8f8e4; padding: 4px;”>Este texto debería verse dentro de un bloque con un fondo claro</p>
Este texto debería verse dentro de un bloque con un fondo claro
- Si no tenemos tiempo o ganas de hacer esta tarea, podemos probar incluyendo las hojas de estilo dentro de los tags <body> y </body>. Esto funcionaba bastante bien hasta hace poco, pero no funcionará en Gmail por lo que si tenemos muchos suscriptores de ese servicio es preferible usar estilos “in line”. Otra opción es rescatar a nuestra vieja y ya obsoleta etiqueta <font>, para dar un formato sencillo al texto.
- Utilizar un ancho fijo de menos de 600 px, para asegurarnos de que la mayoría de los dispositivos puedan mostrar decentemente nuestro diseño.
- Subir las imágenes a un servicio de hosting (o hostearlas en el propio servicio web de envío) e incluir como ruta de todas las imágenes, la url absoluta de cada archivo de imagen. Por ejemplo: si tenemos una carpeta llamada “newsletter” en nuestro sitio, y usamos un editor como Dreamweaver, probablemente nos quede algo así en el código:
<img src=”logo.jpg” alt=”" />
Para que los usuarios que reciben el email puedan ver esa imagen deberemos reemplazar ese código por:
<img src=”http://www.ejemplo.com/newsletter/logo.jpg”>
- Los vínculos deben también contener la ruta absoluta al archivo vinculado:
<a href=”http://www.ejemplo.com/pagina-de-ejemplo.htm”>
- Diseñar el newsletter teniendo en cuenta que muchos suscriptores le darán una leída “por arriba” para ver si les interesa antes de decidirse a activar la descarga de las imágenes. Es importante que se vea medianamente bien aún en esas condiciones. Una sugerencia: indicar siempre el alto y ancho de cada imagen para que el “placeholder” (indicador de posición de imagen) tenga el mismo tamaño que la imagen original y no se desarme el diseño.
- Si queremos que más gente lea y haga click en los links de nuestro Newsletter, nunca usemos imágenes para esos links ni para los títulos o contenidos relevantes.
- Podemos usar el Dreamweaver u otra herramienta WYSIWYG pero, en última instancia, siempre tendremos que codificar “a mano” parte de nuestro newsletter. Si no estamos dispuestos a ensuciarnos las manos con el código, es mejor que le pasemos la tarea a alguien que pueda hacerlo.
- Hagamos varias pruebas antes de enviar un newsletter. Recomendamos tener al menos un equipo con los principales programas de correo instalados y tener varias cuentas POP3 y de webmail que usemos para testear los resultados en cada sistema.
Fuente: The HTML Email Guide
Excelente post, de este tipo de post hacen falta mucho para mejorar las campañas de email
agrego a las recomendaciones el uso de los caracteres especiales, por ejemplo si utilizamos vocales acentuadas debemos utilizar su codificación en HTML, á: á é é
Les dejo un link desde donde pueden descargar un manual que cuenta con algunas recomendaciones aparte de las presente en este post
http://bit.ly/HTMLFriendly
Saludos
@jbaldovino
Muchas gracias Jonathan por tu comentario y aporte. Estaremos pendientes de lo que estás haciendo para seguir aprendiendo.
Saludos y un abrazo!
Ricardo.
Te falto un detalle: las imagenes deben ir sin alto ni ancho. Asi, cuando el usuario no ha hecho click en descargar imagenes no vera espacios vacios. Luego cuando las descargue se armara el news.
Lo otro es hacer un fondo de color para que si no se han descargado las imagenes no se vea vacio