Los correos responsive y los adaptados a dispositivos móviles: una guía práctica

¿Listo? Empecemos.

Teniendo en cuenta estos factores, ¿por qué debería elegir diseños que se adapten a los dispositivos móviles?

Actualmente, hay más de 6.500 millones de usuarios de smartphones en el mundo.

El 85% de estas personas utilizan sus smartphones para revisar sus correos electrónicos.

El email marketing tiene un retorno de inversión de cerca del 4,200% (eso es $42 en tu bolsillo por cada $1 invertido).

Solamente teniendo en cuenta estos 3 hechos, es fácil darse cuenta por qué las campañas de correo electrónico pensadas para una audiencia de dispositivos móviles es tan importante.

Si no creas correos electrónicos adaptados a dispositivos móviles, ten por seguro que perderás el 45% de los clientes de correo electrónico que mencionamos antes.

Así que ahora puede que te estés preguntando . . .

Un correo electrónico responsive sigue un diseño de plantilla que se ajusta de manera automática al tamaño de la pantalla del dispositivo desde el que se abra.

Los correos electrónicos responsive utilizan algo llamado “media query” para ayudarte a reacomodar y ajustar tu mensaje como sea necesario para el tamaño de cada pantalla.

Los correos electrónicos responsive requieren más tiempo y código que desarrollar, en comparación con los correos electrónicos adaptados a dispositivos móviles.

Si bien las plantillas de los correos electrónicos para dispositivos móviles son más sencillas de diseñar, cuentan con menos opciones de personalización, si se compara con los correos electrónicos con un diseño responsive.

También hay un límite para los tipos de smartphones que son compatibles con el diseño responsive.

Ahora que ya tienes una idea de cómo funcionan esta clase de correos electrónicos, vamos a centrar nuestra atención en las características clave de un correo electrónico adaptado a un dispositivo móvil.

En un computador de escritorio o en uno portátil, hasta 60 caracteres de tu línea de asunto serán visualizados.

Para que tu correo electrónico esté adaptado a un dispositivo móvil, no debes utilizar más de 25-30 caracteres para tu línea de asunto.

También, recuerda que tu línea de asunto debe ser concisa e impactante, de lo contrario, tus correos electrónicos pueden no llegar a ser abiertos.

Debido a que los teléfonos celulares tienen un espacio limitado para visualizar tu correo electrónico, un diseño de una sola columna sería ideal.

Ofrece mayor facilidad para los móviles en comparación a un diseño de columnas múltiples o de dos columnas.

Los usuarios tampoco tienen que aumentar o desplazar la pantalla hacia los lados para ver el contenido, lo cual mejora el UX de tus correos electrónicos.

Para que tus correos electrónicos estén adaptados a los dispositivos móviles, haz tus botones e íconos un poco más grandes y deja un espacio de ± 10 píxeles alrededor o entre cualquier área en la que se pueda hacer clic.

Esto le permite a los usuarios navegar más fácil en tus correos electrónicos y previene hacer clic accidentalmente.

También es aconsejable ajustar las márgenes a 20-30 píxeles alrededor del borde del correo electrónico, para que los dedos puedan sostener el dispositivo sin esconder información clave.

Es aconsejable alargar tus botones de llamado a la acción aproximadamente 44 x 44 píxeles y ubicarlos en la parte de arriba del correo electrónico (los 250 píxeles superiores) para mayor visibilidad.

Si decides ubicar tus CTA al final de tu correo electrónico, utiliza colores contrastantes o formas inusuales para destacarlos.

Cuéntale a tus lectores qué quieres que hagan, dejando en tus CTA un mensaje claro y conciso con no más de 5 palabras (por ejemplo, “haz clic para suscribirte” o “Ver mi carrito de compras”).

Al diseñar correos electrónicos responsive para computadores de escritorio, puedes trabajar con un ancho fijo entre los 550-600 píxeles (por defecto lo utilizan la mayoría de los correos electrónicos de marketing y newsletters).

Sin embargo, al crear correos electrónicos para un diseño móvil, trabaja hasta con 320 píxeles para garantizar que tus correos electrónicos se ajusten a pantallas pequeñas.

Para dispositivos más grandes como tablets o computadores de escritorio, procura que el correo electrónico se visualice hasta a 450 píxeles para que se acomode a ambas pantallas.

Si tu correo electrónico presenta problemas, tus usuarios en dispositivos móviles podrían dejar de confiar en ti y eliminar tus correos electrónicos o enviarte a la carpeta de spam.

Para prevenir esto, diseña al menos 2 plantillas de correo electrónico y pruébalas en varios dispositivos (iOS y Android).

Systeme.io es perfecto para esto porque con nosotros también puedes probar tus correos electrónicos antes de enviarlos.

Por muy tentador que parezca, no te recomendamos añadir barras de menú a tu diseño de correo electrónico.

Esto podría causar que los usuarios pierdan la atención con el desplazamiento hacia los lados.

En lugar de esto, agrega enlaces o imágenes al mensaje de tu correo electrónico si deseas que los usuarios naveguen en tus páginas de captura.

Al añadir elementos de diseño como GIFs o imágenes de fondo a tus correos electrónicos, debes estar pendiente del tamaño de los archivos de tu correo electrónico.

Entre más pesados sean tus correos electrónicos, más tiempo tomará descargarlos, lo cual podría causar que los usuarios pierdan el interés.

Los correos electrónicos regulares basados en texto con un mínimo de gráficos puede llevar hasta los 100KB antes de ser recortado.

Para los correos electrónicos más pesados, te recomendamos no utilizar más de 1MB para tus campañas de email marketing.

Si decides utilizar imágenes en tus campañas de correo electrónico, asegúrate que estén comprimidas antes de añadirlas al diseño de tu correo electrónico.

Las imágenes comprimidas te permiten contar con una mejor UX porque reducen el ancho de banda necesario para cargarlas y también permiten que tus correos electrónicos se carguen más rápido.

Ciertos dispositivos en donde se pueden ver los correos electrónicos, como los smartphones Android, tienen deshabilitada por defecto la visualización de imágenes, añade siempre descripción a las imágenes (alt-text) para que los usuarios puedan saber qué imagen será desplegada.

Consejos adicionales sobre imágenes:

La optimización de correos electrónicos para dispositivos móviles no se queda solo en los gráficos, tu contenido también necesita motivar al cliente del correo electrónico.

Crea un diseño para el correo electrónico limpio y sencillo y enfócate en los aspectos fundamentales de tu mensaje.

Evita que el texto de tu correo electrónico sea largo y con un contenido vacío.

Estos son algunos consejos para ayudarte a limitar el contenido de tu correo electrónico sin reducir la calidad:

Ahora que conoces lo que le hace necesita el diseño de tu correo electrónico para que se destaque, veamos cuál es la mejor plataforma para ayudarte a impulsar por los cielos tu email marketing.

La dirección de correo electrónico de tu remitente aparecerá de manera automática con el correo electrónico vinculado a tu cuenta de systeme.io.

Si tu negocio está listo para avanzar, nuestros planes Startup ($27/mes) y Webinar ($47/mes) son perfectos cuando se trata de tecnología para correos electrónicos en dispositivos móviles.

Estos planes ofrecen espacio hasta para 5.000 y 10.000 clientes respectivamente.

También tendrás acceso a la migración gratuita de tu sitio web (en las anualidades de todos los planes pagos) y a webinars (a partir del plan Webinar).

Ya que has aprendido acerca de cómo crear la versión móvil de un correo electrónico para distintos dispositivos, resolvamos algunas preguntas frecuentes sobre los correos electrónicos responsive/adaptados a dispositivos móviles.

Sí, la app de Gmail desde septiembre de 2016 es compatible con el diseño responsive en sus correos electrónicos.

Outlook hizo lo mismo en febrero de 2017 al admitir las plantillas de diseño responsive para correo electrónico para sus clientes de correo electrónico.

Para Gmail/macOS/Outlook:

Para Thunderbird:

Para ampliar esta información, lee aquí el artículo de Lifewire (en inglés).

Utiliza una imágen/logo de tamaño pequeño. Usa una plantilla de diseño vertical para logos más anchos y un diseño horizontal para los más pequeños.

Si tu negocio tiene una dirección larga, debes dividirla en 2 o 3 líneas y usa un texto seleccionable como “Escríbeme” o “Ver mi sitio web” en lugar de escribir la dirección completa.

Una gran plataforma para ayudarte con esto es Email Signature Rescue.

Excluyendo Outlook y Gmail como los mejores contendientes, estas son otras 5 apps para elegir:

Para dar una mirada en mayor detalle sobre estas apps, haz clic aquí.

Desde el 2018, los dispositivos móviles estándar iPhone y Android vienen con un ancho de pantalla para correo electrónico de 375px.

Otros dispositivos, como el Micromax Bolt Supreme o Vodafone Smart 7 ofrecen un ancho máximo en el dispositivo de unos 320px.

Diseñar la plantilla de correo electrónico con diseño responsivo o adaptada a dispositivos móviles tiene que ver con las proporciones óptimas de diseño para dispositivos de pantalla pequeña.

Pero eso no es todo.

Si quieres que los clientes que reciben tu correo electrónico estén contentos con tu negocio, tienes que asegurarte que los diseños de tu página de captura y de tu sitio web también brinden la mejor UX para dispositivos móviles.

Permite que el plan gratuito de systeme.io te ayude a alcanzar este propósito.

Si te gustaría aprovechar la plataforma al máximo, nuestro plan Ilimitado está disponible por solo $97/mes y te ofrece (lo has adivinado) ¡acceso ilimitado a todas las características!

Estamos hablando de webinars automatizados, dominios personalizados y una sesión técnica de 1h.

Todo lo que tienes que hacer es registrarte.

Con systeme.io, el cielo no es el límite sino tu imaginación.