Diseños, plantillas y ejemplos para 2023

¿Alguna vez abrió un correo electrónico en su teléfono y la imagen era de baja calidad, el texto era demasiado pequeño y el botón de llamada a la acción estaba roto? Esos son todos los defectos del diseño de correo electrónico estático. Los correos electrónicos receptivos son la respuesta.

Dado que más de la mitad de los residentes de los EE. UU. miran los mensajes de marketing por correo electrónico en sus teléfonos, debe optimizar sus correos electrónicos para múltiples pantallas, incluidos dispositivos móviles y tabletas.

Los correos electrónicos receptivos usan imágenes y tablas fluidas para permanecer flexibles en diferentes tamaños de pantalla. En última instancia, entregan contenido diseñado para la experiencia óptima de cada usuario.

Aunque los correos electrónicos receptivos se pueden diseñar utilizando consultas de medios CSS, no necesita ninguna experiencia en codificación para hacer uno. Crear un correo electrónico receptivo no es solo un trabajo para programadores.

Aquí, hemos alineado algunas mejores prácticas y plantillas listas para usar, así como un tutorial rápido sobre los fundamentos de los correos electrónicos receptivos.

Los correos electrónicos receptivos también son más accesibles, ya que permiten a los suscriptores leer en su dispositivo preferido.

Para ilustrar, así es como se veía un correo electrónico promocional que recibí en el escritorio.

Este correo electrónico tiene imágenes asombrosas, íconos que se pueden comprar y está bien formateado. Cuando abro el correo electrónico en el móvil, esto es lo que recibo.

Todavía tengo la misma información y las mismas fotos e íconos que se pueden comprar. La única diferencia notable es el formato del correo electrónico. Es diferente para adaptarse mejor a la experiencia móvil.

Ahora, imagina si ese mismo diseño de escritorio se aplicara al móvil. Tendría que hacer zoom en mi teléfono para ver cualquiera de las imágenes o el texto. En lugar de hacer eso, me daría de baja.

Con el correo electrónico receptivo, se puede mejorar la experiencia del usuario, así como el ROI de la campaña.

Piénselo: los suscriptores satisfechos con un diseño de correo electrónico móvil optimizado se encontrarán abriendo más mensajes de marketing porque saben que será accesible y se verá bien.

Entonces, con toda esta charla sobre correos electrónicos receptivos, debe estar ansioso por crear el suyo propio. A continuación, veremos algunos ejemplos y plantillas de correo electrónico receptivo.

Diseños de correo electrónico receptivos

Hay muchas maneras de diseñar correos electrónicos receptivos.

Si tiene conocimientos de codificación, puede codificar diferentes plantillas de correo electrónico para diferentes tamaños de pantalla. También puede usar una plantilla prefabricada que funciona con todos los tamaños de pantalla.

Independientemente de su enfoque, necesitará su software de marketing por correo electrónico. Aquí, puede diseñar un correo electrónico y luego obtener una vista previa de ese correo electrónico en varios dispositivos. La mayoría de los programas de correo electrónico le mostrarán cómo se verá el diseño en varios dispositivos.

El siguiente video lo guiará a través de cómo diseñar un correo electrónico con una plantilla. En el video, el usuario está en Klaviyo, pero los conceptos son válidos sin importar qué software use.

Codificación de un correo electrónico receptivo

Si está buscando hacer que los elementos de su correo electrónico respondan, deberá trabajar con consultas de medios.

Las consultas de medios son una técnica de CSS. Le permite establecer reglas de estilo que solo aparecen si se cumplen ciertas condiciones. Por ejemplo, puede especificar qué tamaños de fuente y tamaños de imagen usar cuando una pantalla tiene 600 px de ancho o menos.

Cuando trabaje con correo electrónico, puede usar consultas de medios para especificar cómo debe verse su diseño en computadoras de escritorio, tabletas y dispositivos móviles. Para ello, deberá especificar lo siguiente:

• Utilice el selector "@media" y especifique "pantalla". Esto indica que el código afectará a los dispositivos con pantalla.
• Establezca su "ancho máximo" en píxeles. Esto especifica el tamaño de la pantalla donde el código tendrá efecto.
• Especifique cualquier guía de estilo CSS que desee que siga esa pantalla específica.

Echemos un vistazo al código de abajo.

Pantalla @media y (ancho máximo: 600px)

cuerpo

tamaño de fuente: 30px;

Cuando se aplica al CSS de un correo electrónico, el texto del cuerpo aparecerá en un tamaño de 30 px para pantallas de 600 px de ancho o más pequeñas.

Si bien este enfoque puede ayudarlo a crear ciertos elementos de su respuesta de correo electrónico, le recomendamos que use una plantilla si es posible.

A menos que tenga una amplia experiencia en diseño web, la codificación de varias pantallas multimedia puede llevar mucho tiempo y ser frustrante.

Si no tiene conocimientos técnicos o desea un método más sencillo, intente utilizar una herramienta de marketing por correo electrónico con plantillas receptivas integradas. El software de correo electrónico gratuito de HubSpot, por ejemplo, proporciona plantillas de arrastrar y soltar que responden de manera predeterminada.

Ejemplos de diseño de correo electrónico receptivo

Es hora de explorar ejemplos. Comience con este video, que repasa algunas de las mejores campañas de marketing por correo electrónico.

Luego, puede leer acerca de algunos de nuestros diseños de correo electrónico adaptables favoritos.

1. Boletín TOMS

En el boletín de TOMS, la principal diferencia entre la versión de escritorio y la versión móvil es el apilamiento y el tamaño de los anuncios gráficos.

Con un diseño receptivo, la versión móvil no tiene una navegación desordenada y la imagen se ajusta muy bien a la pantalla. Los CTA también se han movido para una mejor visibilidad.

Fuente de imagen

2. El Museo Metropolitano de Arte

Como se ve en el boletín de TOMS, el diseño de correo electrónico receptivo ayuda a apilar el contenido de una manera visualmente atractiva y fácil de digerir. Este ejemplo del MET no es diferente.

En el móvil, el posicionamiento del menú cambia. Los enlaces a diferentes artículos de la tienda de regalos se encuentran en la parte inferior de la página. Esto mantiene las imágenes de los recuerdos disponibles al frente y al centro.

Fuente de imagen

3. Mora

Nuevamente, con un diseño de correo electrónico receptivo, el nombre del juego se está apilando. Se trata de hacer que el contenido sea fácil de leer y visualmente atractivo, sin importar cuán pequeño sea el dispositivo en el que alguien está viendo el contenido.

Las fotos y el texto alternados tienen sentido para el escritorio, mientras que el apilamiento constante de fotos sobre texto relacionado para dispositivos móviles, junto con las líneas divisorias, garantiza que el espectador no se confunda.

Fuente de imagen

Plantillas de correo electrónico adaptables

Una plantilla receptiva se adaptará automáticamente a cualquier tamaño de pantalla, por lo que, ya sea que el correo electrónico se abra en un teléfono inteligente, tableta o computadora, se verá genial y tendrá una funcionalidad completa.

Para aquellos con menos experiencia en codificación o aquellos que buscan pasar menos tiempo con el diseño, mi consejo es usar una plantilla. Son una forma segura de asegurarse de que su correo electrónico se vea profesional y responda.

Las plantillas de correo electrónico receptivas le ahorran tiempo en el diseño de un correo electrónico que podría haber sido seleccionado de una selección. Por ejemplo, la herramienta de marketing por correo electrónico de HubSpot incluye más de 60 plantillas solo para correos electrónicos receptivos.

Echemos un vistazo a algunas opciones de plantilla ahora.

1. HubSpot

HubSpot ofrece un par de plantillas de correo electrónico receptivas gratuitas . Si eres cliente de HubSpot o usuario gratuito, puedes descargarlos y probarlos tú mismo.

Por ejemplo, esta es una de las plantillas de correo electrónico receptivas: observe la barra lateral, donde puede obtener una vista previa de la plantilla en varios dispositivos.

Fuente de imagen

Hacer clic en los tipos de dispositivos y asegurarse de que su correo electrónico tenga el formato correspondiente es uno de los pasos finales en el proceso de diseño y es el único paso en el proceso de correo electrónico receptivo cuando usa software como HubSpot.

Al hacer clic en el dispositivo de teléfono inteligente para obtener una vista previa, por ejemplo, puede ver si su contenido, incluido el tamaño de fuente y la resolución de la imagen, está formateado de una manera agradable para dispositivos móviles.

2. Monitor de campaña

Las plantillas que ofrece CampaignMonitor son similares a muchas otras, en las que los resultados de los correos electrónicos receptivos se muestran en la herramienta de vista previa. Por ejemplo, aquí hay una plantilla de CampaignMonitor:

Fuente de imagen

Puede ver los diferentes dispositivos uno al lado del otro para que pueda comparar elementos de diseño fácilmente. Se pueden realizar pequeñas ediciones para crear la mejor experiencia para todos los suscriptores.

Las plantillas de CampaignMonitor suelen ser gratuitas, por lo que es una buena opción si tiene un presupuesto mínimo.

3. Desnuda

Stripo ofrece más de 300 plantillas de correo electrónico HTML gratuitas. Puede elegir plantillas por industria, temporada, tipo y función. Por ejemplo, aquí hay una plantilla de su sección de industria comercial.

Fuente de imagen

Una buena señal de una plantilla de correo electrónico receptiva sólida es la opción de ver la vista previa en las variaciones de escritorio y teléfono inteligente, como se muestra en el modo de vista previa de Stripo.

Observe cómo se adoptó un diseño de una sola columna en la vista previa móvil para ajustarse a las especificaciones de los teléfonos.

Stripo es un sitio web que puede visitar rápidamente para encontrar una plantilla que se ajuste a sus objetivos. Puede considerar Stripo si está buscando probar correos electrónicos receptivos o si desea inspiración para el diseño.

4. Contacto constante

Constant Contact ofrece más de 200 plantillas de correo electrónico profesionales a las que se puede acceder después de registrarse. Al observar el ejemplo a continuación, puede ver que la plataforma ofrece plantillas de correo electrónico receptivas.

Fuente de imagen

Las plantillas de Constant Contact tienen edición de arrastrar y soltar, la opción de agregar encuestas, funciones de comercio electrónico y una herramienta de biblioteca de fotos. Todas estas características pueden ayudar a crear los suscriptores de correo electrónico que quieren ver.

Es útil usar un servicio como Constant Contact porque las herramientas específicas le permiten mantener la coherencia, como en el ejemplo anterior. Se puede decir que la naturaleza receptiva del correo electrónico no compromete ninguno de los elementos de diseño.

Ahora que hemos echado un vistazo a algunas opciones de plantilla, veamos otra forma de hacer que los correos electrónicos receptivos funcionen, junto con las mejores prácticas.

Mejores prácticas de correo electrónico receptivo

El diseño exacto de su correo electrónico receptivo variará según los objetivos de su campaña. Sin embargo, estos consejos pueden ayudarlo a garantizar la mejor experiencia para sus lectores.

• Asegúrese de que su correo electrónico receptivo sea escalable y flexible. Obtenga una vista previa del correo electrónico en diferentes dispositivos para asegurarse de que su mensaje responda.
• Si está codificando su propio correo electrónico, recuerde que las consultas de medios CSS cambian los campos que están fijos a campos que son fluidos.
• Use fuentes más grandes que sean fáciles de leer en pantallas más pequeñas.
• Los diseños de una sola columna son más fáciles de escalar. Si los diseños simples son buenos para sus páginas web, definitivamente considérelos para correos electrónicos receptivos.

Asegúrese de probar sus correos electrónicos antes de presionar "programar". Solo finalice los diseños una vez que vea cómo se ven en múltiples resoluciones de pantalla. Muchas personas acceden a los correos electrónicos desde el móvil solo por la facilidad de hacerlo.

Una forma sencilla de verificar la efectividad de su correo electrónico es enviárselo a usted mismo o a su equipo como prueba: ¿se compara con los otros correos electrónicos de marketing receptivos en su bandeja de entrada? Si es así, está listo para enviar.

Introducción a los correos electrónicos receptivos

Los correos electrónicos receptivos crean una experiencia mejor y más accesible para sus clientes. Si recién está haciendo la transición, comience explorando las plantillas de correo electrónico receptivas prefabricadas. Esto le ahorrará tiempo y le dará flexibilidad de diseño.

Entonces, obtenga una segunda opinión. Pida a un colega que abra un correo electrónico en su escritorio y teléfono. Puede obtener sus comentarios honestos sobre ambas experiencias.

Por último, no tengas miedo de experimentar. Puede probar A/B diferentes diseños receptivos hasta que encuentre el diseño que más resuene.

Pronto, estará enviando correos electrónicos receptivos y aumentando sus tasas de apertura.