Cómo preparar una pieza de email marketing

Lo que propongo a continuación es un tutorial muy simple para maquetar una pieza de email marketing sin necesidad de usar código HTML. Se trata de un método que puede resultar un poco primitivo pero que gana en facilidad, porque solo se usa una herramienta y los pasos son muy mecánicos.

Con esto espero animar a quienes, sin tener conocimientos sobre HTML y necesitan resolver este tipo de tareas, a que prueben la posibilidad de hacerlo. Incluso, si indagan un poco más, se puede convertir en una herramienta que les permita ofrecer un servicio, hoy tan difundido como el email marketing.

 

PASO 1

Para comenzar es necesario tener el diseño ya exportado en un formato de imagen (.jpg, .png, .gif, etc.). El ancho de la pieza sugerido en email marketing suele rondar los 600 px, incluso puede ser menor para adaptarse mejor a los dispositivos móviles.

 

PASO 2

En este caso vamos a usar Fireworks. Lo pueden descargar desde Intercambios virtuales o cualquier otro sitio.
Al abrir el archivo vamos a encontrar este entorno (puede variar un poco según la versión del programa que tengan):

11

 

PASO 3

Vamos a usar la herramienta Herramienta Sector (Slice Tool) que está ubicada sobre el lado izquierdo, en la barra de herramientas web. Debajo de ella debe estar activada la opción Mostrar sectores (Show slices).

Con la herramienta seleccionada vamos a dividir toda la pieza en sectores rectangulares que se van a ir pintando de color. Esto nos va a permitir que, al exportar el archivo, la pieza se divida en imágenes con links diferentes.

22

Para dividir la pieza podemos tener en cuenta zonas que tengan link, botones, o simplemente bloques identificables en el diseño. Si no, en general, podemos manejar una proporción de rectángulos más anchos que largos.

33

Si la pieza es muy extensa el peso puede ser un poco alto, y por lo tanto el tiempo de carga también, así que dividir la pieza en imágenes más pequeñas también ayuda a optimizar el tiempo de carga.

 

PASO 4

Una vez todo dividido seleccionamos alguna parte que lleve link. Abajo aparecerán los espacios para colocar links.

77

Vínculo o link:
– En el caso de una url será completa incluyendo “http://”
– En el caso de un e-mail se coloca “mailto: ejemplo@ejemplo.com”
Existen más formas de colocar vínculos según el tipo de dato y función que pueden encontrar en internet.

Alt:
Por lo general se escribe lo mismo que dice la imagen, pero puede quedar vacío. Este contenido suele mostrarse en los emails cuando no está habilitado el desbloqueo automático de imágenes. En lugar de las imágenes se ven las celdas vacías con los contenidos del Alt. Aquí se explican en forma breve otros usos.

Destino o target:
_top: abre un enlace a ventana completa.
_blank: abre un enlace en una nueva ventana del navegador.
_self: abre un enlace en la misma ventana o frame (igual que si no existiera)
_parent: abre un enlace en el frame inmediato anterior.

 

PASO 5

Una vez colocados todos los links exportamos el archivo desde:
Archivo (File) -> Presentación preliminar de la imagen (Image preview)

44

Se abrirá una ventana con algunas opciones como elegir el formato de salida de las imágenes. Si elegimos .jpg podremos regular la calidad: a mayor calidad más pesada la imagen.

Con una calidad entre 80 y 90 podemos lograr una relación peso-calidad óptima. Se estima que una pieza entera no debería pesar más de 350 Kb. Sin embargo esto puede depender de cada pieza.

Finalmente “Exportar”.

55

Se abrirá una nueva ventana para seleccionar la carpeta de guardado. Aquí es importante prestar atención a tener seleccionadas las opciones como aparecen en la imagen:

66

Esta acción guardará un archivo .html y una subcarpeta llamada “img” que contiene todas las imágenes.

 

Con estos pasos ya tendremos lista nuestra pieza con los links funcionando. Pueden probarlo abriendo el archivo .html en un navegador.

Nota: Para que un vínculo “mailto” funcione es probable que les pida que configuren su cliente de correo de escritorio, como por ejemplo Outlook. Sin embargo, en la pieza final enviada a un cliente online como Gmail, abrirá un nuevo correo sin problema.

De esta manera obtendremos una carpeta de archivos (que podemos comprimir) lista para enviar a un cliente, cargar en un servidor, o subir a una plataforma de envíos de email marketing.

¡Espero que les sea de utilidad!

Anuncios

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s