Diseño de correos electrónicos aptos para dispositivos móviles

Con más y más personas en dispositivos móviles, es más importante que nunca tener el móvil en mente a medida que creas tus correos electrónicos. A continuación se presentan algunos consejos y trucos que puedes usar al crear tus propias plantillas para que puedas mantenerte a la vanguardia en el juego de los buzones móviles y mantener a tus suscriptores interesados.

Nota: No es posible editar un correo electrónico solo para dispositivos móviles o solo para escritorio. En su lugar, crearás un correo electrónico que se presentará de forma diferente en ambas apps.

Los clientes de correo electrónico leen los mensajes de izquierda a derecha
Los elementos HTML siempre se apilarán de izquierda a derecha. Esto significa que los bloques de contenido se apilarán de izquierda a derecha. Si creas un correo electrónico con una imagen a la izquierda y luego agregas un bloque de texto a la derecha de esa imagen, la imagen aparecerá encima de ese texto en el dispositivo móvil. Además, siempre es mejor mantener tu diseño simple y limpio, teniendo en cuenta la pantalla más pequeña.

Mantén el ancho de tu correo electrónico por debajo de los 650 píxeles
Este es el ancho que funciona para la mayoría de los clientes de correo electrónico y dispositivos móviles. Si un correo electrónico es más ancho que 650 píxeles, es posible que deba utilizarse una barra de desplazamiento horizontal para ver tu mensaje. Esto no solo hace que tu mensaje sea difícil de leer, sino que puede costarte una cancelación de suscripción debido a una experiencia menos que estelar.

El ancho de la imagen debe ser de 400 a 650 píxeles
Una imagen de 400 píxeles de ancho es el mínimo necesario para que muestre todo el ancho en un dispositivo móvil. Para ver el tamaño de la imagen, haz clic en la imagen en el diseñador y mira el tamaño en la pestaña Opciones:

adjust_image_size.png

Para cambiar su tamaño, simplemente ajústala en la pestaña de opciones o cambia el tamaño del archivo de imagen real y vuelve a cargar la imagen en su sitio.

Recuerda, siempre es mejor reducir una imagen grande que ampliar una imagen pequeña.

Uso de texto alternativo
El texto alternativo es una gran herramienta, ya que este texto será visible en caso de que un suscriptor tenga las imágenes bloqueadas. Para agregar texto alternativo a tu imagen, haz clic en la imagen de tu campaña y agrega 1 o 2 palabras al campo "Información" en la pestaña de opciones:

alt_text_2.png

Utiliza bloques de imagen en lugar de insertar una imagen en un bloque de texto
No se podrá hacer clic en los bloques de contenido de texto que contengan una imagen y enlaces alineados con dicha imagen en Outlook 2007 o Outlook 2013 (consulta la imagen siguiente). Además, es posible que el texto no se ajuste correctamente alrededor de la imagen cuando se vea en el dispositivo móvil.

example_link.png

Utiliza el widget espaciador para crear espacios en blanco alrededor del contenido y las imágenes
El uso de relleno alrededor de una imagen o contenido para crear espacios en blanco obligará a que tu contenido se vuelva estrecho cuando se vea en algunos dispositivos móviles. En su lugar, utiliza el widget espaciador en el diseñador de arrastrar y soltar y establécelo para que se oculte en el dispositivo móvil si lo deseas (más información a continuación).

spacer_widget.png

Aprovecha la función "ocultar en el móvil"
Esta función ocultará los elementos no esenciales (también conocidos como desorden) de tu correo electrónico cuando se vean en un dispositivo móvil. Esto mejorará la experiencia de tus suscriptores para que sigan abriendo los correos.

Para ocultar un elemento en el dispositivo móvil, simplemente haz clic en ese bloque y haz clic en el engranaje:

click_cog.png

Haz clic en "Ocultar en dispositivos móviles".

hide_on_mobile.png

Cuando pases el ratón sobre ese elemento en el diseñador, verás lo siguiente:

hide_message.png

Experimentar con texto de preencabezado
Destácate del resto de los correos electrónicos en el buzón de tu suscriptor y persuádelos a abrir tu correo electrónico. Obtén más información sobre cómo agregar un texto de preencabezado a tu correo electrónico aquí

Prueba tu correo electrónico
Utiliza la vista previa del escritorio y envíate a ti y a tus colegas un correo electrónico de prueba para verlo en diferentes dispositivos móviles. También puedes utilizar nuestra función de vista previa de compatibilidad para probar tu correo electrónico en varios clientes de correo electrónico.

¿Tiene más preguntas? Enviar una solicitud