Cómo crear hermosos botones de correo electrónico a prueba de balas que funcionan absolutamente

Para versiones más complejas de este botón, en realidad crearía dos versiones del botón: una en VML y otra para todos los demás.

Pros y contras de un botón basado en VML

Pros:

• Hay un gran soporte en la mayoría de los clientes de correo electrónico (consulte la tabla a continuación).
• Se puede hacer clic en todo el botón.
• Las esquinas redondeadas se mantienen en Outlook.

Contras:

• Se basa en el uso de un lenguaje desconocido, VML, que es propiedad de la suite de Microsoft Office, lo que hace que la creación de nuevos botones a prueba de balas y la actualización de los existentes sea laboriosa y frustrante.
• Se debe declarar el ancho y la altura del botón a prueba de balas, por lo que cualquier cambio en la copia del CTA requeriría cambios en las dimensiones del botón.
• Las versiones más complejas del botón VML requieren dos URL que deben cambiarse. Y algunos ESP no rastrean la URL en la sección VML.
• VML requiere una altura y un ancho fijos, por lo que este botón no funciona muy bien para las plantillas donde la longitud de la copia en el CTA puede variar.

Si no desea aprender los entresijos de VML (y, honestamente, ¿quién lo hace?), Campaign Monitor tiene una herramienta en línea gratuita para crear botones tradicionales a prueba de balas. Buttons.cm facilita la creación de nuevos botones de CTA que se verán geniales y funcionarán bien en la mayoría de los clientes de correo electrónico.

Este era mi estilo preferido para codificar botones cuando trabajaba en correos electrónicos farmacéuticos. La mayor ventaja es su capacidad para mantener las esquinas redondeadas en Outlook, que era necesaria para esa industria altamente regulada.

3. Botones de relleno

Este método utiliza una tabla HTML simple para el botón. Se basa en el relleno a nivel de celda de la tabla para estructurar el botón, así como en los atributos HTML y CSS para diseñar el botón.

Pros y contras de un botón con relleno

Pros:

• Funciona bien en la mayoría de los clientes de correo electrónico (consulte la tabla a continuación).
• Utiliza código con el que los diseñadores de correo electrónico están familiarizados (HTML y CSS), lo que facilita la creación de nuevos botones a prueba de balas y la actualización de los existentes.

Contras:

• No se puede hacer clic en todo el botón, lo que puede generar fricciones con los suscriptores que creen que hicieron clic o tocaron un botón.
• Outlook no admite esquinas redondeadas.

4. Botones basados ​​en bordes

Los botones basados ​​en bordes adoptan un enfoque similar al método anterior. Usando HTML y CSS simples, puede estructurar y diseñar sus llamados a la acción. Sin embargo, en lugar de depender del relleno en el nivel de celda de la tabla para la estructura, agregue bordes gruesos al enlace para construir su CTA.

Tenga en cuenta que la etiqueta de enlace está configurada para ser un elemento a nivel de bloque y que los bordes se utilizan para proporcionar nuestro "relleno". Esto garantiza que todo el botón se pueda desplazar y hacer clic, incluso en clientes de escritorio más antiguos.

Pros y contras de un botón basado en bordes

Pros:

• Todo el estilo está en la etiqueta de enlace real, lo que simplifica el código.
• Solo se usa un botón. No se necesitan botones dobles ni código VML confuso.
• No necesita definiciones específicas de alto o ancho, lo que hace que los botones sean altamente escalables.

Contras:

• Outlook reduce el tamaño de los bordes en una pequeña cantidad.
• Outlook no reconoce las etiquetas <a> como elementos a nivel de bloque.
• Outlook no admite esquinas redondeadas.
• No se puede agregar un estilo más avanzado, como bordes adicionales, en el elemento de enlace exacto.

5. Botones basados ​​en relleno y borde

Los botones basados ​​en relleno y borde combinan elementos de los dos enfoques anteriores.

Esencialmente, este enfoque utiliza la misma estructura de estilo del enlace con relleno y al menos un borde sólido de 1 px. Luego, se aplica un color de fondo al <td> para llenar todo el fondo del enlace. El color de fondo debe aplicarse a <td> en lugar de <a> en este caso porque Outlook no reconoce el relleno horizontal en la etiqueta <a> (ya que no admite este estilo para HTML sin nivel de bloque) elementos).

Pros y contras de un botón de relleno y borde

Pros:

• Solo es necesario codificar un botón, lo que hace que los botones que utilizan esta técnica sean fáciles de actualizar.
• No se requieren dimensiones específicas para los botones.
• Las imágenes de fondo se pueden admitir con este método.

Contras:

• El estilo se separa entre <td> y <a>, por lo que ambos deben actualizarse cuando haya cambios en el estilo del botón.
• Outlook no admite esquinas redondeadas.

¿Qué pasa con el HTML semántico?

Nos encanta usar html semántico, pero desafortunadamente, la etiqueta <button> simplemente no es compatible con el correo electrónico. Se reduce a un <div> en la mayoría de los clientes de correo electrónico, en el que no se puede hacer clic o no se representa correctamente.

Se puede anidar divs o tablas dentro de sus etiquetas de anclaje. Pero no es semánticamente correcto. Además, ambos métodos dan como resultado botones que no funcionan en Outlook. En el caso de las tablas, no se puede hacer clic en el enlace, y en el caso de los divs ... bueno, compruébelo usted mismo:

Botón div	Botón Div en Outlook

Hacks y mejoras avanzados

Todos los métodos anteriores son excelentes puntos de partida para crear botones a prueba de balas, pero cada técnica puede modificarse aún más para crear mejores botones a prueba de balas.

Truco de relleno horizontal para Outlook

Outlook no admite el relleno horizontal, lo que puede hacer que el texto de su CTA esté muy cerca de los bordes izquierdo y derecho de su botón a prueba de balas.

Un truco rápido que se puede utilizar para aumentar el "relleno" horizontal para Outlook es agregar condicionalmente espacios en línea que no se rompan en cada lado del enlace. El botón de relleno condicional ya hace uso de esto junto con la propiedad de espaciado entre letras para agregar espacio a los lados del botón.

Mejora progresiva con consultas de medios

Para mejorar el diseño de su botón a prueba de balas, puede usar estilos avanzados como bordes, degradados, fuentes web, efectos de desplazamiento y más con consultas de medios.

Mejoras de Outlook con VML

Si desea que sus botones realmente brillen, puede sumergirse en VML para agregar un poco de pizazz a sus botones.

Por frustrante que pueda ser VML, te permite crear algunos botones muy divertidos con imágenes de fondo y degradados, así como sombras. Definitivamente hay cierto grado de prueba y error, pero los resultados pueden ser asombrosos.

Consulte nuestro botón de nuestro boletín de enero para ver un ejemplo:

Entonces, ¿cómo es el soporte al cliente de correo electrónico?

Los clientes de correo electrónico han actualizado su soporte desde que se escribió esta publicación por primera vez en 2017, por lo que estos botones están muy cerca de ser a prueba de balas. La menor cantidad de soporte está en Outlook, como se esperaba, pero incluso allí, los botones no están muy rotos.

Puede consultar las pruebas completas de Litmus aquí.

* Las esquinas redondeadas no se renderizan. † El tamaño del botón está distorsionado.

Soporte y trucos del modo oscuro

El modo oscuro aporta un giro interesante a los botones a prueba de balas. Como la mayoría de HTML y CSS, puede controlar los estilos del modo oscuro para botones con consultas de medios.

Sin embargo, Gmail y Outlook.com pueden invertir los colores de los botones.

Si desea conservar los colores de fondo de sus botones, existen algunos trucos. Sin embargo, tenga cuidado con invertir el color de la copia en los botones. No hay forma de evitar que los colores de su fuente cambien en Outlook, pero puede mantener el texto blanco en sus botones en blanco con la solución de combinación CSS de Remi Parmentier.

La mayor falta de soporte en estas opciones de botones a prueba de balas son los botones VML.

En el modo oscuro, Office 365 invertirá los colores de fondo, pero no invertirá el color de relleno en el VML. Entonces terminas con botones que se ven así:

Hay una solución para esto: asegúrese de usar el valor RGBA para el color de fondo en la etiqueta <a> de su botón, así:

Entonces terminas con un botón que se ve así (mucho mejor, ¿verdad?):

El valor RGBA como color de fondo no es compatible con Outlook, por lo que vuelve al color VML. ¡Gracias a Wilbert Heinen por esta solución! Como no podemos controlar el color de la fuente en el modo oscuro en Outlook, si va a usar este botón, asegúrese de que sus opciones de color tengan en cuenta la accesibilidad cuando el color de la fuente también esté invertido. (El ejemplo que usamos es un buen ejemplo de qué colores no usar).

¿Son sus campañas a prueba de balas?

Independientemente del enfoque que adopte, el uso de botones a prueba de balas para las llamadas a la acción es muy superior a confiar en las imágenes. Incluso en los clientes de correo electrónico que bloquean imágenes, los botones a prueba de balas aseguran que su mensaje sea claro para su audiencia, aumentando la probabilidad de que sus suscriptores se involucren. ¡No más correos electrónicos rotos!

Cree correos electrónicos de marca y sin errores con Litmus Los correos electrónicos rotos, especialmente los botones de llamada a la acción, significan menos clics y conversiones. Ay. Litmus lo ayuda a garantizar que todo sea perfecto con una verificación automática de bloqueo de imágenes, enlaces rotos y más. Inicie su prueba gratuita →

¿Cuál es tu técnica favorita de botones a prueba de balas?

Háganos saber cómo crea botones de correo electrónico a prueba de balas en los comentarios a continuación.

Publicado originalmente el 1 de noviembre de 2017 por Jason Rodríguez. Última actualización el 22 de junio de 2021.