Curso de diseño web - Apuntes
Diseño y envío de newsletter
El newsletter es un mail diseñado que se envía a un grupo grande de personas, por ejemplo un boletín informativo, una invitación, etc.
El armado de un newsletter es similar al de una página web, pero tiene algunas limitaciones con respecto al diseño que están dadas por las diferencias en la presvisualización de los mails de cada servidor (Yahoo, GMail, Hotmail...).
Diseño sin CSS:
Lo más seguro es un diseño simple utilizando el código HTML más compatible posible: esto significa no utilizar estilos CSS, javascript ni flash. El diseño se puede plantear en Fireworks o Photoshop y recortar las imágenes (gif, gif animado o JPG, igual optimizadas que para un sitio web).
Para trabajar de esta manera, en Dreamweaver, antes de empezar hay que desactivar la opción de trabajar siempre con estilos CSS. Esto se configura desde Edición/Preferencias/General/Utilizar CSS en lugar de etiquetas HTML (tiene que quedar desactivado mientras se trabaja con un newsletter). Luego se crea una página HTML en la que se pueden agregar, tablas, textos, imágenes y vínculos externos o vínculos a correo. A los textos se les da formato directamente desde la ventana propiedades, seleccionando el texto primero y eligiendo color, fuente, tamaño, etc.
Diseño con CSS:
Algunos atributos de los estilos CSS se pueden usar (chequeando que los principales servidores de correo los acepten), pero no conviene usarlos de la manera que se aplican actualmente al diseño de sitios sino escritos directamente sobre la línea de código del HTML.
Ejemplo: cómo insertar un estilo en la línea de código de una celda para que el texto se despegue del borde:
Desde el código HTML colocar el cursor después del td y empezar a escribir Style, aparecerá un menú de donde puede seleccionarse y Dreamweaver se ocupa de escribirlo correctamente.
Luego se elijen los atributos completando el diseño desde el código HTML o también desde la vista diseño: con el td seleccionado, ir al panel Estilos CSS desde Añadir propiedad en Propiedades de "estilo en línea"
En la imagen se ve agregado el estilo padding-left: 20 que separa el contenido de la celda 20 px desde la izquierda. El código queda así:
Es muy importante chequear el diseño antes de enviar el Newsletter enviando un e-mail a distintas cuentas (Yahoo, GMail, Hotmail)
Envío
Opción de envío 1: grupos pequeños con Outlook
Cuando el diseño está terminado se puede enviar desde el Outlook como Mensaje nuevo con/Seleccionar diseño de fondo. Esta forma de envío es sencilla pero no conviene mandar varios mails con copia porque la mayoría de las casillas de correo lo van a considerar spam. Si se envía desde el Outlook lo mejor es enviarlos de a uno. El programa se ocupa de incorporar las imagenes al mensaje y enviarlas.
Opción de envío 2: grupos grandes con MaxBulk Mailer
El programa MaxBulk Mailer es un programa específico para mandar newsletter, funciona muy bien y es muy sencillo de usar. Se puede descargar desde el sitio web: http://www.maxprog.com/maxbulk_es.html
La ventaja más grande de este programa es que envía los mails de a uno y personalizados y eso evita (casi siempre) que el mail sea considerado spam y caiga en las carpetas de correo masivo. Si se utiliza este programa, conviene aprovechar la posibilidad de subir las imágenes al servidor para que el envio sea más rápido y los mails más livianos.
Configuración:
En la ventana principal del programa aparecen 5 pestañas: mensaje, destinatarios, ajustes, vista previa y entrega.
1) mensaje: en asunto se escribe el asunto del mensaje y en la solapa formato se selecciona HTML solo, luego se copia el código HTML de Dreamweaver y se pega. Si las imágenes fueron subidas al servidor, en este momento conviene cambiar las rutas que el Dreamweaver escribió relativas y pasarlas a absolutas. Por ejemplo:
img src="http://www.dominio.com.ar/imagenes/imagen1.jpg
2) destinatarios: la lista de mails se puede crear manualmente o importar de una base de datos. También se puede importar desde un texto y el programa se encarga de separar lo que reconoce como cuentas de e-mail.
3) ajustes: en esta ventana se configura el envío. Ejemplo de configuración para el envío con una cuenta de GMail:
En la configuración hay que tener en cuenta algunas cosas:
La dirección de la cuenta con la que se realiza el envío se ve en algunas cuentas de correo (Hotmail por ejemplo).
El remitente es la cuenta a donde van a llegar los mails rebotados y los reportes de envío que genera el programa.
Responder a es la cuenta donde puede responder el que recibe el mail. Si esta cuenta no está especificada, se responde al remitente.
4) vista previa: previsualiza el diseño y el encabezado del e-mail.
Links recomendados:
Manual completo del programa MaxBulk Mailer en español: http://www.maxprog.com/manuals/mbm/mac/es/index.html
Descarga del programa:
http://www.maxprog.com/maxbulk_es.html
Consejos para diseñar mails
http://sentidoweb.com/2008/03/05/consejos-para-disenar-emails.php
Propiedades CSS soportadas por los webmails (en inglés ¡!)
http://www.campaignmonitor.com/blog/archives/2007/04/ a_guide_to_css_support_in_emai_2.html
Mozilla Thunderbird - Descarga gratuita
http://www.mozilla-europe.org/es/products/thunderbird/