Correos electrónicos en HTML con CSS

Mensajes de correo electrónico HTML se utilizan ampliamente para todo tipo de correspondencia profesional. Más allá de boletines de correo electrónico se usan para todo tipo de aplicación de los mensajes generados, tales como recibos y confirmaciones. Mensajes estilo tiene un montón de apelación para los vendedores, diseñadores y consumidores -, pero para los programadores, es un verdadero dolor de cabeza para crear correctamente.

Creación de un correo electrónico HTML que se ve bien a todos los lectores es un trabajo que hace pruebas de cross-browser parezca fácil. ¿Qué puede salir mal? Después de llegar a su destino final, un e-mail se puede leer con cualquier número de clientes de correo electrónico de forma independiente (como Outlook, AOL, y Eudora), y los clientes aún más basado en la Web (Yahoo, Hotmail y Gmail para nombrar unos pocos) . Cada uno de estos clientes de correo electrónico muestra el mensaje de correo electrónico HTML un poco diferente, por lo que asegurar que su mensaje se muestra correctamente puede ser una tarea desalentadora.

¿Cómo son los codificadores para hacer frente a este desastre? Algunos dicen que la única solución es ir retro – de zanjas CSS y el uso de la vieja escuela para el formato HTML, pero ¿qué pasa con graves codificadores CSS que ni siquiera puede escribir una etiqueta de fuente con una cara seria? Afortunadamente, tenemos opciones.

Hojas de estilo que Stick

Cuando se está codificando un correo electrónico HTML con CSS, asegúrese de que usted no utiliza los archivos vinculados CSS (. Css unido con vínculo o importación @). Estas son las hojas de estilo más ampliamente ignorado por los clientes de correo electrónico.

Declaraciones de estilos CSS en la cabeza de un documento HTML (con etiquetas de estilo) son ignorados por algunos clientes de correo electrónico, como Gmail, por lo que se debe evitar para los estilos que son clave para el diseño de correo electrónico. A veces uso una etiqueta de estilo de los estilos que son “prescindibles” – por ejemplo, al hacer todos los eslabones de color verde en lugar de azul no es crucial, es un buen estilo para definir una etiqueta de estilo.

La forma más confiable para incluir CSS en un correo electrónico HTML es utilizar los estilos en línea. Ellos no son bonitos, pero algunos clientes de correo electrónico ignorarlos. Estos estilos se definen dentro de las etiquetas HTML en el cuerpo del documento, de esta manera: <estilo p = “color: green; font-family: sans-serif;”> verde y el texto arial </ p>. El uso de etiquetas de span para aplicar estilos en línea también funciona bien. [Quitar los espacios antes y después de "<" y ">"]

Técnicas de diseño

La mayoría de la gente sugerir el uso de la tabla, tr y td etiquetas de diseño de página en un correo electrónico HTML. Las tablas son la opción más estable, especialmente si va a crear mensajes de correo electrónico que requieren un más complicado diseño de varias columnas. Gmail, simplemente quita las etiquetas div, y la cobertura de otros clientes como Hotmail es irregular. Además, las etiquetas div flotante no funcionan en varios clientes de correo electrónico, por lo que cualquier elemento flotante se puede colocar en una tabla (con <tabla align = “left”>, por ejemplo). [Quitar los espacios antes y después de "<" y ">"]

Uso de una etiqueta div de un color o diseño de fondo es una mejor opción cuando se trabaja con un diseño de una sola columna. Aplicación de estilos a las etiquetas div con estilos en línea en comparación con una etiqueta de estilo le ayudarán a mantener ese estilo en su lugar cuando el e-mail barcos a las masas.

En el lado positivo, puede escalar de nuevo en las etiquetas div si están causando problemas, y el uso de la mesa casi universalmente admitidos, tr, td y etiquetas para cualquier cosa que no se puede lograr de forma fiable con un div.

El formato de texto

La mejor manera de asegurarse de que sus palos de formato de texto es utilizar los estilos en línea, pero la aplicación de un estilo en línea a cada fragmento de texto es tedioso y puede añadir demasiado peso adicional en el código HTML. Si no son especialmente exigentes con los detalles como el tamaño del píxel exacta de su texto, si el “negro” texto muestra gris hasta oscuro, y cómo sus vínculos están subrayados, probablemente será más feliz de aplicar el formato de texto con una etiqueta de estilo más bien de línea.

Un lugar donde los estilos en línea puede hacer una diferencia real está en los títulos y notas especiales en su correo electrónico. Cuando usted desea asegurarse de que una noticia cierta es siempre de color rojo, o que los títulos son del mismo color de la naranja como su logotipo, debe utilizar los estilos en línea para ese formato.

Algunos clientes de correo electrónico se caracterizan por cambiar el texto de una manera extraña que sólo puede ser anulado solo con los estilos en línea. Hotmail, por ejemplo, siempre muestra los vínculos en las pequeñas Verdana azul, independientemente de la apariencia del resto del correo electrónico. Si esto es un problema para usted, usted debe utilizar los estilos en línea en cada etiqueta de enlace para anularla.

Imágenes y fondos

La posibilidad de incluir imágenes de una ventaja clave al correo electrónico HTML – que le permiten mostrar y contar, además de que a menudo se usan para rastrear e-mail las tasas de apertura. Al igual que la mayoría de los beneficios, tienen sus caídas. Los spammers frecuentemente abusan de imágenes en HTML, por lo que algunos clientes de correo electrónico no los muestra a todos, sin el permiso del usuario. Algunos clientes de correo electrónico visualizar las imágenes que se incluyen en una etiqueta img, pero no las imágenes que se incluyen con CSS, o como una imagen de fondo, o ambas cosas.

Al crear mensajes de correo electrónico HTML, también se debe evitar el uso de colores oscuros de fondo, especialmente en el fondo de su correo electrónico. Si uno de tus colores de fondo más claro es ignorada por un cliente de correo, por alguna razón, los usuarios pueden ver el correo electrónico como texto negro sobre un fondo azul oscuro e ignorar el mensaje o, peor aún, el informe como spam.

General ¿y qué no hacer para HTML / CSS correos electrónicos

Para terminar, he aquí algunos de hacer y qué no hacer:

Hacer …

Utilizar las declaraciones de estilo en línea para los estilos más importantes.

Declarar estilos en una etiqueta de estilo cuando no sea absolutamente necesario.

Utilice etiquetas de la tabla de diseños de varias columnas y elementos flotantes.

Pon a prueba tu correo electrónico en múltiples independientes y clientes basados en Web de correo electrónico.

No …

Utilice hojas de estilo externas.

Utilizar etiquetas div flotante para diseños de varias columnas.

Esperar las imágenes de fondo CSS para mostrar en la mayoría de los clientes de correo electrónico.

Confíe en las imágenes aparecen, sobre todo las imágenes de fondo.