Un email adaptado a dispositivos móviles es un email que se ajusta y se muestra correctamente en varios tamaños de pantalla, incluidos smartphones y tabletas. Los emails no adaptados a dispositivos móviles pueden mostrarse de forma incorrecta y confundir al usuario. Asegurarse de que el diseño de su email se adapta a los dispositivos móviles es crucial, ya que aproximadamente la mitad de los emails se abren en dispositivos móviles. Garantiza la legibilidad en diferentes dispositivos y evita que los usuarios amplíen o reduzcan el zoom para ver el contenido.
Para simplificarle esta tarea, adaptamos automáticamente sus diseños de email a los dispositivos móviles: elementos como imágenes, texto y botones se escalan y reorganizan automáticamente para ajustarse a las pantallas de los móviles. No obstante, siempre puede optimizar este diseño predeterminado de email para dispositivos móviles utilizando las distintas opciones de nuestra vista previa en modo móvil y siguiendo nuestros consejos para ofrecer a sus destinatarios la experiencia más óptima.
Información relevante
- Asegúrese de comprender la diferencia entre bloques de sección y de contenido.
- Aprenda a diseñar eficazmente su email para la configuración del modo oscuro, ya que a menudo se activa en los dispositivos móviles para evitar la fatiga visual y ahorrar batería. Para obtener más información, consulte nuestro artículo dedicado Crear emails compatibles con el modo oscuro.
💡 Sugerencias para emails adaptados a dispositivos móviles
-
Simplifique el diseño con una sola columna
Modifique el diseño de su contenido para evitar sobrecargar el diseño del email. Las pantallas de los dispositivos móviles tienen un espacio limitado y tener demasiado contenido puede ser ineficaz. -
Use imagen cuadrada u horizontal
Para las imágenes, se recomienda que utilice formatos cuadrados u horizontales, ya que son más pequeños que los verticales. Además, asegúrese de que el tamaño de píxeles de su imagen no exceda el tamaño de la pantalla móvil. -
Evite contenido grande
Cambie el tamaño del contenido, especialmente si tiene imágenes o logotipos grandes cuando se visualicen en el dispositivo móvil. Mantenga el ancho de sus imágenes entre 400 y 650 píxeles. Una imagen de 400 píxeles de ancho es el tamaño más pequeño requerido para una visualización de ancho completo en un dispositivo móvil. También puede aumentar el tamaño de sus botones para aumentar la posibilidad de hacer clic. Le recomendamos que pruebe sus emails antes de enviarlos a sus destinatarios para comprobar el tamaño de su contenido y asegurarse de que son adecuados para dispositivos móviles. -
Implemente el texto alternativo en la imagen o el logotipo
Para su imagen, se recomienda añadir texto alternativo, que es la descripción textual que aparece cuando una imagen o logotipo no se muestra en un email o cuando el destinatario ha bloqueado la imagen. También es muy recomendable, ya que mejora la accesibilidad de su contenido para aquellos que utilizan lectores de pantalla.
➡️ Para obtener más información, consulte nuestra sección dedicada en el artículo Usar bloques de contenido (texto y enlaces, imagen, botón, etc.).
📱 Optimizar el diseño para dispositivos móviles
Cuando diseñe su email desde el editor Drag and Drop, podrá ver y editar el diseño predeterminado del email para dispositivos móviles haciendo clic en el icono de móvil situado en la parte superior derecha de la pantalla:
Le ofrecemos diferentes posibilidades para editar la versión móvil predeterminada del diseño de su email y elegir cómo desea que se muestre su contenido en los dispositivos móviles:
- Ajustar el email a toda su anchura;
- Editar el diseño del contenido;
- Ocultar el contenido para equipos de escritorio o dispositivos móviles; o
- Cambiar el tamaño del contenido.
Ajustar el cuerpo del email a la anchura máxima
Utilice la opción Full width on mobile (Anchura completa en móviles) para ampliar el tamaño del cuerpo de su email a la anchura completa de los dispositivos móviles. Esto es recomendable para mejorar la legibilidad del email:
- Haga clic en el icono de móvil en la parte superior de la pantalla para acceder al modo móvil.
- Haga clic en Style (Estilo) a la izquierda de la pantalla.
- En la sección Template (Plantilla) del panel izquierdo, active la opción Full width on mobile (Anchura completa en móviles).
Modificar el diseño del contenido
Para cada sección, puede elegir la alineación y la orientación de su contenido. Alinéelo verticalmente para mejorar la legibilidad u horizontalmente para ahorrar espacio. La orientación que elija dependerá del tipo de contenido que quiera mostrar. Para ayudarle a elegir cómo mostrar su contenido en dispositivos móviles, aquí tiene algunos ejemplos de lo que debe y no debe hacer:
✅ Sí | ❌ No | |
Alineación vertical | ||
Alineación horizontal |
Si la orientación del contenido en la versión móvil predeterminada de nuestro editor no le convence, puede editarla:
- Haga clic en el icono de móvil en la parte superior de la pantalla para acceder al modo móvil.
- Seleccione la sección cuya orientación desea cambiar.
- En el panel izquierdo, seleccione la orientación de contenido que desee:
- Align vertically (Alinear verticalmente), haga clic en la flecha que apunta hacia abajo.
- Align horizontally (Alinear horizontalmente), haga clic en la flecha que apunta hacia la derecha.
- Si elige alinear el contenido verticalmente, también puede intercambiarlo para invertir el orden del contenido de la sección. Así, por ejemplo, el texto aparecerá antes que la imagen, o viceversa.
Para ello, active la opción Swap content (Intercambiar contenido) del panel izquierdo:
Ocultar una sección o un bloque de contenido
Ocultar una sección o un bloque de contenido en dispositivos móviles ayuda a reducir los contenidos largos, crear un diseño minimalista y evitar la sobrecarga del email en los móviles. Puede optar por transferir lo que le parezca más útil e importante al modo móvil y ocultar el contenido no esencial. Para saber cómo ocultar una sección o un bloque de contenido en dispositivos móviles, consulte nuestro artículo dedicado Mostrar u ocultar contenido según el tipo de dispositivo. |
Cambiar el tamaño del contenido
La velocidad de carga en los dispositivos móviles es más lenta que en los equipos de escritorio. Cambie el tamaño de sus botones o imágenes para que su email se cargue más rápido en los dispositivos móviles:
- Haga clic en el icono de móvil en la parte superior de la pantalla para acceder al modo móvil.
- Seleccione el botón o la imagen que desea cambiar de tamaño.
- En la sección Width (Anchura) del panel izquierdo, introduzca la anchura que desea para su contenido. Puede cambiar el tamaño en porcentaje o en píxeles haciendo clic en el menú desplegable junto a %.
Recomendamos mantener el ancho de la imagen entre 400 y 650 píxeles.
⏭ ¿Qué es lo siguiente?
🤔 ¿Tiene alguna duda?
Si tiene alguna pregunta, no dude en ponerse en contacto con nuestro equipo de asistencia mediante la creación de un ticket desde su cuenta. Si todavía no tiene una cuenta, puede ponerse en contacto con nosotros aquí.
Si necesitas ayuda con un proyecto usando Brevo, podemos ponerte en contacto con un socio certificado de Brevo.