Editor Drag and Drop - Sexta parte: optimizar el diseño del email para dispositivos móviles (adaptado a dispositivos móviles)

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

💡 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:

blobid1.png

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 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:

  1. Haga clic en el icono de móvil en la parte superior de la pantalla para acceder al modo móvil.
  2. Haga clic en Style (Estilo) a la izquierda de la pantalla.
  3. En la sección Template (Plantilla) del panel izquierdo, active la opción Full width on mobile (Anchura completa en móviles).Template_full_width_mobile_en-us.jpg

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:

  No
Alineación vertical Align_vertically_do_en-us.jpg Align_vertically_dont_en-us.jpg
Alineación horizontal Align_horizontally_do_en-us.jpg Align_horizontally_dont_en-us.jpg

Si la orientación del contenido en la versión móvil predeterminada de nuestro editor no le convence, puede editarla:

  1. Haga clic en el icono de móvil en la parte superior de la pantalla para acceder al modo móvil.
  2. Seleccione la sección cuya orientación desea cambiar.
  3. En el panel izquierdo, seleccione la orientación de contenido que desee:
    1. Align vertically (Alinear verticalmente), haga clic en la flecha que apunta hacia abajo.
    2. Align horizontally (Alinear horizontalmente), haga clic en la flecha que apunta hacia la derecha.Mobile_mode__content_orientation_en_us.gif
  4. 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:
    Mobile_mode_swap_content_en-us.gif

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.

email-with-display-condition_EN-US.png
💡 Información relevante
En el modo de equipo de escritorio, puede ocultar contenido basado en atributos de contacto, parámetros transaccionales o bloques repetibles.

Cambiar el tamaño del contenido

💡 Información relevante
Cambiar el tamaño de los títulos y textos en el modo móvil, también hará que se cambien en el modo de equipo de escritorio.

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:

  1. Haga clic en el icono de móvil en la parte superior de la pantalla para acceder al modo móvil.
  2. Seleccione el botón o la imagen que desea cambiar de tamaño.
    Resize_image_button_en-us.jpg
  3. 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.

💬 ¿Fue útil este artículo?

Usuarios a los que les pareció útil: 9 de 56