9 buenas prácticas de HTML para email

Crear un email HTML bonito e impactante con una experiencia de usuario coherente es una tarea abrumadora, incluso para quienes son expertos. La cosa es que, al ser menos avanzados que los navegadores web, los proveedores de correo no se ponen de acuerdo entre ellos sobre qué funciones admiten ni sobre cómo las renderizan. El resultado es que te quedas con una cantidad limitada de herramientas y un montón de problemas y errores inesperados. Aun así, eso no significa que no puedas dominar el desarrollo de emails por tu cuenta.

La clave de un desarrollo de emails exitoso está en adoptar las buenas prácticas, ceñirse a los estándares, usar opciones seguras y aprovechar herramientas probadas con el tiempo. Nuestra guía de buenas prácticas para el desarrollo de emails HTML explica cómo los email marketers profesionales crean diseños de email exitosos con una tasa de entregabilidad alta y conversiones impresionantes sin perder los nervios.

Buenas prácticas de HTML para el diseño de emails

Vamos a empezar por el diseño, ya que es lo primero que tu clientela ve, entiende y a lo que responde. Está detrás de las conversiones y de las tasas de apertura. Según algunos estudios, más del 90% de las personas encuestadas se fija en el aspecto visual a la hora de decidir una compra. Por eso, igual que ocurre con el núcleo y la funcionalidad del email HTML, el diseño tiene que ser impecable. Repasemos las buenas prácticas del email HTML para descubrir cuáles son los aspectos clave que debes dominar.

Comprobación del email HTML

Conoce a tu público

Toda campaña de email marketing empieza por definir tu público objetivo y segmentar la lista de suscripción en consecuencia. Aunque parezca que no tiene nada que ver con el diseño, en realidad es la piedra angular de todo lo que ocurre en el software de email marketing, y crear el diseño de un email HTML no es la excepción.

Conocer a tu público y, sobre todo, qué clientes de correo usa es la base sobre la que construirlo. Como ya hemos señalado, los clientes de correo, incluidos grandes nombres como Gmail, Outlook, Apple iOS y Windows Mail, no coinciden en el soporte de las funciones del email HTML. Por eso, necesitas saber qué soluciones y propiedades usar para evitar que el diseño se rompa.

Con herramientas de analítica puedes definir los hábitos y las preferencias de dispositivo de quienes te leen. Esta información puede ayudarte a crear un diseño que sea lo más compatible posible con su lector de correo. Muchas pequeñas empresas que se dirigen al público local o a un mercado concreto se benefician de esta práctica a diario.

Ahora bien, ¿qué pasa si te diriges al mercado internacional o necesitas servir datos a todo tipo de grupos? Entonces tienes que lidiar con una situación en la que hay una mezcla de clientes de correo. En ese caso, la segmentación puede ayudarte a definir varios tipos de dispositivos que necesitas cubrir. Sigue este sencillo procedimiento de 3 pasos:

• Primero, define el cliente de correo principal, el dispositivo más popular entre tus suscriptores.
• Segundo, crea un diseño de email HTML usando funciones compatibles con ese cliente de correo principal.
• Tercero, prueba el diseño del email en el mínimo común denominador. Aquí tienes que encontrar un compromiso para asegurarte de que el diseño se ve bien en todas las situaciones.

Este enfoque funciona de maravilla para la mayoría de los lectores de correo, salvo para Outlook. La cosa es que es uno de los clientes de correo más problemáticos. Es difícil encontrar un compromiso, sobre todo cuando hay versiones antiguas de por medio. Resulta mucho más fácil aislar a estos suscriptores y crear un diseño de email específico para ellos. Por eso, si tus usuarios emplean Outlook en su mayoría, es muy recomendable crear una versión solo para este lector de correo y enviarla al segmento de suscriptores correspondiente.

¿Y si esta es tu primera campaña? ¿Y si nunca has enviado nada a esta lista de suscriptores o simplemente no tienes ninguna información sobre el uso de dispositivos? Entonces sigue este enfoque:

• Cíñete a las opciones seguras.
• Emplea las diez reglas de oro de un buen diseño de email HTML.
• Investiga por tu cuenta. Puedes analizar al público tú mismo, ya que las direcciones de correo dan pistas sobre qué clientes de correo es probable que usen tus suscriptores. Por ejemplo, si tienen cuentas en Outlook.com, Yahoo o Gmail, seguramente usarán las plataformas correspondientes.
• Haz primero tests A/B para ver qué funciona mejor.

Email de Grammarly

Prioriza el diseño adaptado al móvil

Según estudios recientes, hoy en día más del 70% de los emails se abren en el móvil. Ni que decir tiene que el diseño de un email HTML debería estar adaptado al móvil. Sin embargo, hay una trampa oculta: los email marketers a menudo usan diseño responsive y diseño adaptado al móvil como sinónimos, pero no son lo mismo aunque tengan características parecidas.

Cuando creas un email HTML, es fundamental pensar el diseño desde la perspectiva del móvil. Por ejemplo, en pantallas pequeñas, Apple recomienda fijar la tipografía en 16px, ya que así los caracteres resultan legibles y se distinguen bien. En cambio, el diseño responsive, que es una solución de talla única, solo implica cambios graduales en las proporciones. Por eso, a menudo vemos maquetaciones móviles donde la fuente está fijada en 14px o incluso en 12px.

En algunos dispositivos, los principios responsive pueden funcionar de maravilla; sin embargo, si quieres garantizar la mejor experiencia de usuario en móvil, es vital aplicar las buenas prácticas para dispositivos pequeños.

Ten en cuenta estas reglas básicas del diseño adaptado al móvil que todo email marketer debería conocer:

• Cuando diseñes para iPhone, es importante recordar las pantallas retina, que exigen que uses elementos visuales (imágenes y gráficos) de alta resolución.
• Los elementos de control, como los botones de llamada a la acción y los enlaces de baja, deben poder pulsarse con facilidad. Según Apple, el área pulsable debería tener al menos 44px de ancho.
• Todos los detalles necesarios de la interfaz (navegación, llamada a la acción, enlace de baja y contactos) deben quedar a mano. Si creas un diseño de email para móviles y phablets, deben situarse en la parte central. Si lo creas para tabletas (iPad mini o vistas horizontales en phablets), estos detalles deben ir en los laterales.
• Maximiza el formato. Haz que los titulares sean cortos. Divide el texto en bloques pequeños que se puedan escanear con facilidad.
• No uses tipografías decorativas. Elige familias tipográficas limpias y sencillas.
• Evita un cuerpo de email HTML largo. No obligues a tus usuarios a desplazarse. Es complicado leer newsletters largas en pantallas pequeñas, sobre todo sobre la marcha.
• Coloca el botón de llamada a la acción arriba y duplícalo abajo.
• Busca un contraste óptimo entre el fondo y el primer plano. Mantén tus diseños con mucho contraste, porque el email se puede abrir a plena luz del sol.
• No dependas de los hipervínculos. Son difíciles de pulsar. Si es posible, conviértelos en botones.
• No hagas que la imagen principal ocupe toda la pantalla. Encuentra el equilibrio entre la información visual y la textual, y muestra el mensaje principal en la primera pantalla.
• Juega con inteligencia con el espacio en blanco. El espacio en blanco puede hacer o deshacer tu diseño con facilidad. No te pases. Demasiado espacio en blanco empeora la experiencia de lectura, mientras que la ausencia de espacio en blanco puede arruinar toda la experiencia de usuario. La buena práctica sugiere añadir espacio alrededor de los botones, los enlaces sueltos y las imágenes, y pulir la longitud de línea y el espacio entre caracteres.

Infografía de estadísticas de uso móvil

Céntrate en la personalización

Uno de los pilares del buen email marketing dice que, si quieres que una newsletter genere tasas de conversión altas, necesitas que tu clientela conecte emocionalmente con tu producto o servicio. Sin esa conexión emocional, no serás capaz de tocar la fibra ni de lograr resultados significativos.

La clave de esa conexión está en la personalización, que se materializa a través del mensaje y del diseño. Mientras que las funciones de personalización (como el nombre del destinatario o una oferta basada en el historial de compras de la clientela) hablan al usuario, el diseño enmarca ese diálogo y hace que la conexión resulte impactante y emocional.

Sea cual sea el diseño que tengas en mente, es fundamental personalizarlo. Analiza a tu público, segmenta a tus suscriptores según sus preferencias, hábitos de compra, género, ubicación y edad, y ajusta el diseño en consecuencia.

Un buen ejemplo de personalización a través del diseño es el uso del color adecuado. Como sabemos, las personas emiten un juicio inconsciente sobre un producto basándose en el color. Si usas el color correcto para tu mercado objetivo, reforzarás la conexión emocional con el público e, ipso facto, aumentarás las tasas de conversión.

Por ejemplo, cuando creas un diseño de email para un público femenino, es aconsejable optar por tonos suaves de azul y morado, ya que, según la psicología del color, las mujeres los prefieren. En cambio, a un público masculino le encantará ver tonos brillantes de azul y verde, mientras que el público adolescente suele decantarse por colores consolidados por el marketing, como el rosa o el azul.

Las 10 reglas de oro de los diseños de email exitosos

Como ya hemos señalado, para garantizar el éxito del diseño de un email HTML necesitas conocer a tu público, usar la segmentación y sacar partido a la personalización. Sin embargo, eso no es todo: hay otros consejos que pueden beneficiar a tu proyecto.

Veamos las prácticas que están en la base de toda campaña exitosa, sea cual sea el nicho y el tamaño de la organización. Son las diez reglas de oro de un buen diseño de email HTML. Tenlas presentes e intenta aplicarlas en cada proyecto:

• Crea un asunto potente. Un buen asunto puede hacer mucho bien a tu campaña de email marketing. Por ejemplo, ayuda a que la newsletter destaque en la bandeja de entrada, despierte interés y anime a los usuarios a abrirla y volver a abrirla.

Además, ayuda a que la newsletter atraviese los filtros de spam, porque es uno de los varios factores que los ESP comprueban antes de conceder a la newsletter acceso a la bandeja de entrada del usuario. Si el asunto "huele a chamusquina", el servidor receptor bloqueará el email.

Por eso, asegúrate de que tu asunto sea potente, único y valioso. Para ello, comprueba que cumple las reglas básicas:

• que no incluya frases spam habituales;
  • que vaya al grano;
  • que aporte valor;
  • que esté personalizado;
  • que use solo caracteres legítimos;
  • que tenga el formato adecuado.
• Busca enlaces rotos. Además de revisar la gramática y la puntuación del cuerpo de tu email HTML, es fundamental asegurarte de que todos los enlaces y botones funcionan. Los enlaces rotos pueden arruinar la experiencia de usuario y convertirse en un obstáculo para llegar a la bandeja de entrada, ya que los ESP los consideran una señal de spam. Es un descuido habitual: entre los emails que analizamos, el 22% contiene un enlace roto, así que un repaso rápido antes del envío te pone por delante de casi una cuarta parte de los remitentes.
• Busca enlaces en listas negras. Es malo tener un enlace roto, pero es aún peor tener un enlace en una lista negra. Si el cuerpo de tu email HTML incluye enlaces que llevan a sitios web en listas negras o poco fiables, los ESP pueden marcar la newsletter como spam y rechazarla. Por eso, antes de enviar una newsletter, revisa dos veces las fuentes y los enlaces que quieres que visiten tus usuarios.
• Evita los enlaces cortos. Aunque acortar enlaces ayuda a reducir el tamaño del archivo HTML, también es una técnica cada vez más popular entre los spammers. Muchos ESP desconfían mucho de esta práctica. Al acortar enlaces, aumentas tus posibilidades de que te marquen como spam. Por eso, evítalos a toda costa.
• No te pases de 600px de ancho con tu maquetación. Aunque puedes ampliar el área hasta 800px si tu público objetivo lo permite, con esta opción segura te resultará mucho más fácil garantizar que tu email HTML funciona bien en un montón de dispositivos. Además, un ancho de 600px centra la atención del usuario en la información importante sin resultar invasivo y hace que la newsletter parezca valiosa.
• No dependas de las imágenes para transmitir el mensaje y evita los diseños hechos solo de imágenes. Aunque comemos por los ojos, y eso convierte a las imágenes en la principal fuerza visual que transmite el mensaje y causa impresión, cuando se trata del diseño de emails HTML no todo es tan sencillo. La cosa es que muchos clientes de correo bloquean las imágenes de los remitentes que escriben por primera vez, mientras que otros simplemente no admiten ese formato. Por eso, depender de las imágenes puede ser mala idea.
• Usa tipografías seguras como Arial, Comic Sans, Courier, Times New Roman, Trebuchet MS, Verdana y Georgia. Si quieres usar alguna de las fantásticas fuentes web de Google, asegúrate de tener una fuente de reserva, ya que los proveedores de correo no las admiten de forma generalizada. Además, colócalas detrás de una media query condicional de WebKit para abordar los problemas con Outlook. Por último, especifica de forma explícita la familia tipográfica, el tamaño y el color para que el cliente de correo no los sobrescriba.
• Optimiza el cuerpo del email HTML. La optimización es fundamental en el email HTML. Si tu newsletter supera cierto peso, el servidor receptor puede rechazarla al considerarla un ciberataque. Por eso, es muy aconsejable minimizar tu código y optimizar las imágenes.
• Dale un toque extra con trucos psicológicos. Varios trucos psicológicos pueden ayudar al cuerpo y al diseño de tu email HTML a lograr el objetivo deseado. Por ejemplo:
  • Asegúrate de que la zona hero apoya la oferta principal con una imagen impactante.
  • Usa el principio de la pirámide invertida para transmitir un mensaje y animar a los usuarios a pulsar el botón de forma no invasiva.
  • Añade elementos dinámicos como efectos de rollover en imágenes y botones, tooltips, botones de radio y transiciones para enriquecer la experiencia de usuario.
  • Usa gifs animados para dejar una impresión duradera. Los clientes de correo los admiten de forma generalizada, así que puedes usarlos sin mucha preocupación.
  • Adapta funciones interactivas e impresiona a tus visitantes con una experiencia gamificada. Aunque las funciones interactivas tienen algunos problemas de compatibilidad y soporte, muchas versiones nuevas de los clientes de correo pueden servirlas. Por eso, si tu mercado objetivo usa las últimas versiones de Apple Mail y Gmail, disfrutará sin duda de la experiencia.
• No uses nunca cosas como:
  • Flash;
  • JavaScript;
  • Vídeos;
  • Audio;
  • Formularios.

Tienen un soporte mínimo o directamente ninguno.

Email animado de Adobe

Buenas prácticas para el desarrollo de emails HTML

Para disfrutar de todas las ventajas del diseño de emails, tienes que asegurarte de que el núcleo de la newsletter (estructura, maquetación y unidades funcionales) funciona como debe. Por eso, sigue las buenas prácticas para el desarrollo de emails HTML. Esto importa más de lo que la mayoría de los remitentes cree: entre los emails que analizamos, solo el 30% supera nuestra comprobación de buenas prácticas de HTML, lo que significa que la inmensa mayoría deja margen para problemas de renderizado y de entregabilidad que los pasos siguientes te ayudan a evitar.

Aprovecha al máximo las tablas

Por mucho que quieras usar flexbox o grid en tu maquetación HTML, por desgracia es imposible, ya que los clientes de correo no admiten estas funciones tan particulares de CSS. Aunque puedes intentar usar divs y floats, sus capacidades también son limitadas. Por eso, lo único que puedes hacer para ir sobre seguro es usar tablas. Son las herramientas más fiables para crear una maquetación.

Cuando uses tablas, recuerda que el consejo general es mantenerlo simple y ceñirse a una estructura de una sola columna. Aun así, puedes probar maquetaciones de dos e incluso tres columnas si envías newsletters a un público que las abre en ordenadores de escritorio o portátiles.

Para construir una estructura compleja, puedes anidar tablas. Sin embargo, tienes que tener en cuenta varias cosas importantes:

• Usa el atributo "align=left" con un ancho fijo en cada tabla para colocarlas en horizontal.
• Evita las celdas de tabla vacías, ya que algunos clientes de correo pueden interpretarlas mal. En su lugar, puedes usar un carácter de espacio de no separación con un tamaño definido en CSS.
• Elimina cualquier espacio entre las etiquetas, ya que pueden romper la maquetación.
• Aprovecha al máximo los atributos nativos de las tablas, como cell padding, valign, align y width, para fijar dimensiones o posicionar elementos dentro de las celdas.
• Usa una sola tabla padre.

Tablas HTML

Ten cuidado con los estilos CSS

Los estilos CSS son uno de los puntos más débiles del desarrollo de emails. La mayoría de las funciones modernas de CSS3 no están admitidas de forma generalizada por los clientes de correo. Además, hay muchas cosas prohibidas a la hora de aplicar estilos. Por ejemplo, tienes que mantenerte lejos de prácticas tan habituales como:

• las declaraciones de estilo compuestas;
• las declaraciones abreviadas;
• los selectores complejos;
• los pseudoelementos;
• las propiedades de maquetación.

Y eso no es todo: cuando se trata de usar estilos en HTML, es aquí donde necesitas usar estilos en línea, una práctica que se considera mala de forma generalizada en el diseño de sitios web pero que resulta ser un salvavidas en el diseño de emails.

Para colmo, si quieres ir sobre seguro, es mejor usar

• CSS2 en vez de CSS3,
• atributos HTML en vez de CSS,
• padding en vez de margin,
• background-color en vez de background.

Sé responsive

El diseño responsive es una de las buenas prácticas de HTML para email más importantes, ya que hoy en día manda la web móvil. Estas son las principales recomendaciones que ayudan a que un diseño de email se adapte con elegancia a distintos tamaños de pantalla:

• Usa una maquetación de una sola columna para evitar reorganizar elementos, algo que puede complicarse con las tablas anidadas.
• Usa media queries para pulir el diseño en cada breakpoint importante.
• Redimensiona las imágenes para que encajen en la pantalla. Además, céntralas para que la información vital entre por los ojos al instante.
• Ajusta el tamaño de fuente según cada breakpoint. Recuerda que las pantallas pequeñas requieren un tamaño de fuente mayor de lo que crees. Asegúrate también de que el letter-spacing y el line-height crean una experiencia de lectura óptima.

Hay varias formas de sacar adelante un diseño responsive: media queries con un conjunto de breakpoints y una maquetación fluida con los cálculos hechos del lado del CSS. Cada enfoque tiene sus pros y sus contras.

Echa un vistazo a estos artículos útiles para empezar con buen pie:

• Diseño de emails responsive: consejos y consideraciones
• Cómo crear una plantilla de email responsive

Por último, pero no por ello menos importante

Cuando crees un diseño responsive, es vital ceñirse a los estándares del buen código, como:

• mantén tu código lo más ligero posible;
• mantén tu código limpio;
• estructura tu código;
• añade comentarios;
• revisa y vuelve a revisar no solo la lógica y la estructura, sino también la sintaxis.

Ejemplo de diseño de email responsive

Implanta los protocolos de autenticación

Los protocolos de autenticación (SPF, DKIM y DMARC) aportan una capa de seguridad a tus emails. Aunque no son obligatorios, sí son muy recomendables para toda empresa. Hay varias buenas razones para aplicarlos:

1. Ayudan a combatir los ciberdelitos.
2. Ayudan a establecer una conexión clara y transparente entre los suscriptores y el remitente.
3. Ayudan a aumentar la reputación de tu remitente, lo que a su vez mejora las tasas de entregabilidad con servicios y las tasas de apertura.
4. Hacen que hasta las empresas con una reputación baja parezcan fiables.
5. Permiten a las empresas establecer una política sobre las newsletters rechazadas.
6. Aportan información sobre lo que ha pasado en el ecosistema remitente-destinatario.
7. Te dan una oportunidad real de llegar a la bandeja de entrada, porque la mayoría de los ESP los usan como factores principales para decidir el destino de un email.

SPF, DKIM y DMARC ayudan a los email marketers profesionales a garantizar que sus emails llegan a su destino sanos y salvos. Por eso, deberían estar configurados.

Configura la cabecera List-Unsubscribe y la consulta de DNS inverso

Junto con los protocolos de autenticación, hay otra cosa más que necesitas hacer con la persona que administra tu servidor de correo: configurar una cabecera list-unsubscribe y la consulta de DNS inverso.

Aunque estos dos mecanismos no están relacionados, trabajan hacia el mismo objetivo, es decir, hacer que tu email parezca digno de confianza y que tu empresa parezca fiable.

Vamos a verlos un poco más de cerca.

La cabecera list-unsubscribe es una cabecera de email que incluye la orden para dar de baja a los usuarios directamente de una lista de correo. Contiene instrucciones que indican a los clientes de correo qué mecanismo deben integrar en el email para que los usuarios puedan darse de baja de la lista de forma rápida e indolora. Ten en cuenta que hoy en día un enlace de baja dentro del cuerpo del email HTML no basta. Para que tus usuarios se sientan cómodos en su relación contigo y para asegurar a los ESP que tu empresa cumple la ley, es importante configurar una cabecera list-unsubscribe.

La consulta de DNS inverso es una técnica de consulta que empareja nombres de dominio y direcciones IP. Está en el núcleo de muchos instrumentos de analítica. También es uno de los muchos factores que los ESP tienen en cuenta al decidir sobre la autenticidad de tu newsletter. Si la consulta de DNS inverso no está configurada, los ESP pueden rechazar sin problema el email que venga de ese servidor. Por eso, necesitas pedirle a tu proveedor de servicios de correo que la configure para tu dominio, ya que no viene configurada por defecto.

Comprueba las listas negras

Nadie quiere tratar con empresas que están en listas negras, y a nadie le importa cómo llegaron ahí. Tu reputación lo es todo: debe ser impecable. Punto final. Por eso, las listas negras pueden ser una auténtica maldición. Pueden destruirlo todo, empezando por tu reputación del remitente en los territorios digitales y acabando por la reputación de tu marca en el mundo real. Tienen consecuencias tan malas para tu marca como:

• el daño a la reputación del remitente;
• el daño a la reputación de la marca;
• la pérdida de beneficios;
• la pérdida de clientela y seguidores.

El principal problema con las listas negras es que resulta ridículamente fácil entrar en una y quedar bloqueado. Por ejemplo, si te saltas los límites de las buenas prácticas del email HTML, o si te vienes arriba durante las fiestas y envías demasiados emails a tus suscriptores, puedes meterte en un lío enseguida.

El segundo gran problema de las listas negras es que no te avisan de que estás dentro. Te quedas a oscuras mientras la lista negra empieza a destruir la reputación de tu remitente y a anular las tasas de entregabilidad y de apertura.

El tercer problema es que hay más de cien listas negras en la red: listas negras de malware, listas negras de DNS, listas negras de IP, listas negras de phishing y listas negras de spam. Cada una tiene su política y sus criterios. Por supuesto, no todas tienen el mismo impacto en tu campaña; sin embargo, con el tiempo, hasta una lista negra poco conocida puede arruinar tu estrategia de marketing.

Así que es fundamental mantenerse lejos de las listas negras. Como dice una de las buenas prácticas del email HTML, comprueba las listas negras con regularidad y actúa rápido. Por ejemplo, puedes usar herramientas como

• Unspam.email,
• Spamhaus Block List,
• Barracuda.

Si estás dentro, que no cunda el pánico. Visita el sitio web oficial del proveedor de la lista negra y familiarízate con el protocolo para salir. Arregla todos los problemas de tu campaña, dominio, IP y servidor de correo, y registra una solicitud para que te saquen de la lista.

Comprobación de listas negras de Unspam.email

Defiende la accesibilidad

Los desarrolladores de emails siempre pasan por alto la accesibilidad, sobre todo porque consideran que este aspecto es prerrogativa del diseño web. Sin embargo, tu newsletter digital también debería ser accesible para cualquier persona. Una discapacidad nunca debería ser un obstáculo. Además, está más al alcance de lo que su fama sugiere: entre los emails que analizamos, el 84% supera las comprobaciones de accesibilidad, así que las prácticas siguientes están perfectamente a mano para la mayoría de los remitentes.

Por eso, sigue estas buenas prácticas del email HTML para garantizar un nivel adecuado de accesibilidad:

• Adopta código semántico. Un formato correcto, como usar etiquetas para los titulares o etiquetas

  para los párrafos, ayuda a los lectores de pantalla a interpretar bien el cuerpo del email HTML. Esto también mejora la experiencia de lectura y permite al usuario navegar con facilidad por el contenido.

• Define todos los atributos esenciales. Esto incluye el atributo "lang" para definir el idioma, la etiqueta "title" para definir el título del email y "Content-Type" con la meta etiqueta "charset" para codificar bien los caracteres. Este procedimiento no solo ayuda a evitar que se rompa el patrón de lectura del suscriptor, sino que además garantiza que el cuerpo del email HTML es válido desde el punto de vista del código.
• Define el texto alt cuando haga falta. Poner alt en las imágenes es una práctica muy conocida. Sin embargo, es importante entender que no todas las fotos lo necesitan. Los textos alt solo son obligatorios en los elementos que aportan valor a quien lee. Si la imagen es redundante, no debería llevar texto alternativo, porque no sirve de nada. Lo mismo ocurre con los elementos decorativos o el material gráfico que cumple el papel de mero detalle estético. Ten en cuenta también que el texto alt se puede estilizar.
• Garantiza un contraste óptimo. Según las WCAG 2.0., debería ser de al menos 4.5:1.
• Garantiza una jerarquía de la información y una estructura lógica adecuadas en el cuerpo del email HTML.
• Saca partido a ARIA. Las Aplicaciones de Internet Enriquecidas y Accesibles son un mecanismo potente que ayuda a los lectores de pantalla a entender mejor la situación. Sigue estos consejos probados con el tiempo:
  • Asigna el role "Presentation" a cada tabla implicada en construir la maquetación.
  • Asigna el role "article" a cada bloque de información.
  • Asigna el role "img" a cada imagen.
  • Asigna el role "listitem" para indicar una lista.

Echa un vistazo a Accesibilidad en el diseño de emails: por qué es importante mejorarla para más información sobre este tema.

Prueba todo

Sea cual sea el email que crees, es fundamental hacer pruebas con regularidad. Es una de las buenas prácticas del email HTML más importantes y, por desgracia, más ignoradas. Las comprobaciones periódicas garantizan que todo va bien con tu email y tu campaña. Por eso, antes de enviar un email a tu clientela, asegúrate de haber hecho estas cosas:

• Revisa la gramática. A nadie le gustan las erratas en el cuerpo del email HTML. Hacen que tu marca parezca poco competente y barata. Sigue la lista de comprobación de Cómo crear y verificar una newsletter antes de enviarla para asegurarte de que el cuerpo del email HTML está libre de errores.
• Comprueba la compatibilidad con dispositivos usando un test de renderizado de emails gratuito para descubrir qué problemas de renderizado se te han escapado. Es uno de los asuntos más importantes, ya que garantizar que tu email HTML funciona de forma coherente en todos los clientes de correo, dispositivos y navegadores populares es una pesadilla. Aunque hayas hecho los deberes a la perfección y hayas segmentado a tus suscriptores según el uso de dispositivos, sigue siendo importante asegurarte de que tu diseño se ve bien pase lo que pase. Si el precio de la previsualización en varios clientes de correo te preocupa, nuestra alternativa a Litmus cubre las mismas comprobaciones de renderizado sin ese coste desmesurado.
• Comprueba las listas negras y el spam. Ten en cuenta este artículo útil, Verifica tus newsletters para detectar spam y prueba la entregabilidad, para conseguir más información sobre este asunto.
• Comprueba la puntuación general de tu email HTML. Es hora de profundizar en la salud de tu campaña de email marketing actual. Con herramientas profesionales como Unspam, puedes descubrir enseguida las cosas que pueden costarte un lugar en la bandeja de entrada de tus suscriptores. Unspam comprueba aspectos vitales como
  • los protocolos de seguridad, como SPF, DKIM y DMARC: si están bien configurados;
  • el asunto: si es a prueba de spam;
  • el cuerpo del email HTML: si sigue las buenas prácticas para que no active los filtros de spam ni las listas negras, y mucho más.

Por último, pero no por ello menos importante, haz tests A/B. Pulir el diseño del cuerpo de tu email HTML no basta para garantizar el éxito de la campaña; es fundamental entender cómo reaccionan tus suscriptores al diseño, la oferta y el funcionamiento de la newsletter, ya que cada gusto es distinto. Un mapa de calor del email hace visible esa reacción, mostrando exactamente dónde se fija y dónde pulsa quien lee, para que puedas mover la llamada a la acción a donde ya está la atención. Para eso, necesitas hacer tests A/B. Te darán pistas sobre lo que deberías incluir dentro de tu newsletter para conseguir una respuesta adecuada de tus suscriptores y convertir a las personas interesadas en clientela que compra.

Formas sencillas de crear un email HTML

Lo bueno del desarrollo de emails HTML es que nadie ha dicho que tengas que hacerlo todo tú. Crear un email decente es todo un reto: hay muchísimas prácticas que seguir, muchísimos instrumentos que usar y muchísimas comprobaciones que hacer. Aun así, puedes salir adelante con facilidad si cuentas con algo de ayuda.

Por ejemplo, si tienes conocimientos de programación, puedes disfrutar de las ventajas de las plantillas de email HTML prediseñadas, que aportan una base fiable sobre la que construir. Echa un vistazo a estas plantillas de email HTML gratuitas.

Si no tienes conocimientos técnicos, puedes delegar esta tarea en herramientas que hacen todo el trabajo pesado, como Postcards. Postcards es uno de los recursos más populares y de confianza de los email marketers de todo el mundo. Cuenta con un creador de plantillas de email intuitivo de arrastrar y soltar, cientos de bloques preciosos hechos a mano y probados sobre el terreno, opciones de personalización prácticas y un montón de funciones, como el historial de versiones o la integración nativa con ESP populares como Mailchimp. También es nuestra opción favorita entre los mejores creadores de plantillas de email de 2026.

Postcards

Conclusión

Seamos sinceros: el diseño de emails se ha quedado anclado en la prehistoria. No podemos usar funciones modernas de CSS ni implementar JavaScript para ofrecer alternativas. Nos quedamos con soluciones escasas que ni siquiera se renderizan igual en todos los clientes de correo. El resultado es que tenemos que enfrentarnos a muchos retos al crear un diseño de email decente. Aun así, eso no significa que no podamos dominarlo.

Para superar todos los obstáculos, es esencial seguir las buenas prácticas de HTML para email (marcan una diferencia enorme en cómo se muestra tu newsletter en distintos clientes de correo y en cómo responde tu público objetivo a tu campaña) y, por supuesto, aprovechar las herramientas que se crearon para ayudar a los email marketers a pisar terreno firme.