{"id":19055,"date":"2026-06-22T07:15:00","date_gmt":"2026-06-22T05:15:00","guid":{"rendered":"https:\/\/martagonzalez.dev\/wp\/blog\/\/"},"modified":"2026-06-11T20:19:53","modified_gmt":"2026-06-11T18:19:53","slug":"como-evitar-que-gmail-rompa-tu-diseno-responsive","status":"publish","type":"post","link":"https:\/\/martagonzalez.dev\/wp\/blog\/como-evitar-que-gmail-rompa-tu-diseno-responsive\/","title":{"rendered":"C\u00f3mo evitar que Gmail rompa tu dise\u00f1o responsive"},"content":{"rendered":"
<\/div>
<\/div><\/div>\n
\"\"<\/figure>\n\n\n\n

Por qu\u00e9 Gmail puede romper un email responsive<\/h2>\n\n\n\n

Cuando decimos que Gmail \u201crompe\u201d un dise\u00f1o responsive, normalmente hablamos de comportamientos como columnas que no se adaptan bien en m\u00f3vil, im\u00e1genes demasiado anchas, estilos que no se aplican, textos dif\u00edciles de leer o correos que se recortan antes de llegar al contenido importante.<\/p>\n\n\n\n

El problema de fondo suele estar en una expectativa equivocada: pensar que un email HTML se comporta como una web moderna. En una p\u00e1gina web puedes apoyarte en flexbox, grid, JavaScript, variables CSS, pseudo-elementos, animaciones y media queries complejas. En un email, en cambio, trabajas en un entorno m\u00e1s limitado y mucho menos predecible.<\/p>\n\n\n\n

Gmail s\u00ed admite muchas reglas CSS y puede trabajar con media queries, pero no conviene depender de eso como \u00fanica base del dise\u00f1o. En email development, lo importante no es solo si una propiedad funciona, sino si funciona de forma consistente<\/strong> en los clientes donde tu audiencia va a abrir el mensaje.<\/p>\n\n\n\n

Este punto conecta directamente con algo que explico tambi\u00e9n en el art\u00edculo sobre las limitaciones reales del CSS en clientes de correo<\/a>: en email no dise\u00f1amos para el caso ideal, sino para un conjunto de clientes con comportamientos diferentes.<\/p>\n\n\n\n

Gmail no es un \u00fanico cliente de correo<\/h3>\n\n\n\n

Uno de los errores m\u00e1s habituales es probar un email en Gmail web y asumir que ya funcionar\u00e1 igual en todas partes. Pero Gmail puede abrirse desde distintos entornos: navegador de escritorio, navegador m\u00f3vil, app de Android, app de iOS o incluso desde cuentas externas configuradas dentro de la app de Gmail.<\/p>\n\n\n\n

Este \u00faltimo caso es especialmente importante. Cuando una persona usa la app de Gmail con una cuenta que no es de Google, algunos estilos pueden comportarse de forma distinta. Por eso, si tu dise\u00f1o depende por completo de un bloque de estilos dentro de <style><\/code>, existe m\u00e1s riesgo de que el resultado no sea el esperado.<\/p>\n\n\n\n

La soluci\u00f3n no es renunciar al responsive, sino construir una base m\u00e1s resistente. Las media queries deben mejorar la experiencia, no sostener todo el email.<\/p>\n\n\n\n

Dise\u00f1a primero para el peor escenario<\/h2>\n\n\n\n

La forma m\u00e1s segura de crear un Gmail responsive email<\/strong> es aplicar una estrategia de dise\u00f1o h\u00edbrido. Esto significa que el email debe adaptarse razonablemente bien usando anchos fluidos, tablas estables, im\u00e1genes flexibles y estilos inline, incluso antes de que entren en juego las media queries.<\/p>\n\n\n\n

Dicho de otra forma: si Gmail decide ignorar parte de tu CSS, el email no deber\u00eda desmoronarse.<\/p>\n\n\n\n

Usa tablas como estructura principal<\/h3>\n\n\n\n

Si vienes del desarrollo web moderno, puede que maquetar con tablas te parezca una vuelta al pasado. Y, en cierto modo, lo es. Pero en email marketing las tablas siguen siendo una de las herramientas m\u00e1s fiables para controlar el layout, los anchos, los espacios y la compatibilidad.<\/p>\n\n\n\n

No se trata de maquetar sin criterio, sino de aceptar que el email HTML tiene reglas distintas. Puedes mantener una estructura clara, accesible dentro de lo posible y ordenada, pero usando tablas como base de estabilidad.<\/p>\n\n\n\n

<table role=\"presentation\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\n  <tr>\n    <td align=\"center\">\n      <table role=\"presentation\" width=\"600\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\n        <tr>\n          <td style=\"padding: 24px; font-family: Arial, sans-serif;\">\n            Contenido del email\n          <\/td>\n        <\/tr>\n      <\/table>\n    <\/td>\n  <\/tr>\n<\/table><\/code><\/pre>\n\n\n\n
Este patr\u00f3n permite centrar el contenido y controlar el ancho m\u00e1ximo. A partir de ah\u00ed, podemos hacerlo m\u00e1s flexible para mejorar la experiencia en pantallas peque\u00f1as.<\/p>\n\n\n\n
Haz que el contenedor sea fluido desde el inicio<\/h4>\n\n\n\n
Un error frecuente es usar un ancho fijo de 600 p\u00edxeles sin ninguna alternativa para m\u00f3vil. Si los estilos responsive no se aplican correctamente, Gmail puede mostrar ese ancho completo en pantallas peque\u00f1as y generar scroll horizontal.<\/p>\n\n\n\n
Una forma m\u00e1s segura de plantearlo es combinar un ancho fluido con un ancho m\u00e1ximo:<\/p>\n\n\n\n
<table role=\"presentation\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\n  <tr>\n    <td align=\"center\" style=\"padding: 0 16px;\">\n      <table role=\"presentation\" width=\"100%\" style=\"max-width:600px;\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\n        <tr>\n          <td style=\"padding:24px;\">\n            Contenido adaptable\n          <\/td>\n        <\/tr>\n      <\/table>\n    <\/td>\n  <\/tr>\n<\/table><\/code><\/pre>\n\n\n\n
Con este enfoque, el contenedor ocupa el ancho disponible, pero no supera los 600 p\u00edxeles en escritorio. Es una decisi\u00f3n sencilla, pero ayuda mucho a evitar que Gmail fuerce dise\u00f1os inc\u00f3modos en m\u00f3vil.<\/p>\n\n\n\n
CSS en Gmail: qu\u00e9 usar y qu\u00e9 evitar<\/h2>\n\n\n\n
Gmail permite trabajar con CSS, pero no conviene llevar la l\u00f3gica de una web directamente a un email. La pregunta no deber\u00eda ser solo \u201c\u00bfGmail soporta esta propiedad?\u201d, sino \u201c\u00bfqu\u00e9 ocurre si Gmail no la aplica como espero?\u201d.<\/p>\n\n\n\n
Por eso, en email development suele funcionar mejor una mentalidad progresiva: primero aseguras lo esencial con estilos inline y una estructura robusta; despu\u00e9s a\u00f1ades mejoras con clases, media queries y estilos en el <head><\/code>.<\/p>\n\n\n\n
Prioriza los estilos inline para lo importante<\/h3>\n\n\n\n
En desarrollo web, repetir estilos inline puede parecer poco elegante. En email, sin embargo, sigue siendo una pr\u00e1ctica muy \u00fatil para proteger los elementos esenciales.<\/p>\n\n\n\n
Los estilos cr\u00edticos deber\u00edan ir inline siempre que sea posible: colores, tama\u00f1os de fuente, espaciados, alineaciones, estilos de botones, ancho de im\u00e1genes y fondos importantes.<\/p>\n\n\n\n
<a href=\"https:\/\/martagonzalez.dev\/\"\n   style=\"display:inline-block; background:#CC2B5E; color:#ffffff; padding:14px 24px; text-decoration:none; border-radius:8px; font-family:Arial, sans-serif; font-size:16px;\">\n  Leer m\u00e1s\n<\/a><\/code><\/pre>\n\n\n\n
Este bot\u00f3n no depende de una clase externa para verse correctamente. Si el cliente de correo ignora parte del CSS del documento, el CTA principal seguir\u00e1 siendo visible y funcional.<\/p>\n\n\n\n
Si quieres profundizar en qu\u00e9 estilos conviene usar y cu\u00e1les pueden darte problemas, te recomiendo revisar tambi\u00e9n el art\u00edculo sobre qu\u00e9 partes de CSS funcionan realmente en email marketing<\/a>.<\/p>\n\n\n\n
Usa bloques de estilo con moderaci\u00f3n<\/h3>\n\n\n\n
Los bloques <style><\/code> son \u00fatiles para media queries, ajustes responsive y clases reutilizables. Pero no deber\u00edan contener toda la responsabilidad visual del email.<\/p>\n\n\n\n
Una buena pr\u00e1ctica es reservarlos para mejoras progresivas:<\/p>\n\n\n\n
<style>\n  @media screen and (max-width: 600px) {\n    .stack {\n      display: block !important;\n      width: 100% !important;\n    }\n\n    .mobile-padding {\n      padding-left: 20px !important;\n      padding-right: 20px !important;\n    }\n\n    .mobile-center {\n      text-align: center !important;\n    }\n  }\n<\/style><\/code><\/pre>\n\n\n\n
La idea es sencilla: si este CSS se aplica, el email mejora en m\u00f3vil. Si no se aplica, el contenido sigue siendo legible.<\/p>\n\n\n\n
C\u00f3mo conseguir columnas responsive sin que Gmail las destroce<\/h2>\n\n\n\n
Uno de los retos m\u00e1s comunes en Gmail es crear una secci\u00f3n de dos columnas en escritorio que se convierta en una sola columna en m\u00f3vil. En una web lo resolver\u00edas con flexbox o grid. En email, lo m\u00e1s estable sigue siendo trabajar con tablas y clases de apoyo.<\/p>\n\n\n\n
Columnas con tablas y media queries<\/h3>\n\n\n\n
Este ser\u00eda un patr\u00f3n sencillo para una secci\u00f3n de dos columnas:<\/p>\n\n\n\n
<table role=\"presentation\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\n  <tr>\n    <td class=\"stack\" width=\"50%\" style=\"padding:12px; vertical-align:top;\">\n      <img src=\"imagen-1.jpg\" width=\"100%\" alt=\"Descripci\u00f3n de la primera imagen\" style=\"display:block; width:100%; height:auto;\">\n      <p style=\"font-family:Arial, sans-serif; font-size:16px; line-height:1.5;\">\n        Primer bloque de contenido.\n      <\/p>\n    <\/td>\n\n    <td class=\"stack\" width=\"50%\" style=\"padding:12px; vertical-align:top;\">\n      <img src=\"imagen-2.jpg\" width=\"100%\" alt=\"Descripci\u00f3n de la segunda imagen\" style=\"display:block; width:100%; height:auto;\">\n      <p style=\"font-family:Arial, sans-serif; font-size:16px; line-height:1.5;\">\n        Segundo bloque de contenido.\n      <\/p>\n    <\/td>\n  <\/tr>\n<\/table><\/code><\/pre>\n\n\n\n
Y la media query correspondiente:<\/p>\n\n\n\n
@media screen and (max-width: 600px) {\n  .stack {\n    display: block !important;\n    width: 100% !important;\n  }\n}<\/code><\/pre>\n\n\n\n
Este patr\u00f3n suele funcionar bien, pero conviene no cargar demasiado cada columna. Si el CSS responsive no se aplica, las columnas seguir\u00e1n una al lado de la otra, as\u00ed que el contenido debe poder sobrevivir en un ancho reducido.<\/p>\n\n\n\n
Evita dise\u00f1os de tres columnas demasiado densos<\/h4>\n\n\n\n
Las tres columnas pueden quedar muy bien en escritorio, pero en m\u00f3vil son m\u00e1s delicadas. Para Gmail, suele ser m\u00e1s seguro usar una estructura de una sola columna principal y reservar los layouts en varias columnas para contenidos muy breves.<\/p>\n\n\n\n
Por ejemplo: icono y texto corto, producto y precio, imagen y titular, o peque\u00f1as tarjetas informativas.<\/p>\n\n\n\n
Si quieres explorar alternativas m\u00e1s flexibles sin volverte loca con tablas, puedes complementar este enfoque con el art\u00edculo sobre c\u00f3mo hacer emails responsive sin volverte loca con tablas HTML<\/a>.<\/p>\n\n\n\n
Im\u00e1genes responsive en Gmail<\/h2>\n\n\n\n
Las im\u00e1genes son otro punto cr\u00edtico. Una imagen demasiado grande, sin estilos adecuados o sin un ancho bien definido puede generar desbordamientos, espacios extra\u00f1os o problemas de lectura en m\u00f3vil.<\/p>\n\n\n\n
Una regla b\u00e1sica para im\u00e1genes en emails responsive es esta:<\/p>\n\n\n\n
<img src=\"imagen.jpg\"\n     width=\"600\"\n     alt=\"Descripci\u00f3n clara de la imagen\"\n     style=\"display:block; width:100%; max-width:600px; height:auto; border:0;\"><\/code><\/pre>\n\n\n\n
Con esta combinaci\u00f3n, la imagen se comporta como bloque, se adapta al ancho disponible, mantiene su proporci\u00f3n y no supera el tama\u00f1o m\u00e1ximo previsto.<\/p>\n\n\n\n
No pongas informaci\u00f3n esencial solo dentro de una imagen<\/h3>\n\n\n\n
Otro error frecuente es dise\u00f1ar una imagen hero con texto incrustado y confiar en que todo el mundo la ver\u00e1 correctamente. Pero las im\u00e1genes pueden cargarse tarde, bloquearse o mostrarse de forma distinta seg\u00fan el cliente.<\/p>\n\n\n\n
Por eso, si el mensaje principal del email est\u00e1 en una imagen, conviene repetirlo tambi\u00e9n como texto real dentro del HTML. Esto mejora la accesibilidad, la legibilidad y la resistencia del dise\u00f1o.<\/p>\n\n\n\n
Este criterio tambi\u00e9n es importante cuando hablamos de contraste y jerarqu\u00eda visual. Si te interesa este enfoque, puedes leer el art\u00edculo sobre emails accesibles, contraste, jerarqu\u00eda y lectores de pantalla<\/a>.<\/p>\n\n\n\n
Cuidado con el tama\u00f1o del HTML: Gmail puede recortar tu email<\/h2>\n\n\n\n
Uno de los problemas m\u00e1s frustrantes de Gmail no tiene que ver directamente con el CSS, sino con el tama\u00f1o total del mensaje. Gmail puede recortar emails demasiado pesados y mostrar un enlace para ver el mensaje completo.<\/p>\n\n\n\n
Esto puede afectar al dise\u00f1o responsive, al seguimiento de aperturas y, sobre todo, a la experiencia de lectura. Si el contenido importante queda despu\u00e9s del recorte, muchas personas no llegar\u00e1n a verlo.<\/p>\n\n\n\n
C\u00f3mo reducir el peso del HTML<\/h3>\n\n\n\n
Para evitar que Gmail recorte tu email, conviene revisar varias cosas antes de enviarlo:<\/p>\n\n\n\n