Los ama o los odia, los correos electrónicos HTML son una herramienta de marketing muy popular y casi seguro que se encontrará con clientes que quieren que los construya.
Si no sabes nada acerca de los correos electrónicos HTML, es molesto desarrollar y romper todas las reglas que has aprendido como diseñador web, pero poder codificarlos es una habilidad valiosa para poseer. Hoy veremos diez consejos rápidos y fáciles para que los principiantes comiencen el camino hacia la creación de correos electrónicos hermosos y funcionales.
# 1 usar tablas
¿Esperar lo? ¿No abandonamos los diseños basados en tablas no semánticas hace años? Sí, y ahora puedes experimentar la alegría de nuevo. Desafortunadamente, la mayoría de los clientes de correo electrónico no son compatibles con un diseño de CSS antiguo como está acostumbrado. En su lugar, es volver a los años 90 y familiarizarse con el espacio de celdas.
Si no está familiarizado con los diseños basados en tablas, aquí hay un ejemplo simple.
Cada tabla se divide en filas con celdas. Cada fila está representada por
El fragmento anterior muestra la sintaxis básica para CSS en línea. Como puede ver, el código es esencialmente el mismo, simplemente lo incrusta directamente en el código de su HTML en lugar de vincularlo a otro documento.
Herramientas CSS en línea
Si se siente más cómodo utilizando una hoja de estilo externa durante el desarrollo, solo use una de las herramientas a continuación para convertirla en un estilo en línea una vez que haya terminado.
- Premailer: convierte CSS a estilos en línea y compara su código con los estándares de correo electrónico
- HTML Inline Styler: convierte las reglas CSS en atributos de estilo en línea
# 3 Anidar sus tablas
Otra peculiaridad con respecto a los clientes de correo electrónico es que son bastante inconsistentes a la hora de interpretar los márgenes y el relleno. Para superar este problema, use tablas anidadas siempre que sea posible. El código es un poco más desordenado, pero tendrá un cumplimiento mucho mayor en todos los ámbitos.
¿Para anidar? una mesa simplemente significa colocar una mesa dentro de otra. Puede anidar varias tablas, pero desconfíe de las operaciones excesivas y cree un gran desorden. Algunos clientes de correo electrónico comienzan a tener buggy alrededor de ocho nidos, pero debería poder llegar muy por debajo de este número para la mayoría de sus diseños.
# 4 Mira tu ancho
Varios clientes de correo electrónico son bastante limitados en su ancho. Por ejemplo, considere el cliente de Gmail en línea. Crear una página web de tamaño normal y luego mostrarla en la pequeña ventana de Gmail obligará al usuario a realizar un desplazamiento horizontal incómodo.
Hay demasiados clientes posibles y tamaños de pantalla para codificar para cada escenario, por lo que el consenso entre la comunidad web suele ser solo para mantener sus correos electrónicos bastante estrechos. Como regla general, intente tener menos de 600 píxeles de ancho en cada diseño de correo electrónico que cree.
# 5 Tenga cuidado con las imágenes
Hay varias complicaciones a considerar cuando se usan imágenes en un correo electrónico HTML. Primero, algunos clientes no admiten imágenes de fondo, otros sí, pero a menudo las desactivarán de manera predeterminada. Esto no es de ninguna manera un argumento de que no debe usar imágenes en su diseño. El punto de venta más fuerte de los correos electrónicos HTML es que superan la calidad y las posibilidades del texto enriquecido que ya está disponible en la mayoría de los clientes de correo electrónico. Eliminar imágenes por completo realmente puede reducir los beneficios.
En lugar de abandonar por completo las imágenes, solo asegúrate de que tu mensaje funcione bien sin ellas. Use los colores de fondo como alternativa para que cualquier texto permanezca legible y pruebe su diseño con las imágenes desactivadas.
Otra cosa que debes tener en cuenta con las imágenes es que no puedes (o al menos no deberías) incrustarlas en el correo electrónico. En su lugar, tendrá que alojarlos a largo plazo en un servidor confiable y luego vincularlos en su código.
Finalmente, asegúrate de vigilar tus tiempos de carga. Las personas están acostumbradas a hacer clic en un correo electrónico y ver el contenido, no esperar a que se carguen las imágenes. Si me haces soportar largos tiempos de carga, presionaré eliminar más rápido de lo que puedes explicar por qué valdrá la pena esperar.
# 6 Permitir la baja de la suscripción
Los correos electrónicos HTML son a menudo parte de un flujo de boletines de noticias suscritos por un usuario. Muchas veces los usuarios se registran para un servicio y ni siquiera se dan cuenta de que significa que recibirán un boletín informativo. Otras veces deciden inscribirse conscientemente pero luego cambian de opinión.
En cualquier caso, la cancelación de la suscripción debe ser un proceso indoloro que prácticamente cualquier persona que vea el correo electrónico debería poder resolver. Para lograr esto, incluya un enlace para darse de baja y asegúrese de que sea fácil de detectar. Los diseñadores y comercializadores que intentan ocultar este enlace carecen de integridad y respeto por su audiencia.
Si la persona no quiere tu correo electrónico, no lo está leyendo de todos modos. No tiene ningún valor enviar 10.000 correos electrónicos a carpetas de correo no deseado en todo el mundo. Es mucho mejor saber que aquellos que reciben su boletín informativo están realmente interesados.
# 7 Considera tu contenido con cuidado
Los mercadólogos y dueños de negocios a menudo ven un boletín electrónico como la única fuente de contacto constante con su base de clientes. Por lo tanto, a menudo se ven tentados a llenarlo con el mayor contenido e información posible. Como diseñador, ayúdelos a resistir este impulso diseñando una plantilla que muestre muy poca información en lugar de mucha información muy mal.
La clave aquí es la calidad sobre la cantidad. No leerá un email de marketing de mil palabras. Tienes, en el mejor de los casos, 3-5 segundos para captar la atención del lector promedio antes de que lleguen a eliminar. Logra esto con una carga rápida, imágenes atractivas, copia concisa y encabezados descriptivos claros.
# 8 incluye otras opciones de visualización
Además de incluir una opción para cancelar la suscripción, debe presentar al menos dos formas alternativas de ver el correo electrónico para cualquier persona que no esté recibiendo su experiencia preferida. Para los minimalistas, una versión de texto simple es la mejor.Hay un montón de gente que piensa que el correo electrónico debería ser simple y simplemente no quiere ver los gráficos que llaman la atención.
En el extremo opuesto del espectro se encuentran los usuarios que sí desean una experiencia rica, pero que están siendo retenidos por un cliente de correo con errores. Para estos usuarios, incluya un enlace bastante prominente (a menudo en la parte superior) que les permite ver el correo electrónico en un navegador. Debido a que los navegadores son infinitamente mejores para mostrar HTML y CSS, incluso puede reforzar la versión basada en navegador codificándola como si fuera una página web normal (o simplemente hacer que el navegador muestre la versión original).
# 9 prueba a fondo
Al diseñar una página web, uno de los procesos más molestos que debe atravesar es la prueba en varios navegadores. Este proceso usualmente involucra pruebas para Webkit, Mozilla, IE y quizás incluso Opera si está realmente dedicado. Si puedes creerlo, ¡diseñar para clientes de correo electrónico es aún peor!
Hay más de 30 clientes de correo electrónico populares, cada uno con sus propios estándares y soporte variable para diferentes comandos. Para empezar, prueba en los clientes de correo electrónico que tengas a mano. Regístrese para cuentas con clientes de correo web populares como Gmail, AOL y Yahoo. También asegúrese de probar las aplicaciones predeterminadas para Mac y PC.
Obviamente, no puedes probar a cada cliente. Si tiene el presupuesto, inscríbase durante un mes en un servicio como Litmus durante la fase de prueba. Esto le permitirá obtener rápidamente una vista previa del producto terminado en 33 clientes de correo electrónico diferentes y es una de las mejores maneras de garantizar que todos estén cubiertos.
Durante la etapa de diseño, asegúrese de revisar el Proyecto de Estándares de Correo Electrónico. Esta es una de las mejores fuentes disponibles para informes detallados sobre qué es y qué no es compatible con varios clientes de correo electrónico.
# 10 Usa una plantilla
La mejor manera que he encontrado para comenzar el proceso de diseño de su primer correo electrónico HTML es tomar una plantilla. Incluso si tiene en mente un diseño muy específico, modificar una plantilla desarrollada profesionalmente en lugar de comenzar desde cero puede ahorrarle muchas horas en la resolución de problemas.
Esto también le dará una buena visión de cómo otros desarrolladores estructuran y diseñan sus tablas. Solo recuerde que si va a redistribuir o vender una plantilla de correo electrónico como material de archivo, ¡no debería robar el trabajo de otra persona! En estos casos, querrá saber realmente lo que está haciendo y desarrollar su propia estructura desde cero.
Plantillas de correo electrónico gratis
Afortunadamente, no tienes que pagar ni un centavo para conseguir algunas plantillas gratuitas de calidad desde las que comenzar tu proceso de diseño. La mayoría de los servicios de correo electrónico premium ofrecen descargas gratuitas para comenzar, a menudo sin necesidad de registrarse. Echa un vistazo a los recursos a continuación:
- Monitor de campaña: 30 plantillas
- Mail Chimp: 4 Plantillas
- CakeMail: 21 plantillas
Conclusión
En resumen, al diseñar plantillas de correo electrónico, comience con una buena plantilla básica, código como el que hizo su padre hace una década, mantenga su contenido tanto conceptual como físicamente reducido (menos de 600 píxeles de ancho), facilite la cancelación de la suscripción y vea versiones alternativas , y probar como loco.
Deje un comentario a continuación y háganos saber si encontró útil el artículo. También asegúrate de compartir cualquier sabiduría que hayas aprendido en el camino para diseñar correos electrónicos HTML.