HTML para E-mail Guía de Buenas prácticas Less ys More Ludwig Mies van der Rohe
Ejemplo de un e-mail sin buenas prácticas Textos degradados Los textos están sobre un fondo degradado Newsletter Septiembre Los Textos no están con fuetes nativas Img.20154-8 PROMOCION!!! PROMOCION!!! No se están utilizando tablas Imágenes sin descripción PROMOCION!!! INCRÍBLE PROMOCION!!! Uso repetido de palabras sospechosas Fondo en color degradado
Ejemplo de un buen e-mail Textos en colores planos Imágenes con descripción Newsletter Septiembre Img. Playa Punta Cana Argentina Bariloche Básico Precios desde 110 Dólares Americanos (USD) <Ver más> Fuentes nativas Ejemplo: Arial Argentina Bariloche Básico Precios desde 110 Dólares Americanos (USD) <Ver más> Fondos planos Argentina Bariloche Básico Precios desde 110 Dólares Americanos (USD) <Ver más> Montaje del mail en tablas Incluye: Ticketes aéreos - Desayunos Tour por la ciudad Reserva ya! Tel: 7000000 ext 211 www.viajesymas.com Edición de contenido (palabras sospechosas)
No es lo mismo crear código HTML para sitios web que para e-mail, ya que los buzones de correo no responden de la misma forma que los navegadores. A continuación se presenta una guía para tener en cuenta a la hora de hacer un e-mail. Es necesario contar con la herramienta adecuada para escribir el código HTML. Si tienes un conocieminto avanzado en éste lenguaje, se recominda utilizar el editor de Fuente HTML integrado o un externo como Notepad++. De lo contrario puedes utilizar Dreamweaver, el cual cuenta con una vista dividida entre diseño (visualización) y código. 1. Utiliza tablas Una vez tengas el diseño, debes empezar a montarlo utilizando tablas. Piensa en la distribución de los elementos del mail (imágenes, texto, enlaces, etc) y crea una tabla colocando el contenido de forma segmentada, es decir, por celdas. Las tablas pueden tener tantas filas y columnas como necesites, pero se recomienda que tenga un ancho máximo de entre 600 y 650 píxeles. Para hacer más flexible la estructura, puedes incluir una tabla dentro de una celda, o colocar una tabla debajo de otra. <!doctype html> <html> <head> <meta charset="utf-8"> <title>documento sin título</title> </head> <body> <table width="600" border="0" align="center" cellpadding="20" cellspacing="0"> <tr> <td colspan="2"><p> </p> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> </body> </html> Click Aquí Contenido de tabla 1 Contenido de tabla 2 Contenedor de tabla
2. Estilos Inline Gmail y otros buzones de correo no soportan estilos en cascada (CSS), así que es mejor no utilizarlos. Además, muchos buzones sólo dan soporte a los estilos más básicos de HTML (font-family, font-weight, etc) y no soportarán estilos avanzados (clear, float, z-index, etc). Utiliza estilos Inline. Seguros Precaución (Buen soporte) font-family, font-size, font-style, font-weight, color, padding, border No seguros (Soporte Limitado) margin, line-height, background-image, background-position, background-repeat (Sin Soporte) clear, float, list-style-image, position, z-index Bloqueo de Elementos por Nivel Trata de colocar los textos en celdas, dentro de las etiquetas <td> y crea estilos inline para cada una. Intenta usar: <td> Le damos la bienvenida a nuestro nuevos sitio web. </td> Evita usar: <p> Le damos la bienvenida a nuestro nuevos sitio web. </p> Evita resumir en el código En algunos casos se presentan resultados inesperados cuando los desarrolladores web resumen el código en el caso de e-mails. Para que ésto no ocurra: escribe los 6 dígitos del color hexagesimal (Ejemplo: #000 en vez de #000000), evita colocar los colores en RGB y coloca cada estilo por separado. Intenta usar: <td style= font-family: Gergia, serfi; Font-size: 12px; line-height: 30px; font-weight: bold; font-style: Italic; > Evita usar: <td style= font: italic bold 12px/30px Georgia, serif; >
2. Links Algunos estilos que se utilizan para links, tienen poco soporte en e-mail. Un ejemplo de ésto es Yahoo!, que cambia por defecto el color de los links, dejándolos de subrayados y de color azul. Para evitar que ésto pase: Paso 1: Paso 2: Coloca el link dentro de una etiqueta <span> con el color del link que deseas: Incluye una clase.yshortcuts en la etiqueta <head> de tu e-mail. <a href= http://empresa.com style= color: # 8E0B56; text-decoration: none; > <span style= color: #8BDC65 > Éste es el link </span></a> <style type= text/css >.yshorcuts a span {color: #8BDC65 } </style> Para tener en cuenta: y dentro de <body> coloca el link dentro de etiquetas <div> o <span> con la clase.yshortcuts incluida. En éste caso es posible incluir CSS embebido, ya que arregla un problema específico en el caso de Yahoo!. Para Gmail, no es necesario. <div class= yshortcuts > <a href= http://empresa.com style= color: #8BDC65; text decoration: none;>link uno</a></div> Link por defecto www.link_para_mas_informacion.com Link ajustado www.link_para_mas_informacion.com 3. Conoce a tu audiencia Al conocer a tus clientes, puedes segmentar los diseños y generar hacer propuestas innovadoras, como: imágenes, sombras, diagramación, dependiendo si tu publico es jóven y dinámico o por el contrartio conservador.
4. Imágenes La mayoría de buzones de correo bloquean las imágenes impidiendo que el usuario las vea, a menos que pulse el botón Mostrar Imágenes. Por lo cual siempre tenemos que suponer que nuestro destinatario no verá las imágenes y diseñar el email con esa idea. Siempre nombra las imágenes con una corta descripción e incluye el formato y el color dentro del TAG de código. <img src= http://www.empresa.com/images.descuento.gif alt= Descuento del mes width= 137 height= 160 style= display: block; font-family: Arial; color: #000000; font-size: 14px; border= 0 > Imagen promoción del mes Recibe un descuento del 40% por la compra de 2 productos de nuestra marca. Tip: Incluye las propiedades de fuente y color dentro de la etiqueta <img> para dale estilo a los mails. Check list para revisión de imágenes: Diseña pensando en los problemas de visualización ALT: PNG 0 Incluye atributos alt Incluye atributos alt Incluye atributos alt Incluye SIEMPRE atributos de alto y ancho Usa referencias (URLs) absolutas, no relativas Outlook 2007 / 2010 no soporta imágenes como fondo. BLOCK Incluye Style= display:block; para prevenir gaps
5. Piensa como un Spam Debes tener en cuenta los filtros de spam a la hora de redactar tu mail. Hay ciertas características, palabras o frases que se identifdican como basura (en especial la combinación de palabras relevantes con palabras sospechosas). Palabras Relevantes: Palabras sospechosas: Dinero en efectivo Millones Créditos en el acto Tiempo compartido Cuenta bancaria Viagra Lotería Juegos Online Baje de peso Gane desde su casa Pague sus cuentas Bloqueo de su Tarjeta Ganaste Gratis Dinero Banco Oferta Promo Promoción Super Urgente Regalo Descarga Ganancias Otras características consideradas abusivas son las palabras en mayúsculas con signos o caracteres especiales, y las frases que denoten urgencia. SUPER REMATE Gratis!!!! GANE $ SOLO POR HOY COMPRE YA 5. Otros formatos El e-mail tiene pocas opciones de soporte para flash, TypeKit y javascript, mientras que los formatos animados.gif son bien recibidos (en Outlook 2007/2010 sólo se muestra el primer frame). Evita el uso de formularios, encuestas o botones de búsqueda, ya que muestran un mensaje de seguridad a los usuarios. 6. Prueba! Cuando hayas terminado el montaje, no olvides probar el mail antes de enviarlo. Ten a la mano un par de correos de prueba y trata de visualizarlo en diferentes buzones de correo.