Se adapta al móvil · Gratis · Sin registro
Editor de Email Responsive
La mayoría de la gente abre el correo primero en el móvil. Monta la maqueta una vez, deja que las columnas se apilen y las imágenes se ajusten, y comprueba el ancho estrecho antes de exportar una sola línea de HTML.
Cómo funciona realmente lo "responsive"
Nada de esto depende de que tú escribas una media query. La maqueta se construye con tablas de ancho fluido, que es lo que sobrevive en una bandeja de entrada, y el comportamiento en móvil es un ajuste de los bloques que lo necesitan.
- Un bloque de columnas puede apilarse en móvil, así que una fila de tres columnas se convierte en tres filas a ancho completo en un teléfono.
- El texto puede llevar un tamaño de letra distinto para móvil, para titulares que resultan demasiado grandes cuando el ancho se reduce a la mitad.
- Las imágenes se ajustan al ancho de su contenedor en vez de forzar un desplazamiento horizontal.
- El padding y el ancho del contenedor se configuran bloque a bloque, así que la lectura se mantiene cómoda en los dos extremos.
Comprueba el ancho de móvil antes de enviar
El editor alterna entre un ancho de escritorio y uno de móvil mientras trabajas, que es el momento en el que un problema de apilado sale barato de arreglar. El modo de vista previa quita toda la interfaz de edición, así que estás mirando el correo y no la herramienta.
Por qué tablas y estilos en línea, no CSS moderno
Los clientes de correo no son navegadores. Varios eliminan por completo el bloque <style>, algunos ignoran flexbox y grid, y uno de los clientes de escritorio más usados renderiza el HTML con el motor de un procesador de texto. Un email responsive tiene que degradar bien cuando le quitan el CSS — una pila de tablas fluidas lo hace; una fila con flexbox, no.
Por eso el código exportado tiene ese aspecto. No es una salida anticuada por descuido; es la forma que sigue funcionando cuando un cliente rechaza tu hoja de estilos.
Aun así, envíate una prueba
Un editor responsive te quita las cuentas del layout, no la necesidad de comprobar. Antes de una campaña real, envíate el HTML exportado y ábrelo en los clientes que realmente usa tu audiencia — es la única forma honesta de saber si un correo se ve bien, y nadie puede prometerte que se vea perfecto en todos.
Dónde suele romperse una maqueta de columnas
El punto donde más se nota si un correo es responsive de verdad es una fila de tres o cuatro columnas: en escritorio se ve ordenada, pero si no se apila en el móvil, cada columna se queda con un ancho mínimo y el texto se comprime o se corta. Configurar el apilado en ese bloque es lo que evita ese resultado, y conviene revisarlo especialmente en filas con imagen y texto juntos, porque son las que más espacio necesitan cuando pasan a una sola columna.
La misma lógica se aplica a un botón dentro de una columna: si el bloque padre se apila pero el botón mantiene un ancho fijo pensado para escritorio, puede acabar más ancho que la columna que lo contiene. Comprobarlo en la vista de móvil antes de exportar detecta este tipo de detalle en segundos.
Los títulos grandes son el otro punto habitual: un tamaño de letra que se ve bien en una columna ancha de escritorio puede ocupar dos o tres líneas cuando esa misma columna pasa a ancho completo en el móvil. Ponerle a ese bloque de texto un tamaño de letra distinto para móvil suele bastar para que el titular vuelva a caber en una sola línea sin perder legibilidad.
Las imágenes rara vez dan problemas porque se ajustan al ancho de su contenedor por defecto, pero conviene revisar su altura relativa cuando el contenedor pasa de una columna de escritorio a un ancho completo de móvil: una foto pensada como acompañante lateral puede acabar ocupando media pantalla si no se le fija un ancho máximo razonable.
El espaciado entre bloques suele necesitar el mismo tipo de repaso: un margen que se ve equilibrado junto a una columna estrecha puede parecer excesivo cuando esa columna ocupa todo el ancho de la pantalla, así que conviene revisar los divisores y espaciadores en la vista de móvil, no solo los bloques de texto e imagen.
Revisar estos detalles antes de cada envío importante es lo que separa un correo que simplemente no se rompe de uno que realmente se ve bien en la pantalla donde lo va a leer la mayoría de tu audiencia.
Plantillas con maquetas que se apilan
Filas de varias columnas que se convierten en una sola en el móvil — abre una y prueba el ancho estrecho.
Preguntas frecuentes sobre esto
¿Tengo que escribir media queries?
No. El apilado de columnas y el tamaño de letra en móvil son ajustes de los bloques, y la tabla que hay debajo es fluida, así que el correo se adapta incluso donde un cliente elimina el CSS.
¿Puedo poner un tamaño de letra distinto para móvil?
Sí. Los bloques de texto aceptan un tamaño de letra específico para móvil, además del de escritorio.
¿En qué clientes de correo se ve bien?
La exportación apunta al marcado con tablas y estilos en línea que interpretan de forma más predecible los clientes más usados, como Gmail, Outlook y Apple Mail. Las diferencias de renderizado entre clientes son parte del email, así que prueba siempre tu envío final.