Crea un email HTML Todo lo que necesitas saber

Si bien un correo electrónico HTML le permite brindar una experiencia de usuario sorprendente a sus suscriptores, diseñar y desarrollar un correo electrónico no es nada fácil.

El ejercicio de crear un correo electrónico HTML tiene muchos matices y requiere hacer malabarismos con varios procesos sin perder el ritmo.

El secreto para minimizar el margen de error es un conocimiento profundo de todas las mejores prácticas de diseño y desarrollo. Y eso es precisamente lo que tratamos en este artículo. Siga leyendo para descubrir cómo crear un correo electrónico HTML ganador y utilizarlo en sus futuras campañas.

Determine los clientes de correo electrónico de su público objetivo

Quizás el mayor desafío de desarrollar un correo electrónico HTML es que tiene que lidiar con muchas limitaciones. Esto incluye los problemas de representación de aproximadamente media docena de navegadores web y el doble de clientes de correo electrónico en el proceso.

Ni siquiera puede darse el lujo de elegir favoritos porque cada una de estas entidades tiene una gran participación de mercado.

Pero no te preocupes; no es una tarea tan sísifana como parece hasta ahora. Para una campaña de correo electrónico exitosa, primero debe identificar los hábitos de visualización de sus suscriptores y determinar los clientes de correo electrónico que utilizan para acceder y leer sus correos electrónicos. Este conocimiento jugará un papel importante en la configuración de su viaje de desarrollo.

Por ejemplo, suponga que todos sus suscriptores son usuarios de Outlook. En este caso, solo puede centrar su atención en solucionar problemas de representación específicos de Outlook. No tiene que preocuparse por los desafíos de otros sitios.

Sin embargo, este es un escenario extremadamente ideal. En el mundo real, es probable que su lista de correo utilice una variedad de clientes de correo electrónico. Su trabajo es identificar aquellos con el mínimo común denominador. Esta primera tarea no es fácil, pero vale la pena invertir tiempo y recursos.

Una vez que comprenda este cliente, debe probar todos sus correos electrónicos en su sistema antes de enviarlos. Dependiendo de la distribución de su audiencia, es posible que aún se encuentre probando sus correos electrónicos con cada cliente, pero al menos ya no lo hará sin rumbo fijo.

Donde la mayoría de su audiencia se inclina hacia un cliente en particular, puede priorizar las pruebas en ese cliente sobre la audiencia restante.

Maximice su confianza en las tablas

La mejor manera de asegurarse de que sus correos electrónicos HTML tengan un diseño consistente es codificarlos usando tablas.

¿Qué hay del diseño CSS? Desafortunadamente, a la mayoría de los clientes de correo electrónico no les gusta el diseño CSS. O CSS no proporciona ningún soporte para el sistema de correo, o su correo electrónico no tiene un formato irreconocible.

Si bien nuestros homólogos web continúan respondiendo por CSS a diestra y siniestra, las tablas son nuestras herramientas de desarrollo preferidas en la comunidad de correo electrónico.

Al usar etiquetas de tabla, podrá evitar los problemas que encuentran Outlook, Gmail, Lotus Notes y otros cuando encuentran elementos flotantes.

Posteriormente, las tablas HTML también le permiten crear plantillas de correo electrónico adaptables. Dicho esto, las mesas tampoco están exentas de problemas. Afortunadamente, como parte de la resolución de tablas, los expertos han creado algunas prácticas recomendadas.

Mejores prácticas para tablas HTML Establezca anchos en cada celda, y establezca uno específicamente

Al trabajar con tablas HTML, debe administrar los márgenes y el relleno HTML, los anchos de las tablas, los márgenes y el relleno CSS y los anchos de las celdas. Es un plato bastante pesado.

Si establece anchos en todos los ámbitos, no hará más que invitar al caos. Para evitar esto, establezca anchos en cada celda. Tenga en cuenta que la mayoría de los clientes de correo electrónico son inconstantes al determinar el ancho de celda correcto. Entonces, el mejor curso de acción es definir uno específicamente.

Para configurar el relleno de celdas, puede usar el parámetro cellpadding. Esto le permitirá configurarlo una vez en toda la tabla. También puede especificar relleno en celdas individuales usando CSS. Cualquiera que sea el enfoque que elija, apéguese a él. Evita mezclarlos.

Tablas anidadas en su tabla principal

Aunque los clientes de correo electrónico admiten relleno y márgenes, nunca puede estar completamente seguro del resultado final. Por lo tanto, si el espacio es importante para usted (¡y debería serlo!), debe adquirir el hábito de anidar mesas dentro de su mesa principal. Puede sonar un poco anticuado, pero garantiza un espaciado uniforme en caso de falla.

Especifique una tabla de envoltura que envuelva todo su contenido

A veces notará que los clientes de correo electrónico hacen la vista gorda al fondo definido en su hoja de estilo o su etiqueta de cuerpo. Para evitar esto, especifique una tabla contenedora que envuelva todo su contenido y establezca un atributo bgcolor (utilizado para establecer el color de fondo de un elemento HTML) en ella.

Eliminar con cuidado los huecos

Si hubiera espacios en blanco entre las celdas de su tabla, definirían...