Responsive_Email_Layout___Cover_Image
timer ~ 9 min. leídos
90667 vistas
valóralo
20 diciembre 2021

La Nueva Era del Diseño de Correo Electrónico Para Móviles

Stripo / Blog / La Nueva Era del Diseño de Correo Electrónico Para Móviles

El diseño de correo electrónico responsivo no es una sorpresa hoy en día, ya que todos sabemos que la compatibilidad con los dispositivos móviles, es decir, la optimización para móviles, ya no es sólo agradable, sino que es una necesidad. Y todos nos atenemos a esta regla de oro: asegúrese de que tus correos electrónicos estén optimizados para móviles.

Pero, ¿sabías que el diseño responsivo va mucho más allá de la opción "ajustar a la pantalla del móvil"? Puede aplicar tamaños de letra a los encabezados, al texto normal, a los botones, etc. que difieren de la versión de escritorio de tu correo electrónico. También puede trabajar en los rellenos internos dentro de los contenedores, y ocultar/desactivar ciertos elementos en los dispositivos móviles. 

Cómo hacerlo sin conocimientos de codificación - lo mostraremos a continuación.

1. ​​ Ocultar/desactivar elementos del correo electrónico en dispositivos de escritorio y móviles

Stripo le permite ocultar algunos elementos en los dispositivos móviles, y al mismo tiempo ocultar otros elementos en los dispositivos de escritorio. Esto significa que puede elegir qué elementos se mostrarán en los dispositivos móviles, y cuáles se mostrarán sólo en los dispositivos de escritorio.

Hay muchas razones por las que puede necesitar esta opción. Por ejemplo, para ocultar algunas pestañas del menú en los dispositivos móviles para evitar el desplazamiento horizontal, que podría aparecer si se aplica un tamaño de fuente grande al texto. O para ocultar un espaciador vertical si lo ha utilizado para dividir visualmente elementos que están colocados en una fila.

Cómo hacerlo con Stripo:

  • haga clic en el elemento que quieras mostrar/ocultar para dispositivos móviles;

  • en el panel de Configuración, encuentra la opción "Ocultar elemento";

  • haga clic en el icono "Móvil" o "Escritorio".

Diseño de correo electrónico receptivo_Ocultar y habilitar elementos en dispositivos móviles

Para que vea cómo funciona, creamos un correo electrónico con espaciadores entre las fotos en los dispositivos de escritorio, y los desactivamos para los dispositivos móviles.

Cómo crear un diseño de correo electrónico receptivo_Versión de escritorio_con espaciadores

(Versión de escritorio, con espaciadores)

Cómo crear un diseño de correo electrónico receptivo_Versión móvil_sin espaciadores

(Versión móvil, sin espaciadores)

Experimente la nueva era de la optimización para móviles
Comienza

2. Estilos de diseño para el texto del correo electrónico

Para que los textos de sus correos electrónicos sean totalmente legibles en cualquier dispositivo, es posible que quiera aplicar un tamaño de fuente a cualquier parte de su copia que sea más grande o más pequeña que la misma en un escritorio.

Puede hacerlo en la pestaña "Formato móvil".

Diseño de correo electrónico receptivo_Configuración de estilos móviles con Stripo_Sin código

En la pestaña "Formato móvil", puede aplicar el tamaño de la fuente a:

  • la copia del encabezado;

  • la copia del contenido;

  • copia de pie de página;

  • copia del área de información;

  • pestañas del menú;

  • encabezados 1-3.

Para estos últimos, también puede elegir una alineación de texto necesaria: Derecha, centro o izquierda.

Correos electrónicos optimizados para dispositivos móviles_Trabajar en estilos de encabezados

Todos estos estilos sólo se aplicarán a la versión móvil de tu correo electrónico, y no afectarán a los estilos de diseño que hayas establecido en la sección "Configuración general", en la pestaña "Apariencia" para la versión de escritorio.

Para mostrarle cómo funciona, hemos creado un correo electrónico corto con un menú y un encabezado.

Escritorio_El tamaño de fuente del menú es de 12 píxeles

(Escritorio, menú 14 px, encabezado 64 px)

Móvil_Tamaño de fuente y encabezados del menú

(Móvil, menú 18 px, encabezado 36 px)

Optimice los textos de tus correos electrónicos para que sean totalmente legibles en todos los dispositivos
Comienza

3. Estilos de diseño para los botones CTA

No hace falta decir que los botones CTA son el elemento clave en todos los correos electrónicos, ya que permiten a los usuarios realizar la acción necesaria, dirigirlos a nuestra página web, etc. Esto significa que tenemos que hacerlos visibles y fáciles de pulsar.

En la pestaña "Formato móvil", puedes:

  • establecer un tipo de letra más grande para sus botones - en el control de tamaño de texto de los botones;

  • activar la opción "Botones de ancho completo" para que el botón se ajuste a la pantalla del móvil de un usuario.

Correos electrónicos optimizados para dispositivos móviles_Ancho del botón

De este modo, se asegura de que sus botones sean visibles y se pueda hacer clic en ellos en los dispositivos móviles.

Para mostrarle cómo funciona, hemos creado un breve correo electrónico con un botón CTA.

Diseño de correo electrónico receptivo_Botones en escritorios

(Escritorio, tamaño de fuente del botón 18 px)

Correos electrónicos optimizados para móviles_Botón de ancho completo

(Móvil, tamaño de fuente del botón 22 px)

Si activa la opción "Botones de ancho completo", también puede establecer sus rellenos superiores e inferiores, es decir, el espacio interno entre el borde del botón y el texto dentro de él.

Importante

Actualmente, nuestro equipo de desarrollo está trabajando en la nueva versión del editor. El Nuevo Stripo le permitirá trabajar en el diseño de una versión necesaria de su correo electrónico - escritorio, o móvil. Para ello, sólo tiene que cambiar a un modo necesario y perfeccionar su correo electrónico.

Pruebe la nueva versión del editor de correo electrónico Stripo ahora
Pruebe

4. Alineación de elementos

Algunos elementos pueden verse bien en los dispositivos de escritorio cuando están alineados al centro, pero se ven mal en los dispositivos móviles. Por lo tanto, es posible que desee establecer una alineación diferente para ciertos elementos en los dispositivos móviles y de escritorio.

Cómo hacerlo con Stripo:

Por favor, tenga en cuenta que esta opción funciona para elementos de correo electrónico como textos, botones, vídeos e imágenes*. Y nunca para contenedores enteros, estructuras y franjas.

  • haga clic en un elemento de correo electrónico necesario en su plantilla;

  • en el panel de configuración, verás el icono "Móvil";

Diseño de correo electrónico receptivo_Ajuste de alineación para dispositivos móviles

  • haga clic en él para activar la configuración del elemento elegido;

  • elija una alineación necesaria.

* La opción de alineación funciona sólo para aquellos videos e imágenes, cuando queda algún espacio en el contenedor, como los rellenos internos. Si la imagen o el vídeo ocupan todo el contenedor, la opción de alineación no estará activa. 

Para que veas cómo funciona, hemos alineado las imágenes al centro para el escritorio, y a la izquierda para los móviles.

Imágenes alineadas al centro en dispositivos de escritorio_Cómo crear un correo electrónico receptivo

(Escritorio, imágenes alineadas al centro)

Imágenes alineadas a la izquierda en dispositivos móviles

(Móvil, imágenes alineadas a la izquierda)

5. Rellenos 

A veces quieres que el diseño de tu correo electrónico sea "limpio" con mucho espacio en blanco. A veces se utilizan rellenos para los contenedores y estructuras/filas para rellenarlos con un fondo de color. Todo esto se ve bien en los dispositivos de escritorio, pero en los dispositivos móviles sólo hace que esos elementos se vean más pequeños, o puede empeorar un poco la forma en que su correo electrónico se ve. 

Por lo tanto, es posible que desee deshacerse de ellos para los dispositivos móviles.

Tenga en cuenta que los rellenos funcionan para los contenedores y las estructuras.

Cómo hacerlo con Stripo:

  • haga clic en un elemento necesario en su plantilla de correo electrónico;

  • en el panel de configuración, busca el icono "Móvil";

  • haga clic en él para activar la configuración para móviles;

Configuración de acolchados para dispositivos móviles

  • establece el valor necesario para sus rellenos.

Importante

Si necesita rellenos iguales para todos los 4 lados alrededor del elemento dentro de la estructura, sólo tiene que establecerlo una vez aquí:

Acolchados para móviles_Un valor para todos los lados

Y este valor se aplicará a los cuatro lados del elemento.

Si necesita establecer valores diferentes para cada lado, por favor haga clic en el botón "Más".

Establecer diferentes valores de relleno para dispositivos móviles

Sólo para mostrarte cómo funciona, establecemos los rellenos para la versión de escritorio de nuestro correo electrónico, y no establecemos ninguno para la versión móvil.

Acolchados entre elementos en dispositivos móviles

(Escritorio, rellenos entre dos imágenes en una fila y entre filas)

Configuración de acolchados para dispositivos móviles_Valor cero

(Móvil, cero rellenos)

6. Inversión de los elementos del correo electrónico para los dispositivos móviles

A menudo puede ver el siguiente orden de las fichas de producto en los correos electrónicos.

Diseño de correo electrónico receptivo_Orden de elementos de correo electrónico en el escritorio

Normalmente, los profesionales del marketing por correo electrónico lo utilizan para diversificar sus correos electrónicos promocionales.

En los dispositivos de escritorio, estas tarjetas de producto se ven muy bien. Pero en las pantallas de los móviles, no se verán bien y pueden ser incluso algo confusas, ya que el elemento que se encuentra a la izquierda en los dispositivos de escritorio, en las pantallas de los móviles irá por encima del elemento que se encuentra a la derecha en los escritorios. De este modo, los destinatarios pueden ver dos descripciones de producto seguidas, en lugar de un orden más lógico: fragmento de producto, descripción, botón CTA, fragmento de producto, etc.

En este caso, es necesario invertir el orden del contenedor para cada segunda fila.

Cómo hacerlo con Stripo:

  • haga clic en el icono "Estructura" de una fila necesaria;

El icono de estructura

  • haga clic en el icono "Estructura" de una fila necesaria.

El botón de inversión de contenedores

Eso es todo.

Para que vea cómo funciona, activamos la opción "Inversión" para un correo electrónico, y la desactivamos para el otro.

La opción de inversión de contenedores desactivada

(Móvil, la opción de Inversión desactivada)

La opción de inversión en_Diseño de correo electrónico optimizado para dispositivos móviles

(Móvil, la opción de Inversión activada)

Esta imagen ilustra que la descripción va después del fragmento de producto para todas las tarjetas — el orden que pretendíamos ver.

7. Imágenes responsivas

Cuando se diseña un correo electrónico HTML responsivo, la función más sencilla que se puede utilizar es "Imagen responsiva”

Activando esta opción, te protegerás del innecesario scroll horizontal y de los enormes logos. 

Cómo hacerlo con Stripo:

Tenga en cuenta que esta opción está siempre activada por defecto. Por lo tanto, si sólo quiere que su imagen se ajuste al tamaño de la pantalla de un móvil, no tiene que hacer nada. O quizás quiera comprobar si realmente está activada. Por supuesto, lo está ;) 

Imagen receptiva_La opción está activada

Si necesita que su imagen, como el logo o el icono, se mantenga pequeña en las pantallas de los móviles, puede que quiera desactivar esta opción.

Desactivación de la opción de imagen receptiva para dispositivos móviles

Para mostrarle cómo funciona, activamos y desactivamos la opción "Imagen responsiva" para el mismo logotipo del correo electrónico.

Opción de imagen receptiva DESACTIVADA_Diseño móvil

(La opción "Imagen responsiva" ACTIVADA)

Opción de imagen receptiva ACTIVADA_Diseño compatible con dispositivos móviles

(La opción "Imagen responsiva" DESACTIVADA)

8. ​​ Habilitar/deshabilitar el diseño de email responsivo

Todas las plantillas de correo electrónico que ofrece Stripo son totalmente responsivas por defecto.

Pero puedes desactivar esta propiedad para una determinada plantilla de correo electrónico tuya. De hecho, hemos liberado esta opción a petición de los usuarios. 

Si desactiva esta opción, su correo electrónico en los dispositivos móviles se verá igual que en los dispositivos de escritorio. Puede haber o no desplazamiento horizontal, y seguro que si hay tres contenedores por fila en una versión de escritorio de su correo electrónico, los usuarios verán la misma cantidad de ellos en los dispositivos móviles.

Cómo hacerlo con Stripo:

Tenga en cuenta que, por defecto, esta propiedad está siempre ACTIVADA.

  • en el panel de configuración, vaya a la pestaña "Configuración general";

  • active el botón "Diseño responsivo" para desactivar esta propiedad.

La opción de diseño receptivo

Para que vea cómo funciona, activamos y desactivamos la opción " Diseño responsivo" para el mismo correo electrónico.

La opción de diseño receptivo DESACTIVADA_Creación de correo electrónico optimizado para dispositivos móviles

(Móvil, la opción "Diseño responsivo" DESACTIVADA)

Diseño receptivo_Opción activada_Stripo

(Móvil, la opción "Diseño responsivo" ACTIVADA)

Reflexiones finales

Como puede ver, no se requiere ninguna habilidad de codificación para construir un correo electrónico HTML completamente responsivo. Experimente usted mismo y deje que sus clientes experimenten la nueva era del diseño de correos electrónicos para móviles.

Construya correos electrónicos optimizados para móviles para sus futuras campañas

Te podría interesar

anterior siguiente
banner9
06 junio · 15 min. leídos
Los 10 mejores creadores de plantillas de correo electrónico para 2022

¿Todos los creadores de plantillas de correo electrónico parecen iguales? Ahora estás confundido sobre cuál elegir para tus campañas de correo electrónico, ¿no es así? No es de extrañar, ya que hay muchos. Vamos a hacer un estudio de los constructores más populares para encontrar sus características distintivas para ayudarle a encontrar el mejor constructor de correo electrónico HTML para sus necesidades actuales. Intentaré crear una plantilla en todos estos editores con los mismos archivos multimedia para ver si los...

Diseño Marketing Plantillas
24 mayo · 18 min. leídos
Los mejores tipos de letra para el correo electrónico: Consejos y trucos de uso

Una de las preocupaciones más llamativas en el proceso de producción del correo electrónico es la elección del tipo de letra adecuado. El peso, la altura, la anchura, el color, la forma, el espaciado... ¿Todo es importante? Sí, lo es, pero también una de las cosas más cruciales es elegir la fuente que sea legible. En este post, vamos a mostrarle cómo elegir la mejor fuente profesional para el correo electrónico. Diseñe elegantes correos electrónicos con Stripo en un abrir...

Diseño Plantillas
Greatest Examples of GIF animations in Emails_Cover Image
27 octubre 2021 · 10 min. leídos
16 grandes ejemplos de GIFs animados en correos electrónicos

Los GIFs en los correos electrónicos serán de gran utilidad si quieres mostrar tu producto, llamar la atención de los usuarios sobre ciertos elementos, o simplemente decorar ligeramente tu texto. En este artículo, hemos proporcionado algunos de los mejores ejemplos de animación gif en correos electrónicos. Ejemplos de GIFs animados en correos electrónicos Aquí tienes una recopilación de los mejores ejemplos con GIFs en correos electrónicos. Cada GIF cumple su misión. 1. Adidas (Fuente: Correo electrónico de Adidas) Adidas utilizó...

Diseño Marketing
08 abril 2021 · 17 min. leídos
Los 14 mejores ejemplos de diseño de firmas de correo electrónico

Las buenas firmas de correo electrónico nos ayudan a construir nuestro negocio y a causar una buena impresión a los clientes. Dado que es el último elemento que la gente ve en los correos electrónicos, debemos hacer que nuestras firmas personales sean creativas y memorables. Examinemos los mejores ejemplos de firmas de correo electrónico y su uso apropiado en correos electrónicos y plantillas de boletines para correo electrónico. Cabe mencionar que todos los tipos de negocios requieren firmas de correo electrónico...

Diseño Marketing Plantillas
Mantente siempre atento/a a las últimas noticias de marketing de correo electrónico, guías, artículos e instrucciones