Este manual explica cómo crear correos electrónicos compatibles con móviles en el editor de Stripo. Se centra en la configuración práctica, el control de la maquetación y los problemas comunes en móviles, con instrucciones claras paso a paso y ejemplos que puede aplicar mientras trabaja en el editor.
Puntos clave
- Puede editar la versión móvil directamente, no adivinar el resultado: puede cambiar a la vista móvil en el editor, configurar cualquier configuración y verlos como se verán en los teléfonos.
- Puede configurar primero los estilos móviles globales y luego afinar cada bloque individualmente si es necesario: Stripo le permite definir reglas móviles base en Estilos Generales y luego anularlas para cualquier franja, estructura o bloque cuando sea necesario.
- Puede controlar lo que aparece en móvil, no solo cómo se ve: puede ocultar elementos en móvil, cambiar el orden de apilamiento, ajustar huecos y decidir qué disposiciones se mantienen en fila o se apilan verticalmente.
Entienda cómo Stripo maneja la pantalla móvil
Qué significa "amigable para móviles" en Stripo
Todas las plantillas de correo que creas con Stripo son responsivas por defecto, por lo que su diseño se adapta a pantallas más pequeñas. Sin embargo, puede ajustar las configuraciones móviles adicionales para que los correos se vean exactamente como le gusten en los dispositivos móviles. Estos ajustes incluyen: tamaños de fuente, tamaño de botones (incluidos botones de ancho completo), espaciado (márgenes y relleno en móvil), comportamiento de apilamiento de contenedores en estructuras y ocultar o mostrar algunos elementos adicionales en móvil.
Tenga en cuenta que el resultado final depende del cliente de correo: la configuración específica para móviles depende de consultas multimedia, y algunas aplicaciones no las soportan. En esos clientes, las anulaciones móviles pueden ser ignoradas, y la vista móvil puede parecerse a la versión de escritorio.
Qué cambios se aplican solo en móviles
La configuración solo para móviles afecta a cómo se ve el correo en smartphones, no en la versión de escritorio. Incluyen tamaños de fuente móviles, tamaño de botones (incluidos botones de ancho completo), espaciado (márgenes y relleno en móvil), comportamiento de apilamiento de contenedores en estructuras y ocultación de elementos en móvil.
Cuando la configuración móvil no sirve de nada
Si los controles móviles están inactivos o no aparecen cambios, compruebe el interruptor de Diseño Responsivo.
Diseño responsivo en la apariencia
Úselo cuando trabaje con la configuración de formato móvil:
1. Vaya a Estilos y Diseños Globales.
2. Active el diseño responsivo.
Si el Diseño Responsivo está desactivado, el correo electrónico en dispositivos móviles se parecerá a la versión de escritorio, y la sección de Formato Móvil puede estar inactiva.
Empiece con una base limpia usando Estilos Generales
Cambio entre modos de estilo de escritorio y móvil
Estilos Generales le permite definir reglas de diseño predeterminadas por separado para escritorio y móvil. Utilice el interruptor del dispositivo en el panel de Estilos Generales para cambiar entre Escritorio y Móvil. Cada modo almacena sus propios valores, por lo que los cambios realizados en móvil afectan solo a la vista móvil, no a la versión de escritorio.
Establece reglas globales de diseño y base para todo el correo
Utilice Estilos Generales → Estilos Globales y Diseño para definir cómo se comporta todo el correo antes de trabajar en franjas, estructuras o bloques individuales. Cabe destacar que no todas las funciones de escritorio son aplicables a móviles.
Sin embargo, si desarrolla tanto para versiones de escritorio como para móviles, puede hacer lo siguiente:
Paso a paso: Configurar estilos y distribución globales
Establezca el contexto general:
1. Elija un color de fondo general para el área de mensajes de correo.
2. En un escritorio, el color de fondo cubre toda el área del mensaje.
3. En el móvil, este fondo está oculto.
Añadir una imagen de fondo (solo en el escritorio):
4. Seleccione una imagen de fondo y defina su posición.
5. Active la repetición de la imagen de fondo si la imagen debe ocupar toda la longitud del mensaje.
6. Las imágenes de fondo se renderizan solo en el escritorio y no aparecen en el móvil.
7. Algunos clientes de correo electrónico, incluido Outlook, pueden no mostrar imágenes de fondo en absoluto, por lo que se establece un color de fondo de reserva cerca del color de la imagen.
Configuración del ancho y alineación del contenido del mensaje:
8. El ancho y la alineación solo son posibles en un diseño de escritorio.
9. Defina el ancho del contenido del mensaje. El valor por defecto es 600px.
10. Puede poner cualquier valor entre 320px y 900px.
11. Elija la alineación del mensaje.
Subrayado del enlace de control:
12. Active o desactive los enlaces Subrayados para toda la plantilla de correo.
Activar la dirección del texto de derecha a izquierda:
13. Active la dirección de texto de derecha a izquierda para idiomas que requieren escrituras RTL, como árabe o urdu.
Establecer estilos de lista personalizada:
14. Defina estilos de lista de viñetas que se apliquen a todo el correo.
Defina valores por defecto de espaciado:
15. Establezca el relleno de estructura por defecto. Este acolchado se aplica automáticamente a nuevas estructuras.
16. Configure los márgenes alrededor del mensaje para controlar el espacio entre el contenido del correo y los bordes del área del mensaje.
Estos ajustes crean una base consistente tanto en escritorio como en móvil, reduciendo la necesidad de ajustes posteriores.
Controle la tipografía y el espaciado para la legibilidad móvil
Tipografía global de rayas
Paso a paso: Establecer la tipografía de rayas por tipo y afinar las franjas
Tipografía global de rayas:
1. Vaya a Estilos Generales → Estilos de Rayas.
2. Seleccione un tipo de raya.
3. Establezca la familia de fuentes, la altura de las líneas y el espaciado entre letras para los bloques de texto. Estos ajustes no afectan a los títulos.
4. Además, puede hacer clic en el bloque de contenedor → Stripe.
Establecer fondos de rayas:
5. Defina el color de fondo de la franja y su contenido.
6. Añada una imagen de fondo si es necesario.
7. Establezca un color de fondo de respaldo, ya que algunos clientes, incluido Outlook, pueden no renderizar imágenes de fondo.
O, si abre la configuración de rayas haciendo clic en el bloque contenedor:
Defina el tamaño de la fuente por tipo de franja:
8. Establezca el tamaño de fuente y la altura de línea por defecto para cada tipo de franja.
9. Utilice tamaños de letra más pequeños para la franja del pie de pie cuando sea apropiado.
Ajustar el espaciado de las franjas en móvil:
10. Seleccione una franja específica.
11. Configure el relleno en móvil para controlar el espaciado alrededor de la franja en la vista móvil.
Ocultar una raya en el móvil:
12. Active el elemento oculto en el móvil cuando una franja no debería aparecer en pantallas pequeñas.
Tipografía de franja ancha para diferentes áreas de correo electrónico
Las rayas definen grandes secciones de un correo electrónico y controlan cómo se ve el texto principal a través de diseños repetidos. Cada franja puede pertenecer a un tipo específico, lo que permite un estilo consistente.
Los tipos de rayas incluyen Encabezado, Contenido, Pie de página y área de Información. Usar tipos de rayas ayuda a aplicar diferentes tamaños de fuente y reglas de espaciado, como texto más pequeño en el pie de página.
Paso a paso: Aplicar formato personalizado de bloques para los encabezados y establecer estilos de encabezado
Aplique el formato del encabezado:
1. Seleccione texto dentro de un bloque de texto.
2. Elija H1, H2 o H3 en el menú de formato de texto.
3. En modo móvil, establezca la alineación de texto para los encabezados cuando la alineación del escritorio no funciona bien en pantallas pequeñas.
Establezca estilos de encabezado personalizados en el contenedor:
4. Abra los estilos y cambie entre escritorio y móvil usando el interruptor del dispositivo.
5. Elija el nivel de encabezado que quieras editar.
6. Establezca la familia de fuentes, el espaciado entre letras, el tamaño de la fuente, la altura de la línea, el estilo del texto y el color de la fuente.
Crear CTAs compatibles con móviles que se mantengan configurables
Botones predeterminados que funcionan en toda la plantilla
Los botones en el móvil deben ser fáciles de leer y pulsar. El texto menor a 18px reduce la legibilidad y aumenta los errores de toque. Se recomienda un tamaño de fuente de 18px o superior para botones móviles.
Establecer estilos globales de botones
Use Estilos Generales para definir la apariencia de los botones una vez para todo el correo y luego ajusta los valores móviles por separado.
Paso a paso: Establecer estilos globales de botones
Estilos de botones abiertos:
1. Vaya a Estilos Generales → Estilos de Botones.
2. Cambie entre Escritorio y móvil usando el interruptor del dispositivo.
Tipografía de conjuntos:
3. Elija la familia de fuentes.
4. Establezca el tamaño de la fuente y el color del texto.
5. Seleccione el estilo de texto y el espaciado entre letras.
Defina la forma y el color del botón:
6. Establezca el color de fondo del botón.
7. Configure los bordes, ya sea en todos los lados o individualmente.
8. Establezca el color y el radio del borde.
9. Añada acolchones internos.
Ancho del botón de control:
10. Active Ajustar al contenedor para que los botones se adapten al ancho del contenedor (solo opción de escritorio).
Mejorar el renderizado de Outlook:
11. Active el soporte de Outlook para aplicar renderizado basado en VML y así mejorar la visualización de botones en los clientes de Outlook.
Establecer estilos de crucero para escritorio:
12. Configure los colores de fondo y texto al pasar el cursor para la interacción en el escritorio.
13. Estos estilos se aplican cuando el cursor se coloca sobre el botón.
Trabaje directamente en la vista móvil dentro del editor
Cambiar entre escritorio y móvil mientras edita
Stripo le permite editar la versión móvil sin salir del editor.
Paso a paso: Cambiar entre vistas
1. Use el interruptor de dispositivo en la barra de herramientas superior.
2. Seleccione Escritorio o Móvil para previsualizar y editar la versión correspondiente.
3. Haga cambios en la vista activa. Escritorio y móvil almacenan valores separados cuando se soporta.
Domine el comportamiento estructural en móviles
Estructura responsiva: Apilar vs. mantenerse en línea
Como ya sabe, Estructura Responsiva controla cómo se comportan los contenedores en móvil. Cuando está encendido, los contenedores se apilan verticalmente. Cuando está apagado, los contenedores permanecen en una sola fila. Desactivarlo es útil cuando quiere diseños lado a lado en móvil, como tarjetas de producto o pequeños visuales con texto corto.
Inversión de contenedores: Control del orden del contenido
En diseños responsivos, el orden de contenedores importa. Si el texto está a la izquierda y una imagen a la derecha, el apilamiento puede colocar el texto encima de la imagen. Esto a menudo no es lo ideal para la lectura móvil.
Paso a paso: Habilitar la inversión de contenedores
1. Seleccione una estructura con dos contenedores (haga clic en Estructura en contenedores).
2. Active la inversión de contenedores en el móvil.
3. Previsualice la vista móvil para confirmar que el pedido es correcto.
Recuerde: la inversión de contenedores solo funciona para estructuras con dos contenedores.
Añadir espacio entre contenedores
Los diseños móviles suelen necesitar espacio extra entre contenedores para evitar contenido saturado.
Paso a paso: Utilice Containers Gap en móvil
1. Seleccione la estructura.
2. Configure el espacio de contenedores en el móvil para añadir espacio entre contenedores.
Aplique estructura y relleno en contenedor en móvil
Use relleno móvil para ajustar el espaciado sin cambiar la disposición del escritorio.
Paso a paso: Configure el relleno en móvil para una estructura
1. Cambie a la vista móvil.
2. Seleccione la estructura.
3. Ponga relleno en el móvil.
Estos ajustes solo se aplican a móviles y dejan el espaciado de escritorio sin cambios.
Manejo de imágenes en móviles que evita estiramientos, desplazamientos y recortes incorrectos
Imagen responsiva: cuándo activarla
Las imágenes grandes pueden causar desplazamientos horizontales o parecer sobredimensionadas en móvil. La imagen responsiva ajusta el ancho de imagen a la pantalla del dispositivo y evita estos problemas. Este control funciona en dispositivos que soportan consultas multimedia.
Imágenes pequeñas (logotipos): Detener el estiramiento no deseado
Las imágenes pequeñas, como los logotipos, no deberían extenderse hasta el ancho de pantalla completo.
Paso a paso: Desactivar la imagen responsiva para imágenes pequeñas
1. Cambie a la vista móvil.
2. Seleccione la imagen.
3. Desactive la imagen Responsiva.
4. Ajuste manualmente el tamaño de imagen necesario.
Estándares de imagen móvil para plantillas de correo electrónico
Para un renderizado estable entre dispositivos y clientes:
- use formatos JPEG, GIF o PNG;
- mantenga el ancho de imagen dentro de 600–800px;
- Imágenes de prueba en la vista previa móvil y en clientes reales.
Imágenes de fondo en móvil: ¿Qué es posible y qué no?
Las imágenes de fondo tienen tamaños fijos y no se adaptan al ancho de pantalla de la misma manera que las imágenes normales. Puede ajustar la posición y el tamaño de la imagen de fondo para mejorar la apariencia, pero los resultados varían según el cliente.
Límites de renderizado a tener en cuenta:
- las imágenes de fondo en contenedores, estructuras y franjas no se muestran en Outlook;
- la imagen global de fondo se renderiza en el escritorio y no aparece en móvil.
Siempre establezca un color de fondo de respaldo cuando use imágenes de fondo.
Limpieza móvil a nivel de bloque para la legibilidad del texto
Corregir los saltos de línea incómodos en bloques de texto
En móvil, el texto puede dividirse en líneas de forma desigual. Un caso común es que una sola palabra se mueva a una línea separada, lo que reduce la legibilidad.
Paso a paso: Arreglar los cortes de línea
Reducir el tamaño de la fuente en móvil:
1. Cambie a la vista móvil.
2. Seleccione el bloque de Texto.
3. En Estilos, reduzca el tamaño de la fuente para móviles hasta que el texto encaje perfectamente en una línea.
Ajuste la alineación y los acolchones:
4. Compruebe la alineación del texto.
5. Reduzca los acolchones izquierdo y derecho, ya que el acolchado ancho puede forzar rupturas de línea no deseadas.
Desactive el Ajuste de línea para una línea específica:
6. Seleccione la línea de texto.
7. Active Desactivar el Ajuste de línea.
8. Utiliza esta opción con cuidado. Las líneas largas con el Ajuste de línea desactivado pueden no caber en la pantalla del móvil y causar desplazamiento horizontal.
Solución de problemas: Cuando su correo electrónico deja de responder tras enviarlo
Por qué un correo responsivo puede parecerse a la versión de escritorio en móvil
Algunas aplicaciones de correo electrónico móvil no admiten consultas de medios. Durante el envío o exportación, ciertos clientes de correo eliminan el CSS responsivo del código. Cuando esto ocurre, se eliminan los estilos específicos de móviles y el correo se muestra como una versión de escritorio en dispositivos móviles.
Caso de Gmail: Consultas de medios eliminadas tras enviar desde Gmail
Gmail elimina los estilos CSS responsivos cuando los correos se envían directamente desde él. Como resultado, la versión móvil puede parecer no respondedora.
Paso a paso: Mantenga la respuesta para Gmail
1. Exporte el correo a un ESP que soporte consultas de medios.
2. Envíe el correo a Gmail desde ese ESP.
En este flujo, el correo mantiene su comportamiento responsivo en Gmail.
Caso de Outlook: El comportamiento responsivo varía según la versión y la aplicación
No todas las versiones de Outlook soportan diseño responsivo. Algunos eliminan automáticamente los estilos responsivos, lo que provoca un renderizado no responsivo en móvil.
Diferencias en las pruebas a tener en cuenta:
- los correos de prueba enviados desde Stripo a Outlook.com pueden responder desde el móvil.
Lista de verificación de control de calidad móvil antes de exportar
Antes de exportar o enviar un correo electrónico, revise la versión móvil en el editor.
Consulte lo siguiente en la vista previa para móviles:
- tipografía: tamaños de encabezados, legibilidad del texto principal, saltos de línea;
- márgenes y rellenos: espaciamiento alrededor de franjas, estructuras, contenedores y bloques;
- botones: tamaño del texto, área de toque y comportamiento de ancho completo cuando sea necesario;
- comportamiento de contenedores: orden de apilamiento, inversión y huecos entre contenedores;
- elementos ocultos: confirme que los elementos ocultos en móvil no aparecen;
- imágenes: comportamiento responsivo, tamaño del logotipo y respaldos de imagen de fondo;
- desplazamiento horizontal: compruebe imágenes anchas, fuentes grandes o estructuras no responsivas.
Después de previsualizarlo en el editor, pruebe el correo en diferentes dispositivos y clientes de correo. El comportamiento del cliente varía, especialmente en móviles, y las pruebas en dispositivos reales ayudan a detectar problemas que las vistas previas pueden no mostrar.
Resumen
El diseño del correo móvil depende tanto de la configuración del editor como del comportamiento del cliente de correo. Estableciendo una base sólida en Estilos Generales, usando Formato Móvil para ajustes rápidos y ajustando estructuras, imágenes y texto directamente en la vista móvil, puedes controlar cómo se comportan los correos electrónicos en pantallas pequeñas. Revise siempre la vista previa móvil y pruebe entre los clientes antes de enviar, especialmente cuando Gmail o Outlook forman parte de su flujo de trabajo.
0 comentarios