Cómo diseñar un correo electrónico de marketing que funcione

Para diseñar un correo electrónico de marketing, constrúyalo como una sola columna móvil de alrededor de 600 píxeles de ancho, confórmele una jerarquía visual clara con una sola llamada a la acción primaria, mantenga su marca consistente con fuentes alternativas seguras para la web y combine cada imagen con texto real y texto alternativo descriptivo para que funcione incluso cuando las imágenes estén bloqueadas. Un buen diseño de correo electrónico no se trata de verse elegante; se trata de ser legible al instante, táctil y accesible en el teléfono donde la mayoría de la gente lo abrirá. Haz que esos fundamentos sean correctos y tu mensaje será el mismo si alguien lo lee con luz solar brillante, en modo oscuro o con un lector de pantalla.

Bueno, seamos honestos por un segundo: la mayoría de nosotros hemos puesto nuestro corazón en un correo electrónico, presionamos enviar y luego lo abrimos en nuestro teléfono solo para encontrar el logotipo gigantesco, el botón imposible de tocar y todo esto una pared de pequeño texto gris. Lo he hecho. Probablemente lo hayas hecho. Y aquí está la parte que nadie te dice: el problema casi nunca fueron las palabras. Fue el diseño. La forma en que se construye un correo electrónico decide si alguien realmente lee lo encantador que escribió.

Así que arreglemos eso juntos. Al final de esto, sabrás cómo diseñar un correo electrónico de marketing que se vea intencional, se cargue rápidamente, funcione maravillosamente en un teléfono y se mantenga legible para cada persona en tu lista, incluidos los que navegan con imágenes apagadas o confían en un lector de pantalla. Sin pelusa, no hay falsas promesas de “impulsar las conversiones al 300%”, solo el honesto oficio de la misma. Toma tu café. Esto realmente se vuelve más fácil una vez que ves el patrón.

¿Por qué el diseño del correo electrónico importa mucho más de lo que parece?

Porque un correo electrónico tiene unos dos segundos para llamar la atención en una bandeja de entrada llena de gente, y el diseño es lo que hace que esos dos segundos cuenten. Hermosa copia dentro de un diseño apretado y confuso es como un gran discurso murmurado en una almohada: el mensaje está ahí, pero nadie lo recibe. Cuando aprendes a diseñar un correo electrónico de marketing correctamente, realmente estás aprendiendo a eliminar la fricción entre tu lector y tu punto.

Esto es lo que el diseño reflexivo hace silenciosamente por usted:

• Sobrevive al teléfono. La mayoría de las personas abren el correo electrónico en un dispositivo móvil, a menudo con una sola mano, a menudo distraído. Un diseño que asume un gran monitor de escritorio falla en el momento exacto que más importa.
• Respeta las imágenes bloqueadas. Muchos clientes de correo electrónico ocultan imágenes por defecto hasta que el lector hace clic en “mostrar imágenes”. Si todo tu mensaje vive dentro de un gráfico, mucha gente ve un rectángulo en blanco y lo elimina.
• Incluye a todos. Los suscriptores que usan lectores de pantalla, que tienen baja visión o que simplemente aumentan el tamaño de su fuente merecen recibir su mensaje. El diseño accesible no es agradable de tener; es con quien estás hablando.
• Protege la entregabilidad. Los correos electrónicos limpios, equilibrados y de texto e imagen se parecen menos al spam en los filtros de la bandeja de entrada que una sola imagen gigante. Un buen diseño literalmente te ayuda a llegar a la bandeja de entrada.

Ese último punto es el que la gente subestima, así que lo diré claramente: el diseño y la entregabilidad están conectados. Un correo electrónico de imagen completa casi sin texto real es una señal de spam clásica, y también es invisible para un lector de pantalla. Una opción te hace daño dos veces. Nos aseguraremos de que nunca lo logres.

¿Qué tan amplio debe ser un correo electrónico de marketing y por qué una columna?

Diseña tu correo electrónico como un columna, aproximadamente 600 píxeles anchos. Ese número no es folklore mágico — es el ancho que se muestra de manera confiable en la más amplia gama de clientes de correo electrónico y paneles de vista previa sin forzar el desplazamiento horizontal, y se colapsa con gracia en la pantalla de un teléfono. Un diseño de una sola columna es la columna vertebral del correo electrónico móvil porque nunca necesita reorganizarse de manera incómoda en una pantalla pequeña: el lector simplemente se desplaza hacia abajo, de arriba a abajo, en el orden que pretendía.

Los diseños de varias columnas se sienten tentadores cuando se mira una vista de diseño de escritorio espaciosa. Resiste la tentación de la mayoría de los correos electrónicos de marketing. Las columnas paralelas tienden a reducirse en astillas ilegibles en un teléfono o apilarse en un orden que no planeaste, revolviendo tu historia. Una sola columna lee lo mismo en todas partes, y “lo mismo en todas partes” es todo el juego en el correo electrónico, donde no puedes controlar la pantalla de la manera que puedes en tu propio sitio web.

Piensa en tu correo electrónico como un pasillo estrecho y ordenado en lugar de una sala abierta. Un camino claro, un camino claro, una puerta clara (su llamada a la acción). El lector nunca tiene que preguntarse dónde mirar a continuación.

Mobile-first no es una tendencia, es donde está tu lector

Diseñar primero para dispositivos móviles simplemente significa que la experiencia de pantalla pequeña es su opción predeterminada, luego déjela expandirse cómodamente en el escritorio, en lugar de al revés. Prácticamente, eso significa que los objetivos de toque generosos, escriba lo suficientemente grande como para leer sin pellizcar, y un diseño que ya es una columna para que no haya nada que “arreglar” para el móvil. Cuando diseñas para el teléfono primero, la versión de escritorio casi siempre se encarga de sí misma. Cuando diseñas para escritorio primero, la versión del teléfono suele ser donde las cosas se desmoronan.

¿Qué significa jerarquía visual en un correo electrónico?

La jerarquía visual es el orden en el que el diseño guía el ojo: lo que el lector nota primero, segundo y tercero. En un correo electrónico de marketing bien diseñado, ese orden es deliberado: un título claro o un área de héroe los atrae, una copia de respaldo explica el valor y una llamada a la acción primaria inconfundible les dice exactamente qué hacer a continuación. Todo en la página se gana su lugar al apoyar ese camino, o se corta.

El mayor error de jerarquía que veo es demasiadas llamadas a la acción competidoras. Cuando le pides a un lector que “Compre ahora” y “Lee el blog” y “Síguenos” y “Refiere a un amigo” con el mismo peso visual, en realidad les has pedido que no hagan nada, porque elegir es trabajo y el trabajo se pospone. Escoger uno Acción principal por correo electrónico. Si deben existir enlaces secundarios, hazlos visiblemente más pequeños y silenciosos. — un enlace de texto sin formato, no un segundo botón grande.

Algunos principios que crean jerarquía limpia casi automáticamente:

• Una CTA primaria, diseñada como la cosa más ruidosa de la página. Debe ser el elemento más obvio en el momento en que se carga el correo electrónico.
• Moldea tu contenido. Los párrafos cortos, los subtítulos claros y la lista ocasional permiten a las personas escanear en lugar de trabajar. Casi nadie lee un correo electrónico palabra por palabra; se descreman por lo que importa.
• Pon lo importante arriba. Suponga que muchos lectores nunca se desplazan más allá de la primera pantalla. Su mensaje central e idealmente su CTA principal deberían aparecer temprano, no enterrados en la parte inferior.
• Usa el tamaño y el peso a propósito. Más grande y audaz se lee como “más importante”. Si todo es audaz, nada lo es.

¿Cómo mantener un correo electrónico en la marca sin romperlo?

Consistencia de marca significa que tu correo electrónico se siente como tú: mismo logotipo, misma paleta de colores, misma personalidad tipográfica que tus suscriptores ven en tu sitio y feeds sociales. Esa familiaridad genera confianza y reconocimiento; un lector debe saber que un correo electrónico es suyo antes de leer el nombre del remitente. Pero el correo electrónico tiene una realidad técnica peculiar, por lo que la consistencia de la marca aquí tiene un poco de cuidado.

Empieza con las victorias fáciles. Coloca tu logo cerca de la parte superior, a un tamaño razonable (no tan grande que empuja su mensaje debajo del pliegue en un teléfono). Tire de su colores de marca en botones, encabezados y acentos — la familia azul marino y púrpura, un acento cálido, cualquiera que sea su paleta — manteniendo fondos lo suficientemente ligeros como para que el texto se mantenga legible. El color consistente es una de las formas más rápidas en que un correo electrónico se “siente” como su marca.

Fuentes y la regla de fallback seguro para la web

Aquí está la parte que hace tropezar a la gente: los clientes de correo electrónico no todos admiten fuentes web personalizadas de la manera en que lo hacen los navegadores. Su tipo de letra de marca hermosa simplemente no puede cargar en ciertas bandejas de entrada, y el cliente sustituirá algo — Posiblemente algo feo — A menos que le digas qué usar en su lugar. La solución es un pila de fuentes con respaldos seguros para web: primero lista su fuente preferida, luego una copia de seguridad ampliamente compatible, luego una familia genérica.

En la práctica, eso se parece a especificar la fuente de su marca seguida de un respaldo confiable como Arial, Helvetica o Georgia, y terminar con una categoría genérica como sans-serif o serif. Si la fuente de lujo se carga, maravilloso; si no lo hace, el lector todavía obtiene un sustituto limpio, legible, en tono en lugar de un valor predeterminado al azar. Su marca sobrevive de cualquier manera. Este es también un gran momento para asegurarse de que su voz se mantiene constante en todas partes, incluyendo los pequeños detalles como Cómo crear una firma de correo electrónico que coincida con el resto de su diseño en lugar de chocar con él.

¿Cómo se deben manejar las imágenes para que el correo electrónico siga funcionando?

Las imágenes hacen que un correo electrónico se sienta vivo, pero vienen con una regla no negociable: su correo electrónico debe tener sentido completo con cada imagen apagada. Muchos clientes bloquean las imágenes por defecto, y muchas personas las dejan para guardar datos o para privacidad. Si su mensaje depende de una imagen para ser entendida, esos lectores no obtienen nada. Así que diseña imágenes como mejora, nunca como el único portador de significado.

Eso lleva directamente a la trampa de diseño más grande en todo el marketing por correo electrónico: el correo electrónico de toda la imagen. Es tan tentador – que el diseño de un hermoso gráfico en su herramienta favorita, cortarlo, soltarlo, hecho. Por favor, no. Un correo electrónico que es una imagen gigante es un desastre en tres frentes a la vez:

• Es invisible con las imágenes apagadas. Las imágenes bloqueadas significan un correo electrónico en blanco y una eliminación instantánea.
• Es una bandera roja de entregabilidad. Una relación texto-imagen casi nula es un patrón de desconfianza de filtros de spam, por lo que su correo electrónico diseñado con amor es más probable que caiga en la carpeta de basura.
• Es inaccesible. Un lector de pantalla no puede leer el texto cocido en una imagen. Esos suscriptores escuchan silencio, o en el mejor de los casos un solo atributo alt para todo el asunto.

Texto alternativo y una relación equilibrada entre texto e imagen

Toda imagen significativa necesita texto alt descriptivo — Una breve descripción escrita de lo que la imagen muestra o comunica. El texto alternativo hace doble función: es lo que se muestra cuando la imagen está bloqueada, y es lo que un lector de pantalla anuncia a un suscriptor que no puede ver la imagen. Escríbalo como si estuviera describiendo la imagen a un amigo por teléfono: “Bolsa de colección de primavera en verde salvia”, no “image1.jpg” y no vacía. Para imágenes puramente decorativas que no llevan información, está bien darles texto alternativo vacío para que los lectores de pantalla se salten en lugar de anunciar desorden.

Luego, mantenga un equilibrio saludable de texto e imágenes reales y seleccionables. No hay una proporción perfecta para memorizar, y no voy a inventar uno para usted, pero el principio es simple: su mensaje central – el título, el beneficio clave, la llamada a la acción – debe vivir en texto HTML real, con imágenes que lo respalden. El texto real es legible con imágenes apagadas, legible por lectores de pantalla, buscable y mucho más amigable para los filtros de spam. En caso de duda, dilo en texto y deja que la imagen decore.

¿Cómo diseñar un botón de llamada a la acción que realmente se toca?

Su llamada a la acción es la razón por la que existe el correo electrónico, por lo que merece una verdadera atención de diseño. Un buen botón CTA es suficientemente grande para tocar con confianza con un pulgar, visualmente distinto de todo lo que lo rodea, y etiquetado con palabras de acción específicas. “Obtener mi guía gratuita” supera a “Enviar” o “Haga clic aquí” cada vez, ya que le dice al lector exactamente lo que sucede y lo que obtienen.

Haz que el objetivo del toque sea generoso: un pequeño botón apretado es frustrante en una pantalla táctil y un lector frustrado simplemente cierra el correo electrónico. Dale espacio para que nadie golpee accidentalmente la cosa equivocada. Usa un color que contraste fuertemente con su fondo, de modo que sea el punto focal obvio, y asegúrate de que el texto del botón tenga suficiente contraste contra el color del botón para que sea legible.

Por qué importan los “botones a prueba de balas”

Un botón a prueba de balas es un botón construido con estilos HTML y en línea en lugar de como una imagen. Eso importa por la misma razón que cubrimos las imágenes: si su CTA es una imagen y las imágenes están bloqueadas, su elemento más importante desaparece. Un botón a prueba de balas se muestra como texto real, con estilo y tappable incluso con imágenes apagadas, lo que significa que su llamada a la acción siempre aparece y siempre funciona. Combínalo con un enlace de texto plano cercano como respaldo, y has hecho que tu acción más importante sea casi imposible de perder. Si quieres que las palabras en ese botón aterricen más, el mismo pensamiento que potencia el gran texto de vista previa de correo electrónico, específico, dirigido por beneficios, que despierta curiosidad, también se aplica a la copia de botón.

¿Qué papel juegan el espacio en blanco y la tipografía?

El espacio en blanco, el espacio vacío entre elementos, no es un espacio desperdiciado; es lo que hace que un correo electrónico se sienta tranquilo y legible en lugar de estrecho y estresante. El generoso espacio alrededor de su texto, botones e imágenes le da al ojo lugares para descansar y hace que cada elemento se sienta intencional. Un correo electrónico lleno de gente se siente como una pelea a gritos; uno espacioso se siente como una nota segura y amigable. En caso de duda, añadir un poco más de espacio.

La tipografía tiene el mismo peso. Mantenga su texto del cuerpo cómodamente grande — pequeño tipo que se ve elegante en la vista de diseño de escritorio se convierte en un bizco en un teléfono. Usa un claro contraste entre los encabezados y el texto del cuerpo para que la jerarquía lea de un vistazo, mantén las longitudes de las líneas sensibles para que las oraciones no se extiendan y no abarques la página con cinco fuentes diferentes. Uno o dos tipos de letra, utilizados constantemente, siempre se ve más profesional que una mezcla de nota de rescate.

¿Qué pasa con el modo oscuro y la accesibilidad?

El modo oscuro está ahora en todas partes, y muchos de sus suscriptores leen el correo electrónico con un fondo oscuro por defecto. Algunos clientes de correo electrónico invierten o ajustan automáticamente sus colores en modo oscuro, lo que puede hacer cosas sorprendentes: un logotipo en un fondo transparente podría desaparecer, o el texto oscuro en una caja de luz podría cambiar a algo de bajo contraste y difícil de leer. No puedes controlar el comportamiento en modo oscuro de cada cliente perfectamente, pero puedes diseñar defensivamente: evita los extremos de color negro puro o blanco puro, asegúrate de que tu logotipo sea visible tanto en fondos claros como oscuros, y siempre prueba en modo oscuro antes de enviarlo para que no haya sorpresas desagradables.

La accesibilidad merece su propio foco, porque se encuentra en el corazón del buen diseño del correo electrónico en lugar de en los bordes. Una parte significativa de sus suscriptores confían en él: usuarios de lectores de pantalla, personas con baja visión, personas con daltonismo, personas que aumentan su tamaño de fuente predeterminado, y diseñar para ellos hace que su correo electrónico sea mejor y más entregable para todos. Así es como se ve el diseño de correo electrónico accesible en la práctica:

• Usa texto real, no texto cocido en imágenes. Esta es la opción de accesibilidad más importante, y felizmente es la misma opción que te protege de imágenes bloqueadas y filtros de spam.
• Escribir texto alternativo descriptivo para imágenes informativas, y texto alternativo vacío para las puramente decorativas, para que los lectores de pantalla anuncien lo que importa y omitan lo que no.
• Mantenga un fuerte contraste de color entre el texto y su fondo. El texto gris claro sobre un fondo blanco puede parecer elegante para usted, pero es realmente difícil de leer para muchas personas. En caso de duda, hazlo más oscuro.
• Estructurar el contenido en un orden de lectura lógico con títulos semánticos, por lo que un lector de pantalla se mueve a través de su correo electrónico de la misma manera que lo haría un ojo de lector vidente.
• Escribe un texto descriptivo. “Leer el lookbook completo de primavera” le dice a un usuario lector de pantalla dónde va el enlace; “haga clic aquí” repetido cinco veces no le dice nada.
• No confíes solo en el color para transmitir significado. Si una palabra es importante, hágala en negrita o etiquétela, no la ponga roja y espere que todos puedan saberlo.

Nada de esto hace que su correo electrónico sea más feo. Honestamente, tiende a hacerlo más limpio, más claro y más en la marca, porque el diseño accesible y el buen diseño son en su mayoría lo mismo que usa diferentes etiquetas de nombre.

¿Todavía necesitas una versión de texto plano?

Sí, y es más fácil de lo que parece. A versión de texto plano es una copia de texto de tu correo electrónico sin HTML, imágenes o estilo. La mayoría de las plataformas de correo electrónico le permiten incluir una junto con su versión HTML diseñada, y el cliente del destinatario muestra lo que mejor puede mostrar. Importa por dos razones: un pequeño número de personas y clientes prefieren o requieren texto sin formato, y — como el texto real en general — La inclusión de una alternativa de texto plano adecuada es una señal que tiende a ayudar a la entregabilidad en lugar de perjudicarla.

No tienes que agonizar por ello. Asegúrate de que la versión de texto sin formato transmita el mismo mensaje central e incluya el enlace principal como una URL completa (ya que no hay botón para tocar). Una versión de texto plano que simplemente dice “Ver este correo electrónico en su navegador” es una oportunidad desperdiciada; uno que lleva su mensaje real es un silencioso profesionalismo que los proveedores de bandeja de entrada de filtros aprecian.

Una lista de verificación de diseño de correo electrónico de marketing

Aquí está la lista de verificación que reviso antes de que se publique cualquier correo electrónico. Imprime, marca, pega a tu monitor – lo que sea que lo mantenga a mano. Si puedes marcar cada casilla, tu diseño está en buena forma.

• Columna única, .600px ancho por lo que se muestra limpiamente en todas partes y se derrumba perfectamente en el móvil.
• Mobile-primero: tipo legible, botones pulsables, contenido importante y CTA principal cerca de la parte superior.
• Una llamada a la acción principal Ese es el elemento más ruidoso; cualquier enlace secundario es visiblemente más silencioso.
• On-brand logo, colores y una pila de fuentes con respaldos seguros para la web que terminan en una familia genérica.
• Funciona con imágenes off: el mensaje tiene sentido antes de que se cargue una sola imagen.
• Texto alternativo descriptivo en cada imagen informativa; alt vacío en las decorativas.
• Relación texto-imagen equilibrada: mensaje central en texto real, nunca un correo electrónico de toda la imagen.
• Botón CTA a prueba de balas (HTML, no una imagen) con un generoso tamaño de toque y una copia de seguridad de enlace de texto sin formato.
• Fuerte contraste de color para todo el texto; no depender solo del color para tener significado.
• Estructura semántica y orden de lectura lógico con títulos reales.
• Texto de enlace descriptivo en todas partes (“ver los recién llegados”, no “haga clic aquí”).
• Control en modo oscuro Así que nada desaparece o se vuelve de bajo contraste.
• Versión de texto plano incluido y llevando el mensaje real.
• Probado en clientes y dispositivos – teléfono, escritorio y al menos un par de aplicaciones de correo electrónico importantes – antes de presionar enviar.

Una plantilla de diseño de una sola columna simple

Si estás mirando un lienzo en blanco preguntándote dónde van las cosas, aquí hay una estructura confiable de arriba a abajo para un correo electrónico de marketing de una sola columna. No es la única forma, pero funciona una y otra vez, y puedes adaptarlo a casi cualquier mensaje.

• Línea de preencabezado (arriba): un poco de texto real que complementa su línea de asunto en la vista previa de la bandeja de entrada. Trátalo como bienes raíces valiosos, no como un descarte.
• Logotipo / encabezado: su logotipo en un tamaño modesto, para que los lectores lo reconozcan inmediatamente sin que acumule la primera pantalla.
• Área de héroe: un título claro (en texto real) y, si lo desea, una imagen de apoyo con texto alternativo sólido. Este es el momento de “seguir leyendo”.
• Cuerpo: un bloque corto y escaneable o dos de texto real que entrega el valor. Se corta con un subtítulo o una lista rápida si se está haciendo largo.
• CTA principal: un botón a prueba de balas, lo suficientemente alto como para que los lectores móviles lo golpeen sin desplazamiento interminable, con un enlace de texto plano cercano.
• Contenido de apoyo (opcional): enlaces secundarios o una sección más pequeña, visiblemente más silenciosa que la CTA principal para que la jerarquía permanezca intacta.
• Pie de página: su identidad de remitente, detalles físicos de envío cuando sea necesario y un enlace de cancelación de suscripción claro y funcional. Esto no es solo un diseño educado; honrar las cancelaciones de suscripción e identificarse honestamente es parte de enviar de manera responsable.

Coloca esos bloques en la columna en ese orden y tendrás un diseño que se lee lógicamente para un lector vidente, un lector de pantalla y un filtro de spam por igual. Esa es la trifecta tranquila que siempre estás buscando.

¿Cómo probar un diseño de correo electrónico antes de enviar?

Las pruebas son el paso que la gente salta cuando están cansados, y es el paso que los salva del momento “oh no” diez minutos después de enviarlos. La regla de oro: nunca envíes un correo electrónico de marketing que no hayas visto en un teléfono real. Las vistas de diseño y las vistas previas de escritorio se encuentran por omisión: no pueden mostrarte el botón apretado o la imagen desbocada que solo aparece en una pantalla pequeña.

Una rutina de prueba previa al envío se ve así:

• Envíate una prueba real y ábrela en tu teléfono primero, luego en tu escritorio. Pulsa el botón. ¿Funciona? ¿Es cómodo golpear?
• Desactivar las imágenes y releer. ¿El correo electrónico tiene sentido? ¿Puedes decir cuál se suponía que era cada imagen bloqueada de su texto alternativo?
• Compruebe el modo oscuro. Voltear el dispositivo o cliente al modo oscuro y confirmar nada se desvanece o se vuelve ilegible.
• Vista previa en algunos clientes importantes. El renderizado difiere entre los clientes populares de webmail y aplicaciones; muchas plataformas de correo electrónico ofrecen una vista previa o una función de prueba de bandeja de entrada que muestra su diseño en varios a la vez.
• Revisa las cosas pequeñas: los enlaces van donde deberían, no hay imágenes rotas, se escribe texto alternativo, el enlace de cancelación de suscripción funciona.

Las pruebas toman unos minutos extra y siempre, siempre vale la pena. El lector nunca ve los cinco borradores y la vista previa del teléfono incómodo – que sólo ven un correo electrónico que funciona, y en silencio confían en que un poco más para ello.

¿Dónde encaja SocialBlaze en todo esto?

Permítanme ser directo con ustedes, porque la honestidad importa más que un argumento de venta: SocialBlaze es un programación de redes sociales y herramienta de análisis — No es un proveedor de servicios de correo electrónico. No construirá, diseñará o enviará sus correos electrónicos de marketing, y nunca fingiría lo contrario. Los diseñarás y los enviarás en una plataforma de correo electrónico dedicada.

Pero aquí es donde realmente ayuda. El pensamiento de diseño que acabas de aprender – primero móvil, una llamada a la acción clara, texto real sobre imágenes, fuerte contraste, jerarquía escaneable – es exactamente el mismo pensamiento que hace que una publicación social detenga el desplazamiento. Cuando estás ejecutando una campaña, tu correo electrónico y tus publicaciones en las redes sociales deben sentirse como hermanos: la misma apariencia, la misma voz, la misma oferta. SocialBlaze te permite programar y publicar esa campaña coincidente en Instagram, Facebook, LinkedIn, TikTok, Pinterest y más desde un panel tranquilo, luego ver qué resonó, para que tu correo electrónico y tus canales sociales se refuercen entre sí en lugar de separarse.

Una verdad más suave antes de las preguntas frecuentes: sus primeros correos electrónicos diseñados pueden sentirse incómodos, y eso es completamente normal. El correo electrónico es un medio obstinado, antiguo y peculiar, y todos luchan con él al principio. Pero los fundamentos aquí – una sola columna, móvil-primero, una CTA, texto real con texto alternativo, accesible, probado – no cambian con las tendencias. Aprende una vez y diseñarás buenos correos electrónicos para el resto de tu vida. Prometo que esto se vuelve más fácil.

Y si quieres el mensaje interior ese hermoso diseño para trabajar aún más duro, aprendiendo Cómo personalizar los correos electrónicos de marketing es el siguiente paso natural — gran diseño consigue el correo electrónico abierto y leído, y la personalización reflexivo hace que se sienta como si hubiera sido escrito solo para ellos.

Preguntas frecuentes

¿Qué tan amplio debe ser un correo electrónico de marketing?

Diseña tu correo electrónico como una sola columna de alrededor de 600 píxeles de ancho. Ese ancho se muestra de manera confiable en la más amplia gama de clientes de correo electrónico y paneles de vista previa sin forzar el desplazamiento horizontal, y se colapsa perfectamente en la pantalla de un teléfono. Debido a que la mayoría de las personas abren el correo electrónico en el móvil, una sola columna, aproximadamente 600px diseño es el más seguro, más legible por defecto que puede comenzar.

¿Por qué no debería diseñar mi correo electrónico completo como una sola imagen?

Un correo electrónico de toda la imagen falla de tres maneras a la vez. Aparece en blanco para las muchas personas cuyos clientes bloquean las imágenes por defecto, es una bandera roja clásica de filtro de spam porque casi no tiene texto real, y es inaccesible para cualquiera que use un lector de pantalla ya que no pueden leer texto cocido en una imagen. Siempre mantenga su mensaje central en texto HTML real y deje que las imágenes lo respalden en lugar de llevarlo.

¿Qué es el texto alternativo y por qué es importante en el correo electrónico?

El texto alternativo es una breve descripción escrita adjunta a una imagen que describe lo que la imagen muestra o comunica. Hace dos trabajos importantes: se muestra en lugar de la imagen cuando un cliente bloquea imágenes, y es lo que un lector de pantalla anuncia a un suscriptor que no puede ver la imagen. Escribe texto alternativo claro y específico para imágenes informativas, y usa texto alternativo vacío para imágenes puramente decorativas para que los lectores de pantalla se salten.

¿Cómo hago que un botón de correo electrónico funcione incluso cuando las imágenes están apagadas?

Construye un botón a prueba de balas, lo que significa crear tu llamada a la acción con estilos HTML y en línea en lugar de como una imagen. De esta manera, se muestra como texto real, con estilo y que se puede tocar incluso cuando las imágenes están bloqueadas, por lo que su elemento más importante nunca desaparece. Hazlo lo suficientemente grande como para tocar cómodamente, darle un fuerte contraste de color y agregar un enlace de texto plano cercano como respaldo.

¿SocialBlaze diseña o envía correos electrónicos de marketing?

No, y quiero ser honesto al respecto. SocialBlaze es una herramienta de programación y análisis de redes sociales, no un proveedor de servicios de correo electrónico, por lo que no creará ni enviará sus correos electrónicos. Lo que hace maravillosamente es ayudarlo a programar, publicar y analizar las publicaciones sociales coincidentes para su campaña en todas las redes desde un panel de control, para que su correo electrónico y su presencia social se mantengan consistentes y se refuercen mutuamente.