Correo electrónico y HTML: 10 errores para evitar

La creación de correos electrónicos efectivos y perfectamente optimizados para móviles es una prerrogativa de la web diseñadores y codificadores? Ya no, gracias a los famosos editores drag & drop que escriben el código por nosotros. Pero tener algunos conocimientos básicos de HTML y CSS es una habilidad fundamental para aquellos en marketing por correo electrónico.

Es por eso que queríamos centrarnos en algunos de los aspectos más técnicos del mundo del correo electrónico. Examinaremos aquellos que a menudo permanecen en la oscuridad, pero que son de importancia fundamental para el éxito de una estrategia.

En algunos aspectos, las etiquetas HTML y CSS realizan la misma función. Veamos un ejemplo, establecer el color de fondo de una tabla en HTML y CSS.

El naranja se define para el fondo en dos puntos:

• bgcolor = ”# e75c00” (en la tabla de etiquetas)
• color de fondo (en CSS)

Estos dos atributos hacen lo mismo: indicar que se genere un fondo naranja. Se superponen, pesando el correo electrónico con propiedades redundantes que realizan la misma función.

Nuestras recomendaciones:

• Mantenga el código lo más limpio posible
• Evita repeticiones innecesarias
• Intente mantener el código lo más ordenado posible mediante sangría (hay varios servicios en línea que hacen esto, como HTMLformatter o Clean CSS), para poder tener una visión general de la estructura de la comunicación
• Lleve un registro del historial de macro cambios realizados en la plantilla.

Como con la mayoría de los idiomas, también es posible agregar comentarios a HTML, para agregar «comunicaciones de servicio» al código escrito, o simplemente «notas» sobre lo que se necesita completar o mejorar.

Los comentarios pueden ser útiles, pero recuerde no abusar de ellos: aunque el destinatario del correo electrónico no los ve, el comentario permanece en la comunicación y lo pesa.

Al diseñar un correo electrónico, incluso antes de escribir el código, recuerde siempre definir algunos parámetros que servirán como pautas para las comunicaciones posteriores y que no deben modificarse durante la fase de implementación.

Veamos algunos parámetros:

• Ancho de correo electrónico
• Tamaño de imagen
• Número de imágenes
• Tamaño de fuente utilizado en el encabezado
• Tamaño de fuente del texto principal.

Para citar a Bruce Lee: «El contenido es como el agua, si pones agua en una taza, se convierte en la taza; si pones agua en una botella, se convierte en la botella».

Por lo tanto, el texto, la imagen o la llamada a la acción deben adaptarse a la estructura, no al revés.

Nuestras recomendaciones:

• Definir todas las partes de la plantilla
• Mantenerse constante entre las diferentes partes de la comunicación
• Respeta las reglas que te has dado
• Las reglas pueden romperse, pero esto debe hacerse con plena conciencia
• Si la plantilla no satisface sus necesidades, considere definir una nueva.

Como saben, muchas compañías incluyen información de contacto en el pie de página. Estos son elementos críticos cuando se trata de una dirección y número de teléfono, especialmente en dispositivos móviles. ¿Por qué?

• Es información procesable: todo lo que se necesita es hacer clic para abrir una aplicación que administrará los datos (calendario, teléfono, navegador)
• El espacio de visualización se reduce.

El problema es a menudo la representación gráfica, entre enlaces azules antiestéticos y subrayado aleatorio.

Puede intervenir con pequeñas soluciones para superar estas diferencias gráficas, rompiendo algunas reglas con el código HTML.

Cuando se trata del número de teléfono, es simple: dado que la etiqueta de anclaje le permite definir un número de teléfono utilizando tel en la propiedad href, agregue el número de teléfono sin espacios ni líneas de separación.

En cambio, una dirección o fecha debe tratarse de manera diferente. Para estos, debe definir una clase (dirección) que imponga la etiqueta de anclaje para insertar automáticamente el color dentro del cliente (color: #ffffff;). Sobre todo, debe eliminar el subrayado, que es una característica predeterminada de cada enlace (text-decoration: none;). Tenga en cuenta que ambos atributos de la clase de dirección tienen! Important, que el cliente debe aplicar independientemente de la propiedad. Sin ella, no hay garantía de que la solución haga su trabajo.

Continuando con el objetivo de tratar de mantener el peso total del correo electrónico al mínimo, preste atención a las partes del código existente que ya no tienen contenido. ¿Necesitas un ejemplo? Una etiqueta <font>, tal vez con una serie de estilos en línea, que no contiene ningún texto. No se leerá nada en el correo electrónico, sin embargo, la etiqueta sigue existiendo, lo que pesa innecesariamente el correo electrónico.

La validación de código es una aplicación gratuita creada por W3C para ayudar a los diseñadores y desarrolladores a verificar las hojas de estilo en cascada (CSS).

W3C nos ayuda al indicar errores y sugerir correcciones. Gracias a esta herramienta, es posible identificar y corregir errores estructurales más grandes.

Aunque tiene sentido tener un código limpio lo más cercano posible al estándar W3C, esto no siempre es posible y las empresas a menudo se ven obligadas a agregar una serie de soluciones alternativas a la estructura sólida, una especie de ajuste fino que extenderá el visualización correcta a tantos clientes como sea posible.

Todos tenemos cuidado sobre cómo se muestran las imágenes en los correos electrónicos y cómo afectará a los destinatarios. Sin embargo, toda esta atención se puede anular si no se considera el medio: el correo electrónico.

Especialmente porque el ancho de banda no es infinito; por eso es esencial evitar la inserción de imágenes excesivamente pesadas.

Algunasrecomendaciones:

● Mantenga un peso máximo de alrededor de 50 KB.

● Asegúrese de que la resolución de la imagen sea de 72 ppp

● Guardar imágenes en formato JPG, GIF, PNG.

Los vendedores suelen insertar imágenes creadas para otro propósito u otro soporte (una campaña publicitaria, el sitio web, etc.) en un correo electrónico. Sin tomar ciertas precauciones, la altura y el ancho de estas imágenes no funcionarán dentro del correo electrónico.

La etiqueta HTML img ayuda a optimizarlos, permitiéndonos definir el alto y el ancho de una imagen. Por ejemplo, la siguiente línea de código establece la altura en 123 píxeles y el ancho en 456 píxeles.

<img src = ”[percorsoImmagine]” height = ”123 ″ width =” 456 ″>

Una vez que se han establecido los parámetros, independientemente del tamaño real, la imagen se mostrará en el navegador con la altura y el ancho especificados.

Los GIF animados ciertamente agregan mucho énfasis a un mensaje: son un medio extremadamente efectivo para captar la atención. Además, insertarlos en el correo electrónico es muy simple.

Pero debe tener mucho cuidado, teniendo en cuenta que el tamaño de un GIF animado aumenta rápidamente según el número de fotogramas de la animación y las dimensiones.

Pero sobre todo porque algunos clientes no ven la animación en absoluto: Outlook 2007-2013 solo muestra el primer fotograma. ¿Qué debemos hacer entonces? Asegúrese de que el primer fotograma sea completo y completo para que el mensaje sea comprensible incluso si la animación no está activada.

Como sabe, de forma predeterminada, algunos clientes de correo electrónico no muestran imágenes, pero eso no es todo, porque muchos usuarios prefieren deshabilitarlas (por varias razones).

¿Cómo amortiguar estas situaciones? Con algunas propiedades de código:

• Título, que permite visualizar el contenido de una imagen cuando el puntero del mouse se coloca sobre el área de la imagen (mouseover)
• ALT: que define el texto que se mostrará si la imagen no se carga (texto alternativo).

Nuestras recomendaciones:

• Asegúrese de que las imágenes siempre tengan los atributos alt y title establecidos
• No haga que el texto insertado sea demasiado largo, ya que podría arruinar el diseño de la comunicación (para alt) o ser difícil de usar (para el título)
• Asegúrese de que el color del texto alternativo sea fácilmente legible tanto en términos de tamaño como de color, especialmente cuando tiene un fondo de color
• De preferencia, deje el texto alternativo subrayado con un enlace para que su función sea fácilmente reconocible dentro de la comunicación.