Quienes se dedican al email marketing deben saber como crear emails en html.
![newsletter.jpg]()
Vamos a ver algunas recomendaciones para el diseño, codificación y entrega de emails en formato HTML y para que sus Newsletter se vean bien en la mayoría de los clientes de correo.
El envío de emails de Newsletters es una buena forma de comunicación entre los editores y los lectores, pero si además lo hacemos en formato HTML, nos permitirá enriquecer el documento con elementos visuales que hacen el email más atractivo, accesos directos a otras localizaciones y nos permitirá a nosotros mismos hacer mediciones sobre aperturas del email, rastrear y contabilizar los enlaces que visita, medir los intereses del lector, etc.
Al enviar un email en texto plano no podemos utilizar todas estás funcionalidades, pero por el contrario obtenemos otras ventajas como menor nivel de spam al no incluir etiquetas HTML y por eso mismo facilita a los clientes de correo visualizar perfectamente el contenido del email en todos los clientes.
Codificar HTML para emails puede darte muchos dolores de cabeza, debido a que los clientes de correo tanto los de escritorio como los basados en web no cumplen ningún standard web, no interpretan bien el código HTML y hojas de estilos o lo interpretan a su manera incluso añadiendo o eliminando código al email recibido, por lo que el diseño del email que el destinatario recibe puede ser bastante diferente al diseño del editor que envió ese email.
Usa una tabla como contenedor de todas las tablas y elementos internos (por ejemplo para el header, content y footer).
Intenta no anidar muchas tablas y evitar el uso de la propiedad "colspan" ya que esta propiedad no es muy bien entendida por algunos clientes de escritorio.
Tamaño y resolución. Seguramente estés acostumbrado a codificar páginas web en 800×600 o en 1024×768 aproximadamente, pero para el diseño de emails en HTML puede que no funcione muy bien ya que la mayoría de los clientes muestra el email en una especie de "panel de previsualización" que es normalmente una parte del espacio total disponible.
Lo más recomendable es configurar el ancho en unos 500-600px o dando un tamaño en porcentajes que es como yo suelo hacerlo para que se adapte al espacio que tenga disponible.
Por ejemplo, es recomendable utilizar <p style="color: red;"> en lugar de <p class="colorRojo">.
Si utilizamos imagenes es mejor utilizar la ruta completa al dominio donde se aloja la imagen.
El envío de emails de Newsletters es una buena forma de comunicación entre los editores y los lectores, pero si además lo hacemos en formato HTML, nos permitirá enriquecer el documento con elementos visuales que hacen el email más atractivo, accesos directos a otras localizaciones y nos permitirá a nosotros mismos hacer mediciones sobre aperturas del email, rastrear y contabilizar los enlaces que visita, medir los intereses del lector, etc.
Al enviar un email en texto plano no podemos utilizar todas estás funcionalidades, pero por el contrario obtenemos otras ventajas como menor nivel de spam al no incluir etiquetas HTML y por eso mismo facilita a los clientes de correo visualizar perfectamente el contenido del email en todos los clientes.
Codificar HTML para emails puede darte muchos dolores de cabeza, debido a que los clientes de correo tanto los de escritorio como los basados en web no cumplen ningún standard web, no interpretan bien el código HTML y hojas de estilos o lo interpretan a su manera incluso añadiendo o eliminando código al email recibido, por lo que el diseño del email que el destinatario recibe puede ser bastante diferente al diseño del editor que envió ese email.
HTML por encima de CSS
Intenta usar las etiquetas de HTML y sus propiedades en la mayor parte de lo posible en lugar de hojas de estilos, ya que los clientes web tiene restringidas muchas de las propiedades y selectores CSS.
Uso de tablas para la maquetación
Si, volvemos a las tablas. Los estándares web dicen que no se deben utilizar las tablas para maquetar una página web, pero esto no es una página web sino un email y es aconsejable utilizarlas en lugar de <div> si queremos que nuestras Newsletter se visualicen bien en la mayoría de los lectores de correo. Y es que los clientes de correo no soportan muchas de las propiedades necesarias para diseñar con divisiones <div>.
Usa los atributos de la tabla y celda para visualizar la tabla en lugar de utilizar propiedades CSS . Por ejemplo, asigna border="0", valign="top", align="left" (o center), cellpadding="0", cellspacing="0",etc. Con esto conseguirás que se vea bien la tabla en clientes de correo antiguos.
Usa los atributos de la tabla y celda para visualizar la tabla en lugar de utilizar propiedades CSS . Por ejemplo, asigna border="0", valign="top", align="left" (o center), cellpadding="0", cellspacing="0",etc. Con esto conseguirás que se vea bien la tabla en clientes de correo antiguos.
Usa una tabla como contenedor de todas las tablas y elementos internos (por ejemplo para el header, content y footer).
Intenta no anidar muchas tablas y evitar el uso de la propiedad "colspan" ya que esta propiedad no es muy bien entendida por algunos clientes de escritorio.
Tamaño y resolución. Seguramente estés acostumbrado a codificar páginas web en 800×600 o en 1024×768 aproximadamente, pero para el diseño de emails en HTML puede que no funcione muy bien ya que la mayoría de los clientes muestra el email en una especie de "panel de previsualización" que es normalmente una parte del espacio total disponible.
Lo más recomendable es configurar el ancho en unos 500-600px o dando un tamaño en porcentajes que es como yo suelo hacerlo para que se adapte al espacio que tenga disponible.
Uso de Hojas de Estilos en Cascada (CSS)
El uso de las hojas de estilo en los documentos HTML para Email está limitado y según que cliente permitirá más o menos propiedades. Lo ideal es que los estilos deben aplicarse a la propia etiqueta (estilos en línea) en lugar de declarar las clases dentro de <style></style> en la etiqueta Head como se haría en una página web..
Por ejemplo, es recomendable utilizar <p style="color: red;"> en lugar de <p class="colorRojo">.
Si utilizamos imagenes es mejor utilizar la ruta completa al dominio donde se aloja la imagen.
