7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. HTML & CSS

6 sencillas maneras de mejorar tus correos electrónicos HTML

Read Time: 7 mins

Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)

Como muchos otros diseñadores web, me va bastante bien codificando hermosas y flexibles páginas web que se ven prácticamente idénticas en todos los navegadores web. Desafortunadamente, diseñar boletines de correo electrónico te regresa diez años en el pasado. Etiquetas obsoletas, tablas, estilos en línea, ¡Dios mío! En este artículo, listaré seis métodos que mejorarán inmediatamente los diseños de tus correos electrónicos.


Boletines de correo electrónico

Como empleado nuevo en AWeber, el servicio por suscripción de mercadotecnia por correo electrónico, mi primera tarea fue crear un par de docenas de plantillas nuevas de boletines de correo HTML para nuestros clientes. Para el diseñador web amante del código limpio, el correo electrónico HTML es un recordatorio de un triste pasado. Después de semanas de trabajo e innumerables dolores de cabeza, entregué el trabajo. También aprendí mucho sobre el diseño enfocado al correo electrónico.

Para ayudarte a evitar muchos de los dolores de cabeza que enfrenté durante las pruebas, estas son 15 cosas que puedes hacer para crear correos HTML con una excelente apariencia.


¡Crea varias cuentas de correo electrónico para hacer pruebas!

Si solamente te llevas un consejo de este artículo, que sea este, por favor. Como diseñadores, pasamos mucho tiempo creando la experiencia de usuario perfecta en la web y probando dicha experiencia a través de múltiples plataformas. Sin embargo, cuando se trata del correo electrónico, demasiados fallamos en cuanto a proporcionar la misma atención al detalle.

De manera muy similar a las pruebas para la web, crear un diseño de correo electrónico que muestre lo mismo en cada cliente de correo puede ser una verdadera pesadilla.

Para estar seguro de que tus suscriptores van a recibir tu mensaje según lo previsto, ¡prueba en todos los servicios que puedas!

Estos incluyen, pero no se limitan a:

Some of the various clients you should test your emails in.
  • Yahoo
  • Gmail
  • AOL
  • Hotmail de Windows Live
  • Outlook 2007
  • Outlook 2003
  • Lotus Notes
  • Thunderbird
  • Entourage
  • Correo de Mac

Pero espera, ¡hay más!

Algunos de estos clientes de correo electrónico tienen múltiples versiones, cada una de las cuales mostrará el CSS y el HTML de manera diferente.

Esto es parte de un correo HTML siendo procesado por la antigua versión de Yahoo.
HTML rendered in old Yahoo mail client
Este es exactamente el mismo correo siendo procesado por la nueva versión de Yahoo.
HTML rendered in new Yahoo mail client

Diferencias sutiles, lo admito. Pero tener suficientes de estas sutiles diferencias ocasiona un diseño descuidado. Y si eso no es suficiente... el navegador de Internet del usuario también puede desempeñar un papel en la manera en la que se representa tu diseño.

Ahora, antes de que tires tu computadora por la ventana debido a la frustración... este par de pasos que aparecen a continuación pueden ayudarte a descartar la mayoría de los problemas en las pruebas.


Diseña tus correos electrónicos para que se degraden con gracia

Me sorprende ver a algunos de los anunciantes más grandes rompiendo las reglas básicas de la usabilidad con respecto al correo electrónico HTML.

Estas son algunas pautas que debería regir nuestras vidas:

  • Nunca dependas de imágenes para comunicar información importante... especialmente una imagen grande. La gran mayoría de los clientes de correo electrónico tienen desactivadas las imágenes de forma predeterminada. A menos que el usuario tome la iniciativa... simplemente le enviaste un bonito mensaje en blanco.
  • Nunca dependas de las imágenes de fondo para que el texto sea legible. Asegúrate de que tu texto tenga el contraste suficiente con o sin imágenes habilitadas. Por ejemplo, Outlook 2007 no mostrará imágenes de fondo en las celdas de las tablas, incluso si las imágenes están habilitadas.
  • Proporciona un enlace para las personas que tienen problemas para ver tu mensaje. Bueno, esto no es absolutamente necesario, pero es un gesto de consideración dar a tus suscriptores la opción de ver tu mensaje en sus navegadores web (especialmente si es un diseño particularmente lleno de HTML).
  • Usa etiquetas ALT en las imágenes importantes. ¡No puedo enfatizar esto lo suficiente! Con las imágenes deshabilitadas de forma predeterminada, las etiquetas ALT descriptivas son tu última y mejor oportunidad de convencer a un usuario para que habilite las imágenes.
  • Al usar etiquetas ALT, deja solo lo esencial. Llena las etiquetas ALT importantes y deja las otras en blanco.
    (Nota: ¡no dije que las excluyeras!)

Este es el encabezado de un correo electrónico que recibí de Discovery Health:

Screenshot from Discovery Health showcasing a cluttered looking email.Screenshot from Discovery Health showcasing a cluttered looking email.Screenshot from Discovery Health showcasing a cluttered looking email.

Tomé esta captura de pantalla de mi cuenta de Gmail, antes de habilitar las imágenes. ¿Te das cuenta de que el texto "bullet" y "spacer" de las etiquetas ALT estorba?

Agregar etiquetas ALT a los elementos que solo sirven para propósitos de diseño satura a este último y distrae de tu mensaje.


Usa tablas para estructurar tu diseño

¿Qué? Pasé todo este tiempo aprendiendo CSS ¿y ahora tengo que regresar a las tablas? Cuando se trata del diseño de correos electrónicos, las tablas son tan populares como en el año 2003: estas son lo más cercano que tenemos a los estándares.

Algunas cosas a tomar en cuenta:

  • Asegúrate de establecer todos los atributos de tabla disponibles en donde sea posible. Esto incluye el cellpadding (relleno de celdas), cellspacing (espaciado de celdas), border (borde), valign (alineación vertical), width (ancho) y height (alto).
  • Las tablas anidadas son tus amigas. Asegúrate de usar una sangría adecuada para tener un código limpio y fácil de leer.
  • Usa el atributo background de la celda de una tabla para establecer imágenes de fondo. Esta es la manera más sencilla de evitar que los fondos no aparezcan en Gmail.

    Nota: tus imágenes de fondo se comportarán como si estuvieran en formato de mosaico... así que planifica en consecuencia.

  • Ten en cuenta que las imágenes de fondo aplicadas a las tablas o los divs no son compatibles con Outlook 2007. De hecho, la única forma de usar una imagen de fondo en Outlook 2007 es aplicarla al cuerpo de un correo electrónico, lo que por supuesto no es compatible con otros clientes de correo como Gmail, Yahoo o Hotmail de Windows Live. Eso es estupendo, ¿verdad?

    Yo tampoco creo que lo sea.


Usa estilos en línea al codificar tu CSS

Algunos clientes de correo populares ignoran el código del interior de tus etiquetas head. Gmail y Hotmail son culpables particulares que vienen a la mente.

Con tu diseño configurado en formato de tabla, es momento de aplicar estilos a tu texto e imágenes.

Estos son algunos consejos y trucos para garantizar que tus mensajes se vean casi idénticos en todos
los navegadores:

  • Usa etiquetas break como sustitutos del relleno vertical. Para modificar la cantidad de espacio que usan, intenta envolverlas en etiquetas span y configura un tamaño de fuente más pequeño o más grande.
  • Usa estilos en línea de forma repetitiva y frecuentemente. Aplicar una etiqueta font a una tabla padre no significa necesariamente que esta heredará ese atributo a todos sus hijos. Asegúrate de establecer estilos en línea en todos tus elementos HTML.
  • Aplica estilos en línea detallados a los enlaces. Especialmente para los usuarios de Gmail, debes establecer estilos específicos para cada enlace. De lo contrario, estos heredarán la familia de fuentes predeterminada, el tamaño y el color establecidos por el navegador de cada usuario.
  • Envuelve tus imágenes en etiquetas span y establece los atributos de la fuente para estilizar tu texto ALT en consecuencia. Esto te permite estilizar tu texto ALT, volviéndolo más legible cuando las imágenes estén deshabilitadas.

Usa el formato de la bandeja de entrada de Gmail a tu favor

¿Sabías que la línea del asunto de todos los correos electrónicos enviados a una cuenta de Gmail está seguida por el primer fragmento del texto contenido en ese correo en particular?

¡Por qué no usas esto a tu favor!

Gmail SnippetGmail SnippetGmail Snippet

Arriba puedes ver una imagen de mi bandeja de entrada de Gmail.

Ambos boletines tienen el mismo contenido en el encabezado.

Solamente hay una diferencia: Newsletter 1 (Boletín 1) aprovecha el formato de la bandeja de entrada de Gmail.

Así es como lo hice:

Inserta una imagen de 1px x 1px como el primer elemento en tu correo electrónico. Envuelve la imagen en etiquetas span, estableciendo el color de la fuente para que sea el mismo del fondo. Cualquier texto que coloques en las etiquetas ALT de tu imagen de 1px x 1px ahora reemplazará ese fragmento de texto de Google en la bandeja de entrada del usuario.

¡Es así de fácil! Esta sutil diferencia destacará tu mensaje de entre los otros correos electrónicos contenidos en la bandeja de entrada del lector.


Entonces, ¿ahora qué?

He hecho mi mejor esfuerzo para compartir algunas cosas que hago al crear correos electrónicos HTML. ¡Es tu turno!
¿Qué haces para diseñar, codificar y probar tus campañas por correo electrónico?

Cualquier recomendación, consejo o truco que desees agregar será muy apreciado por tus compañeros de la comunidad de diseño.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.