10 consejos de HTML para crear mailings a prueba de errores ¿Le ha pasado alguna vez que su newsletter, que creó con tanto cuidado en Frontpage, Dreamweaver o Fireworks, aparece sin formato en Outlook, Hotmail o Gmail? ¡Bienvenido al club! Crear un HTML para un e-mail es diferente a hacerlo para una Web. Por cuestiones […]
10 consejos de HTML para crear mailings a prueba de errores ¿Le ha pasado alguna vez que su newsletter, que creó con tanto cuidado en Frontpage, Dreamweaver o Fireworks, aparece sin formato en Outlook, Hotmail o Gmail? ¡Bienvenido al club! Crear un HTML para un e-mail es diferente a hacerlo para una Web. Por cuestiones de seguridad, (y algún enfado), los programas y servicios de e-mail solo aceptan cierto tipo de códigos HTML. Es como si cada uno leyese los códigos a su manera, y, posiblemente, su newsletter aparecerá mal en Gmail incluso si consigue que se vea perfectamente en Outlook. Entonces, ¿Qué hacer? No se desespere. Tenemos 10 consejos para facilitarle el trabajo.
1) Haga que las tablas sean sus mejores amigas ¿Se acuerda cuando la alineación de las páginas Web se hacían con tablas? Perfecto, prepárese para regresar a los viejos tiempos y a programar en HTML ¡como si aún estuviéramos en los años 90! Olvide los posicionamientos por DIV y CSS y cree toda la estructura del e-mail solo basándose en tablas. Para esto, empiece por generar una tabla maestra y vaya creando dentro de ésta otras tablas para los principales contenidos (tablas anidadas). En cuanto a los espacios, haga siempre rellenos en la propia celda () de la tabla o use una imagen GIF transparente (separadores). Y, siempre que sea posible, proporcione tamaños fijos a todas las celda o tablas que contengan directamente imágenes y texto, como en el siguiente ejemplo:
Esto es un contenido Esto es otro contenido
2) Use y abuse de CSS inline Para no arriesgarse a que los webmails (especialmente en Gmail) corten todos los estilos CSS de su newsletter, añada siempre el CSS directamente en cada elemento (celdas, enlaces, párrafos, etc.). Es mucho trabajo, pero verá que vale la pena y, luego, es completamente compatible. Vea este ejemplo para un párrafo:
Este párrafo con CSS en línea aparece bien en cualquier lector de correo!
3) Use ALT y TITLE en las imágenes ¡Cuanto más gente abra las imágenes de su newsletter, mayor será la reactividad y menos posibilidades tendrá de ser enviada a spam en futuros envíos! Como, por motivos de seguridad, los programas de e-mail bloquean automáticamente las imágenes (el receptor tiene que pulsar un botón para verlas), inserte una etiqueta ALT y TITLE en cada una con una descripción llamativa ¡para incentivar el deseo de verla! 4) Nunca cambie el tamaño de las imágenes en HTML ¿No estaría esta imagen mejor si fuera más pequeña? ¡No cambie el tamaño con Frontpage o Dreamweaver! Además de mantener la misma calidad, programas como Outlook muestran siempre las imágenes a su tamaño original y ¡descontrolan todo el formato! Por esto, cambie siempre el tamaño en un programa de diseño aparte (ej. Paint, Picasa, Fireworks, etc.) e inserte la imagen en su HTML con el tamaño definitivo. Si lo desea, E-goi puede hacer la conversión de tamaño por usted. 5) Póngase en el peor de los casos Su news se ve muy bien con imágenes, pero en cuanto los receptores no pueden cargar las imágenes al recibirlas, solo verán el texto y el esqueleto de las tablas. Por tanto, asegúrese de que, si esto ocurre, el e-mail esté, al menos, bien formateado. Una buena técnica es usar en cada imagen las variables «ancho» y » alto» para reforzar el tamaño. Debe, también, aplicar un color de fondo a las tablas que sea coherente con el esquema de colores de la news. 6) Cuidado con los espacios en blanco en los recortes Si recorta una imagen muy grande en varias imágenes insertas más pequeñas en las diferentes celdas de una tabla, llos recortes pueden no encajar bien y se verán en ciertos programas de e-mail (se verán como un mosaico). Para evitar esto, asegúrese de que en cada recorte se introduce el siguiente estilo: style=»line-height: 50%;» 7) cree un código HTML suave y limpio Frontpage, Dreamweaver y similares, crean códigos correctos para las Web, pero ignorarán todos los ,,,y para muchos de los lectores de e-mail (además de decir adiós a cualquier Javascript). ¡Elimine de una vez esas etiquetas de sus códigos! ¡El mejor HTML comienza pory termina por(pero no exagere en las tablas anidadas)! No olvide que cuanto más complejo y pesado en su HTML, más probabilidades tiene de ser atrapado por los filtros anti-spam.
8) ¡Atención al ancho! No caiga en la tentación de hacer una newsletter tan ancha como su pantalla. Aquello que se ve de maravilla en su monitor de 22 pulgadas se reducirá a un trozo indescifrable en los lectores de e-mail. Manténgase en un máximo de 600-700 pixeles de ancho. Al hacer una vista previa de su campaña en E-goi, aparecerá una regla que le ayudará a determinar el ancho ideal. 9) No pierda el tiempo intentando hacer una newsletter perfecta para todos los lectores de e-mail. Cada programa de Webmail tratará su newsletter de forma diferente (E-goi le mostrará exactamente esas diferencias). Difícilmente conseguirá que sea perfecta en todo. Por eso, empiece por saber cuales son los programas y los Webmails que su audiencia usa más (solo tiene que ver el informe de las campañas que ya envió con E-goi) y concéntrese en mejorar la newsletter para estos casos. 10) Cree un modelo para su newsletter ¿Ya ha probado a fondo su HTML? ¿Está listo para usarse? Perfecto, pero antes de nada, no se olvide de guardarlo como modelo (Plantilla) par futuras newsletters. ¡Esto es más seguro que cambiar el contenido de envíos posteriores! Puede crear un modelo en su ordenador o directamente en E-goi. ¡Solo tiene que guardar la campaña como modelo y usarlo más tarde cuando lo necesite!