{"id":3748,"date":"2026-08-07T00:46:13","date_gmt":"2026-08-06T22:46:13","guid":{"rendered":"https:\/\/mantenimientoweb.pro\/blog\/por-que-mi-sitio-web-se-desconfigura-en-moviles-y-como-auditar-su-diseno-responsive\/"},"modified":"2026-08-07T00:46:15","modified_gmt":"2026-08-06T22:46:15","slug":"por-que-mi-sitio-web-se-desconfigura-en-moviles-y-como-auditar-su-diseno-responsive","status":"publish","type":"post","link":"https:\/\/mantenimientoweb.pro\/blog\/por-que-mi-sitio-web-se-desconfigura-en-moviles-y-como-auditar-su-diseno-responsive\/","title":{"rendered":"\u00bfPor qu\u00e9 mi sitio web se desconfigura en m\u00f3viles y c\u00f3mo auditar su dise\u00f1o responsive?"},"content":{"rendered":"<p><main><\/p>\n<section>\n<p>        \ud83d\udcf1 Dise\u00f1o responsive \u00b7 WordPress \u00b7 Rendimiento web<br \/>\n        \u00bfPor qu\u00e9 mi sitio web se desconfigura en m\u00f3viles y c\u00f3mo auditar su dise\u00f1o responsive?<\/p>\n<p>Un sitio que se ve impecable en escritorio y se desmorona en un tel\u00e9fono no est\u00e1 \u201cteniendo un mal d\u00eda\u201d. Est\u00e1 revelando una verdad t\u00e9cnica que llevaba tiempo escondida bajo el mantel: el dise\u00f1o no era tan flexible como parec\u00eda.<\/p>\n<p>Hay p\u00e1ginas que en un monitor grande lucen como un hotel de cinco estrellas y en un m\u00f3vil se comportan como una tienda de campa\u00f1a en plena tormenta. Men\u00fas que desaparecen, botones que se pisan, textos min\u00fasculos, im\u00e1genes que empujan el contenido hacia el abismo, formularios imposibles de completar con un pulgar humano. Todo muy moderno, por supuesto. Nada dice \u201cexperiencia digital cuidada\u201d como obligar al usuario a hacer zoom con dos dedos para encontrar el bot\u00f3n de compra. \ud83e\udee0<\/p>\n<\/section>\n<article>\n<p>La desconfiguraci\u00f3n m\u00f3vil rara vez tiene una sola causa. Casi siempre es una peque\u00f1a conspiraci\u00f3n: una regla CSS demasiado r\u00edgida, un plugin de WordPress entrometido, una imagen sin dimensiones, una cach\u00e9 que sirve archivos antiguos, un constructor visual que genera capas como milhojas, una tipograf\u00eda externa que carga tarde, un anuncio que ocupa m\u00e1s territorio que un virrey. Y, mientras tanto, el usuario espera. O se va.<\/p>\n<p>En esta gu\u00eda vamos a desmontar el problema con calma quir\u00fargica: por qu\u00e9 un sitio web se rompe en m\u00f3viles, c\u00f3mo auditar su dise\u00f1o responsive, qu\u00e9 revisar en WordPress, qu\u00e9 herramientas usar, c\u00f3mo relacionarlo con SEO m\u00f3vil, Core Web Vitals, seguridad, accesibilidad y rendimiento. Porque un dise\u00f1o responsive no es solo que \u201cse adapte a la pantalla\u201d; es que respire bien dentro de ella, como un pez en agua clara. \ud83d\udc1f<\/p>\n<nav aria-label=\"Tabla de contenidos\">\n          <strong>Contenido de la gu\u00eda<\/strong><\/p>\n<ul>\n<li><a href=\"#que-significa\">Qu\u00e9 significa realmente que un sitio se desconfigure en m\u00f3viles<\/a><\/li>\n<li><a href=\"#causas\">Causas frecuentes de errores responsive<\/a><\/li>\n<li><a href=\"#wordpress\">Problemas espec\u00edficos en WordPress<\/a><\/li>\n<li><a href=\"#auditoria\">C\u00f3mo auditar el dise\u00f1o responsive paso a paso<\/a><\/li>\n<li><a href=\"#herramientas\">Herramientas recomendadas para pruebas m\u00f3viles<\/a><\/li>\n<li><a href=\"#core-web-vitals\">Responsive design, SEO m\u00f3vil y Core Web Vitals<\/a><\/li>\n<li><a href=\"#checklist\">Checklist profesional de auditor\u00eda responsive<\/a><\/li>\n<li><a href=\"#soluciones\">Soluciones t\u00e9cnicas y buenas pr\u00e1cticas<\/a><\/li>\n<\/ul>\n<\/nav>\n<h2 id=\"que-significa\">Qu\u00e9 significa realmente que un sitio se \u201cdesconfigure\u201d en m\u00f3viles<\/h2>\n<p>La palabra \u201cdesconfigurar\u201d es amplia, casi dom\u00e9stica. Sirve para una lavadora, para un router, para una web que de pronto decide parecer un collage cubista. En t\u00e9rminos t\u00e9cnicos, un sitio se desconfigura en m\u00f3viles cuando su interfaz no se adapta correctamente a pantallas peque\u00f1as, densidades de p\u00edxeles distintas, modos t\u00e1ctiles, conexiones variables o navegadores m\u00f3viles con comportamientos particulares.<\/p>\n<p>No hablamos solo de est\u00e9tica. Una web m\u00f3vil mal ajustada puede afectar directamente a:<\/p>\n<ul>\n<li><strong>Conversiones:<\/strong> si el bot\u00f3n de compra queda fuera de pantalla, el usuario no compra. Misterioso, \u00bfverdad?<\/li>\n<li><strong>SEO:<\/strong> Google utiliza la indexaci\u00f3n mobile-first desde hace a\u00f1os, lo que significa que eval\u00faa principalmente la versi\u00f3n m\u00f3vil del contenido para indexar y posicionar.<\/li>\n<li><strong>Rendimiento:<\/strong> im\u00e1genes pesadas, JavaScript excesivo y dise\u00f1os inestables deterioran m\u00e9tricas como LCP, CLS e INP.<\/li>\n<li><strong>Accesibilidad:<\/strong> textos peque\u00f1os, elementos t\u00e1ctiles demasiado juntos o men\u00fas inaccesibles excluyen a personas reales, no a abstracciones estad\u00edsticas.<\/li>\n<li><strong>Confianza:<\/strong> una p\u00e1gina rota comunica abandono. Aunque el negocio sea serio, el envoltorio susurra lo contrario.<\/li>\n<\/ul>\n<blockquote><p>\n          En escritorio, una web puede fingir elegancia. En m\u00f3vil, con menos espacio y menos paciencia, se le nota la educaci\u00f3n.\n        <\/p><\/blockquote>\n<p>La paradoja es deliciosa y cruel: cuanto m\u00e1s peque\u00f1o es el dispositivo, m\u00e1s grande debe ser la disciplina del dise\u00f1o. La pantalla se reduce; la exigencia aumenta.<\/p>\n<h2 id=\"causas\">Causas frecuentes de errores responsive<\/h2>\n<p>Una auditor\u00eda seria empieza por abandonar una fantas\u00eda: \u201csi se ve bien en mi m\u00f3vil, est\u00e1 bien\u201d. No. Tu m\u00f3vil es apenas una isla en un archipi\u00e9lago de resoluciones, navegadores, densidades, sistemas operativos, barras din\u00e1micas, orientaciones y caprichos del viewport. Auditar dise\u00f1o responsive exige mirar el sitio como lo mirar\u00eda el mundo: fragmentado, impaciente, diverso.<\/p>\n<h3>1. Falta o mala configuraci\u00f3n de la etiqueta viewport<\/h3>\n<p>La etiqueta <code>viewport<\/code> indica al navegador c\u00f3mo debe interpretar el ancho de la p\u00e1gina en dispositivos m\u00f3viles. Sin ella, muchos navegadores simulan un ancho de escritorio y reducen todo como si metieran una alfombra persa en una caja de zapatos.<\/p>\n<pre>&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;<\/pre>\n<p>Este peque\u00f1o fragmento no hace magia, pero sin \u00e9l la magia ni siquiera se presenta. En sitios antiguos o plantillas mal adaptadas, su ausencia sigue siendo una causa b\u00e1sica de errores m\u00f3viles.<\/p>\n<h3>2. Anchos fijos en CSS<\/h3>\n<p>Uno de los villanos cl\u00e1sicos: contenedores con <code>width: 1200px<\/code>, im\u00e1genes con ancho fijo, tablas inm\u00f3viles, banners que parecen dise\u00f1ados para una autopista. El resultado es el famoso desplazamiento horizontal, esa barra lateral que aparece como una grieta en la pared.<\/p>\n<p>En dise\u00f1o responsive moderno se prefieren unidades flexibles:<\/p>\n<ul>\n<li><code>%<\/code> para proporciones relativas.<\/li>\n<li><code>rem<\/code> para escalado tipogr\u00e1fico consistente.<\/li>\n<li><code>vw<\/code>, <code>vh<\/code>, <code>dvh<\/code>, <code>svh<\/code> y <code>lvh<\/code> con prudencia, especialmente en m\u00f3viles.<\/li>\n<li><code>max-width<\/code> para limitar sin encarcelar.<\/li>\n<li><code>clamp()<\/code> para tipograf\u00edas y espaciados fluidos.<\/li>\n<\/ul>\n<pre>.contenedor {\n  width: min(100% - 2rem, 1200px);\n  margin-inline: auto;\n}\n\nh1 {\n  font-size: clamp(2rem, 6vw, 4.5rem);\n}\n\nimg {\n  max-width: 100%;\n  height: auto;\n}<\/pre>\n<h3>3. Breakpoints pensados al rev\u00e9s<\/h3>\n<p>Durante a\u00f1os se dise\u00f1\u00f3 primero para escritorio y luego se \u201carreglaba\u201d el m\u00f3vil, como quien compra un traje enorme y despu\u00e9s intenta ajustarlo con alfileres. Hoy conviene pensar en <strong>mobile first<\/strong>: comenzar por lo esencial en pantalla peque\u00f1a y enriquecer progresivamente para tablets y escritorio.<\/p>\n<p>La ant\u00edtesis es clara: antes, el m\u00f3vil era una versi\u00f3n encogida del escritorio; ahora, el escritorio deber\u00eda ser una expansi\u00f3n generosa del m\u00f3vil. No es romanticismo metodol\u00f3gico. Es supervivencia.<\/p>\n<pre>\/* Base m\u00f3vil *\/\n.grid-productos {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 1rem;\n}\n\n\/* Tablets *\/\n@media (min-width: 768px) {\n  .grid-productos {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n\n\/* Escritorio *\/\n@media (min-width: 1024px) {\n  .grid-productos {\n    grid-template-columns: repeat(4, 1fr);\n  }\n}<\/pre>\n<h3>4. Im\u00e1genes sin optimizar o sin dimensiones declaradas<\/h3>\n<p>Las im\u00e1genes son preciosas. Tambi\u00e9n son capaces de hundir un sitio como un piano cayendo en una piscina. Si se cargan demasiado grandes, ralentizan el LCP. Si no tienen <code>width<\/code> y <code>height<\/code>, pueden provocar saltos de dise\u00f1o y empeorar el CLS. Si no usan formatos modernos, el usuario paga con tiempo y datos m\u00f3viles.<\/p>\n<p>Buenas pr\u00e1cticas:<\/p>\n<ul>\n<li>Usar formatos como <strong>WebP<\/strong> o <strong>AVIF<\/strong> cuando sea viable.<\/li>\n<li>Definir dimensiones en el HTML o mediante CSS estable.<\/li>\n<li>Implementar <code>srcset<\/code> y <code>sizes<\/code> para servir im\u00e1genes adaptadas a cada pantalla.<\/li>\n<li>Aplicar <code>loading=\"lazy\"<\/code> en im\u00e1genes fuera del primer viewport.<\/li>\n<li>No aplicar lazy loading a la imagen principal si es candidata a LCP.<\/li>\n<\/ul>\n<pre>&lt;img\n  src=\"producto-800.webp\"\n  srcset=\"producto-400.webp 400w, producto-800.webp 800w, producto-1200.webp 1200w\"\n  sizes=\"(max-width: 600px) 100vw, 50vw\"\n  width=\"800\"\n  height=\"600\"\n  alt=\"Producto visto desde el frente\"&gt;<\/pre>\n<h3>5. Men\u00fas m\u00f3viles mal implementados<\/h3>\n<p>El men\u00fa hamburguesa puede ser \u00fatil, pero tambi\u00e9n puede convertirse en un armario sin picaporte. En auditor\u00edas responsive aparecen problemas repetidos: el icono no responde, el desplegable queda detr\u00e1s del contenido, el scroll se bloquea, el foco de teclado se pierde, el usuario abre el men\u00fa y ya no sabe c\u00f3mo escapar.<\/p>\n<p>Un buen men\u00fa m\u00f3vil debe:<\/p>\n<ul>\n<li>Tener un bot\u00f3n visible y suficientemente grande.<\/li>\n<li>Usar atributos accesibles como <code>aria-expanded<\/code> y <code>aria-controls<\/code>.<\/li>\n<li>Permitir cierre claro.<\/li>\n<li>No depender \u00fanicamente de efectos hover, porque en pantallas t\u00e1ctiles el hover es poco m\u00e1s que una nostalgia de escritorio.<\/li>\n<li>Evitar superposiciones accidentales por problemas de <code>z-index<\/code>.<\/li>\n<\/ul>\n<h3>6. Elementos t\u00e1ctiles demasiado peque\u00f1os<\/h3>\n<p>Un enlace min\u00fasculo puede ser elegante en una maqueta. En un autob\u00fas en movimiento, con el pulgar de una persona real, es una broma cruel. Google recomienda que los elementos t\u00e1ctiles sean lo bastante grandes y est\u00e9n separados para evitar pulsaciones accidentales. Apple, en sus Human Interface Guidelines, ha usado hist\u00f3ricamente referencias cercanas a 44 puntos para \u00e1reas t\u00e1ctiles c\u00f3modas; Android Material Design tambi\u00e9n insiste en objetivos t\u00e1ctiles generosos.<\/p>\n<p>No dise\u00f1amos para cursores quir\u00fargicos. Dise\u00f1amos para dedos, prisa, luz de calle, pantallas manchadas, beb\u00e9s llorando al lado y conexiones que tosen.<\/p>\n<h3>7. JavaScript que llega tarde o rompe el layout<\/h3>\n<p>Muchos dise\u00f1os m\u00f3viles dependen de JavaScript para abrir men\u00fas, carruseles, filtros, pesta\u00f1as, popups, sticky headers y formularios. Si el JS falla, se retrasa o entra en conflicto con otro script, la interfaz se queda a medio vestir.<\/p>\n<p>Especialmente en WordPress, donde cada plugin trae su maleta de scripts, es habitual encontrar:<\/p>\n<ul>\n<li>Errores en consola que detienen funciones del tema.<\/li>\n<li>Dependencias duplicadas, por ejemplo varias versiones de jQuery o librer\u00edas de sliders.<\/li>\n<li>Scripts diferidos de forma agresiva por plugins de optimizaci\u00f3n.<\/li>\n<li>Funciones inline bloqueadas por pol\u00edticas de seguridad mal configuradas.<\/li>\n<li>Popups o banners de cookies que alteran la altura del viewport.<\/li>\n<\/ul>\n<h3>8. CSS cargado en orden incorrecto<\/h3>\n<p>El CSS es una conversaci\u00f3n de prioridades. Si las hojas de estilo se cargan en mal orden, una regla puede sobrescribir otra como un invitado que habla m\u00e1s fuerte en la mesa. Esto sucede con frecuencia tras activar plugins de minificaci\u00f3n, combinar CSS, cargar CSS cr\u00edtico autom\u00e1tico o usar constructores visuales.<\/p>\n<p>La cascada no perdona, solo interpreta.<\/p>\n<h3>9. Popups, anuncios y banners intrusivos<\/h3>\n<p>Un popup de newsletter que ocupa toda la pantalla m\u00f3vil, un banner de cookies imposible de cerrar o un anuncio sticky que tapa el bot\u00f3n de compra son peque\u00f1as tragedias de UX. Adem\u00e1s, los interstitials intrusivos pueden perjudicar la experiencia m\u00f3vil y, en ciertos contextos, el rendimiento SEO.<\/p>\n<p>La iron\u00eda es fina: se instala un popup para conseguir m\u00e1s conversiones y se logra que el usuario abandone antes de leer la primera frase. Eficiencia, s\u00ed; pero hacia el precipicio.<\/p>\n<h2 id=\"wordpress\">Problemas espec\u00edficos en WordPress<\/h2>\n<p>WordPress es extraordinario porque permite construir casi cualquier cosa. Tambi\u00e9n por eso permite romper casi cualquier cosa. Su ecosistema \u2014temas, plugins, builders, snippets, cach\u00e9s, CDN\u2014 es una ciudad vibrante; pero, como toda ciudad, tiene tr\u00e1fico, ruido y alg\u00fan cable suelto.<\/p>\n<h3>Temas no mantenidos o mal desarrollados<\/h3>\n<p>Un tema antiguo puede no estar preparado para est\u00e1ndares actuales: CSS Grid, im\u00e1genes responsive, bloques Gutenberg, nuevas versiones de PHP, compatibilidad con WooCommerce o navegaci\u00f3n m\u00f3vil accesible. Si el tema no recibe actualizaciones, cada nueva capa del sitio se construye sobre una madera que ya cruje.<\/p>\n<p>Se\u00f1ales de alerta:<\/p>\n<ul>\n<li>El tema no se actualiza desde hace m\u00e1s de un a\u00f1o.<\/li>\n<li>No declara compatibilidad con la versi\u00f3n actual de WordPress.<\/li>\n<li>Usa shortcodes r\u00edgidos para maquetaci\u00f3n.<\/li>\n<li>Depende de librer\u00edas obsoletas.<\/li>\n<li>No tiene documentaci\u00f3n clara sobre breakpoints o personalizaci\u00f3n responsive.<\/li>\n<\/ul>\n<h3>Constructores visuales: potencia y deuda t\u00e9cnica<\/h3>\n<p>Elementor, Divi, WPBakery, Beaver Builder y otros constructores pueden acelerar much\u00edsimo el trabajo. Pero tambi\u00e9n pueden generar estructuras HTML profundas, estilos inline, reglas duplicadas y ajustes responsive escondidos por secci\u00f3n, columna y widget. Son como cocinas industriales: magn\u00edficas si sabes usarlas, peligrosas si cada cocinero deja una sart\u00e9n encendida.<\/p>\n<p>En auditor\u00edas con builders conviene revisar:<\/p>\n<ul>\n<li>Ajustes separados para escritorio, tablet y m\u00f3vil.<\/li>\n<li>M\u00e1rgenes negativos usados para \u201cacomodar\u201d elementos.<\/li>\n<li>Columnas que no cambian correctamente a una sola columna en m\u00f3vil.<\/li>\n<li>Secciones ocultas en m\u00f3vil que igualmente cargan recursos pesados.<\/li>\n<li>Widgets de terceros con CSS propio no responsive.<\/li>\n<\/ul>\n<h3>Plugins de cach\u00e9 y optimizaci\u00f3n mal configurados<\/h3>\n<p>WP Rocket, LiteSpeed Cache, W3 Total Cache, Autoptimize, SG Optimizer, Perfmatters y otros plugins son \u00fatiles. Pero una optimizaci\u00f3n mal aplicada puede romper el dise\u00f1o m\u00f3vil. Diferir JavaScript, eliminar CSS no usado o combinar archivos sin probar es como ordenar una biblioteca con una motosierra: r\u00e1pido, contundente, discutible.<\/p>\n<p>Problemas habituales:<\/p>\n<ul>\n<li>El men\u00fa m\u00f3vil deja de abrirse al diferir scripts.<\/li>\n<li>El CSS cr\u00edtico no incluye estilos necesarios para m\u00f3vil.<\/li>\n<li>La versi\u00f3n cacheada para escritorio se sirve en m\u00f3vil.<\/li>\n<li>El CDN entrega archivos antiguos tras una actualizaci\u00f3n.<\/li>\n<li>La minificaci\u00f3n elimina comentarios o estructuras necesarias en casos espec\u00edficos.<\/li>\n<\/ul>\n<p>          <strong>\u26a0\ufe0f Consejo pr\u00e1ctico:<\/strong> despu\u00e9s de activar cualquier optimizaci\u00f3n de CSS o JavaScript, prueba el sitio en inc\u00f3gnito, en m\u00f3vil real y con cach\u00e9 limpia. No conf\u00edes solo en la vista previa del administrador de WordPress; esa versi\u00f3n suele cargar recursos y cookies diferentes.<\/p>\n<h3>WooCommerce y p\u00e1ginas de compra<\/h3>\n<p>En tiendas online, la versi\u00f3n m\u00f3vil es el mostrador principal. Si una ficha de producto se rompe en m\u00f3vil, no es un detalle visual: es dinero filtr\u00e1ndose por una rendija.<\/p>\n<p>Revisa con especial cuidado:<\/p>\n<ul>\n<li>Galer\u00edas de producto y zoom m\u00f3vil.<\/li>\n<li>Variaciones y selectores desplegables.<\/li>\n<li>Bot\u00f3n \u201cA\u00f1adir al carrito\u201d visible sin esfuerzo.<\/li>\n<li>Carrito y checkout en una sola columna.<\/li>\n<li>Campos de formulario con teclado adecuado: email, tel\u00e9fono, n\u00famero, direcci\u00f3n.<\/li>\n<li>M\u00e9todos de pago dentro del viewport.<\/li>\n<li>Mensajes de error comprensibles y visibles.<\/li>\n<\/ul>\n<h2 id=\"auditoria\">C\u00f3mo auditar el dise\u00f1o responsive paso a paso<\/h2>\n<p>Auditar no es abrir la web, encoger la ventana del navegador y murmurar \u201cparece bien\u201d. Eso es mirar por la cerradura. Una auditor\u00eda responsive profesional combina pruebas visuales, an\u00e1lisis t\u00e9cnico, rendimiento, accesibilidad, navegaci\u00f3n t\u00e1ctil y datos reales de usuarios cuando existen.<\/p>\n<h3>Paso 1: Define p\u00e1ginas cr\u00edticas<\/h3>\n<p>No empieces por revisar todo el sitio de forma ca\u00f3tica. Selecciona primero las plantillas que sostienen el negocio:<\/p>\n<ul>\n<li>P\u00e1gina de inicio.<\/li>\n<li>P\u00e1ginas de servicios principales.<\/li>\n<li>Art\u00edculos o entradas del blog.<\/li>\n<li>Landing pages de campa\u00f1as.<\/li>\n<li>Ficha de producto.<\/li>\n<li>Carrito y checkout.<\/li>\n<li>Formulario de contacto.<\/li>\n<li>\u00c1rea privada o panel de usuario, si existe.<\/li>\n<\/ul>\n<p>Una web puede tener cientos de URLs, pero normalmente unas pocas plantillas gobiernan la mayor\u00eda de los problemas. Encuentra esas matrices y habr\u00e1s encontrado el coraz\u00f3n mec\u00e1nico del sitio.<\/p>\n<h3>Paso 2: Prueba rangos de ancho, no solo dispositivos famosos<\/h3>\n<p>No basta con \u201ciPhone\u201d y \u201cSamsung\u201d. Conviene revisar rangos completos: 320 px, 360 px, 375 px, 390 px, 414 px, 430 px, 768 px, 1024 px y puntos intermedios. Muchos errores aparecen no en los tama\u00f1os populares, sino entre ellos, como animales nocturnos que solo cruzan la carretera cuando nadie mira.<\/p>\n<p>Presta atenci\u00f3n a:<\/p>\n<ul>\n<li>Desbordamiento horizontal.<\/li>\n<li>Saltos bruscos de columnas.<\/li>\n<li>Textos que se cortan.<\/li>\n<li>Botones que cambian de l\u00ednea de forma extra\u00f1a.<\/li>\n<li>Cabeceras sticky que ocupan demasiado alto.<\/li>\n<li>Modales que no permiten scroll.<\/li>\n<\/ul>\n<h3>Paso 3: Revisa el viewport y el overflow horizontal<\/h3>\n<p>El desplazamiento horizontal es uno de los s\u00edntomas m\u00e1s claros de un fallo responsive. En Chrome DevTools puedes inspeccionar el elemento que se sale del ancho. Tambi\u00e9n puedes usar temporalmente una regla de depuraci\u00f3n:<\/p>\n<pre>* {\n  outline: 1px solid rgba(255, 0, 0, 0.25);\n}<\/pre>\n<p>O detectar elementos m\u00e1s anchos que el viewport desde la consola:<\/p>\n<pre>[...document.querySelectorAll(\"*\")].filter(el =&gt; el.scrollWidth &gt; document.documentElement.clientWidth)<\/pre>\n<p>No es una soluci\u00f3n definitiva, pero ayuda a encontrar al sospechoso: una tabla, un iframe, una imagen, un carrusel, un bloque de c\u00f3digo, un anuncio, una palabra largu\u00edsima o un contenedor con ancho fijo.<\/p>\n<h3>Paso 4: Analiza el CSS por capas<\/h3>\n<p>Busca reglas que impongan rigidez:<\/p>\n<ul>\n<li><code>width<\/code> fijo en p\u00edxeles sin <code>max-width<\/code>.<\/li>\n<li><code>min-width<\/code> excesivo.<\/li>\n<li><code>position: absolute<\/code> usado para maquetaci\u00f3n general.<\/li>\n<li><code>height<\/code> fijo en tarjetas con contenido variable.<\/li>\n<li><code>white-space: nowrap<\/code> en textos que deben partir l\u00ednea.<\/li>\n<li>M\u00e1rgenes negativos para alinear visualmente.<\/li>\n<li>Uso excesivo de <code>!important<\/code>, ese grito desesperado que rara vez indica salud arquitect\u00f3nica.<\/li>\n<\/ul>\n<h3>Paso 5: Comprueba navegaci\u00f3n y gestos t\u00e1ctiles<\/h3>\n<p>Una web m\u00f3vil no se usa con rat\u00f3n. Parece obvio, pero muchas interfaces siguen dise\u00f1adas para un puntero invisible. Prueba con el dedo:<\/p>\n<ul>\n<li>\u00bfSe puede abrir y cerrar el men\u00fa sin frustraci\u00f3n?<\/li>\n<li>\u00bfLos desplegables funcionan al tocar?<\/li>\n<li>\u00bfLos carruseles permiten avanzar sin tragarse el scroll vertical?<\/li>\n<li>\u00bfEl bot\u00f3n principal queda visible?<\/li>\n<li>\u00bfHay suficiente espacio entre enlaces?<\/li>\n<li>\u00bfLos formularios muestran teclados adecuados?<\/li>\n<\/ul>\n<p>Una peque\u00f1a an\u00e9cdota: una vez revis\u00e9 una web de reservas que funcionaba perfectamente en escritorio. En m\u00f3vil, el calendario se abr\u00eda, s\u00ed, pero el bot\u00f3n de confirmar quedaba debajo de una barra fija inferior. Era como poner la llave de una habitaci\u00f3n dentro de la habitaci\u00f3n cerrada. El cliente dec\u00eda que \u201cla campa\u00f1a no convert\u00eda\u201d. La campa\u00f1a, pobre, no ten\u00eda la culpa.<\/p>\n<h3>Paso 6: Mide rendimiento m\u00f3vil real<\/h3>\n<p>El dise\u00f1o responsive no vive separado del rendimiento. Una p\u00e1gina puede adaptarse visualmente y aun as\u00ed sentirse pesada, lenta, pegajosa. En m\u00f3vil, el procesador suele ser m\u00e1s limitado, la red puede ser inestable y el usuario tiene menos paciencia que un gato mojado.<\/p>\n<p>M\u00e9tricas esenciales:<\/p>\n<table>\n<thead>\n<tr>\n<th>M\u00e9trica<\/th>\n<th>Qu\u00e9 mide<\/th>\n<th>Objetivo recomendado<\/th>\n<th>Relaci\u00f3n con m\u00f3vil<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>LCP<\/strong><br \/>Largest Contentful Paint<\/td>\n<td>Tiempo hasta que se renderiza el elemento principal visible.<\/td>\n<td>Bueno si est\u00e1 por debajo de 2,5 s.<\/td>\n<td>Im\u00e1genes hero pesadas, sliders y fuentes lentas suelen empeorarlo.<\/td>\n<\/tr>\n<tr>\n<td><strong>CLS<\/strong><br \/>Cumulative Layout Shift<\/td>\n<td>Estabilidad visual durante la carga.<\/td>\n<td>Bueno si est\u00e1 por debajo de 0,1.<\/td>\n<td>Banners, im\u00e1genes sin dimensiones y anuncios causan saltos molestos.<\/td>\n<\/tr>\n<tr>\n<td><strong>INP<\/strong><br \/>Interaction to Next Paint<\/td>\n<td>Capacidad de respuesta ante interacciones del usuario.<\/td>\n<td>Bueno si est\u00e1 por debajo de 200 ms.<\/td>\n<td>JavaScript excesivo puede hacer que los toques respondan tarde.<\/td>\n<\/tr>\n<tr>\n<td><strong>TTFB<\/strong><br \/>Time to First Byte<\/td>\n<td>Tiempo de respuesta inicial del servidor.<\/td>\n<td>Cuanto m\u00e1s bajo, mejor; idealmente bajo 800 ms en muchas auditor\u00edas.<\/td>\n<td>Hosting lento, consultas pesadas y cach\u00e9 ausente afectan especialmente en m\u00f3vil.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Desde marzo de 2024, Google sustituy\u00f3 FID por INP como m\u00e9trica Core Web Vital de interacci\u00f3n. Este cambio importa: ya no basta con que la primera interacci\u00f3n responda; importa la experiencia interactiva durante toda la visita.<\/p>\n<h3>Paso 7: Audita accesibilidad m\u00f3vil<\/h3>\n<p>La accesibilidad no es una capa decorativa. Es arquitectura moral y t\u00e9cnica. Una interfaz responsive debe ser usable con lector de pantalla, teclado, zoom, contraste suficiente y tama\u00f1os legibles.<\/p>\n<ul>\n<li>El texto deber\u00eda poder leerse sin zoom forzado.<\/li>\n<li>El contraste debe cumplir criterios WCAG razonables.<\/li>\n<li>Los campos de formulario necesitan etiquetas asociadas.<\/li>\n<li>El orden de foco debe ser l\u00f3gico.<\/li>\n<li>Los mensajes de error deben ser claros y estar cerca del campo correspondiente.<\/li>\n<li>Los botones deben describir acciones, no decir solo \u201cclic aqu\u00ed\u201d.<\/li>\n<\/ul>\n<h2 id=\"herramientas\">Herramientas recomendadas para pruebas m\u00f3viles<\/h2>\n<p>Ninguna herramienta lo ve todo. La auditor\u00eda responsive se parece m\u00e1s a una investigaci\u00f3n forense que a una fotograf\u00eda: hay que reunir indicios desde distintos \u00e1ngulos.<\/p>\n<h3>Chrome DevTools \ud83d\udcd0<\/h3>\n<p>Imprescindible para simular tama\u00f1os de pantalla, inspeccionar CSS, detectar overflow, analizar red, rendimiento y problemas de renderizado. \u00datil, aunque no sustituye a dispositivos reales.<\/p>\n<h3>PageSpeed Insights \u26a1<\/h3>\n<p>Ofrece datos de laboratorio y, si hay suficiente tr\u00e1fico, datos reales del Chrome UX Report. Ideal para revisar Core Web Vitals en m\u00f3vil y escritorio.<\/p>\n<h3>Lighthouse \ud83d\udd0e<\/h3>\n<p>Audita rendimiento, accesibilidad, buenas pr\u00e1cticas y SEO. Conviene ejecutarlo varias veces y no obsesionarse con la puntuaci\u00f3n como si fuera una nota escolar.<\/p>\n<h3>Google Search Console \ud83d\udcca<\/h3>\n<p>Permite detectar problemas de indexaci\u00f3n, experiencia de p\u00e1gina, usabilidad m\u00f3vil hist\u00f3rica y rendimiento org\u00e1nico por dispositivo.<\/p>\n<h3>BrowserStack o LambdaTest \ud83c\udf0d<\/h3>\n<p>Servicios de prueba en dispositivos y navegadores reales o virtualizados. Muy \u00fatiles cuando el sitio recibe tr\u00e1fico internacional o se detectan errores espec\u00edficos de iOS o Android.<\/p>\n<h3>WebPageTest \ud83e\uddea<\/h3>\n<p>Excelente para an\u00e1lisis profundo de carga, waterfall, CPU, conexi\u00f3n m\u00f3vil simulada, LCP element y comportamiento por ubicaci\u00f3n geogr\u00e1fica.<\/p>\n<p>          <strong>\ud83e\udded Criterio profesional:<\/strong> usa herramientas autom\u00e1ticas para encontrar pistas, no para delegar el juicio. Un 95 en Lighthouse no garantiza una buena experiencia; y un 70 puede ocultar una web que convierte bien si sus problemas est\u00e1n controlados y priorizados.<\/p>\n<h2 id=\"core-web-vitals\">Responsive design, SEO m\u00f3vil y Core Web Vitals<\/h2>\n<p>El SEO moderno no mira solo palabras clave. Mira experiencia. Velocidad. Estabilidad. Accesibilidad razonable. Coherencia entre m\u00f3vil y escritorio. Google no \u201cpremia\u201d una web bonita en sentido art\u00edstico; intenta favorecer p\u00e1ginas que entregan contenido \u00fatil de forma r\u00e1pida y usable.<\/p>\n<p>En un mundo mobile-first, la versi\u00f3n m\u00f3vil es la versi\u00f3n principal. No una sucursal. No el s\u00f3tano. No esa parte que se revisa al final del proyecto, cuando ya no queda presupuesto y todos tienen prisa.<\/p>\n<h3>Errores responsive que pueden afectar al SEO<\/h3>\n<ul>\n<li><strong>Contenido oculto o diferente en m\u00f3vil:<\/strong> si la versi\u00f3n m\u00f3vil elimina contenido importante, Google puede interpretar menos informaci\u00f3n de la p\u00e1gina.<\/li>\n<li><strong>Enlaces internos inaccesibles:<\/strong> men\u00fas rotos reducen rastreabilidad y experiencia.<\/li>\n<li><strong>Intersticiales intrusivos:<\/strong> popups que bloquean contenido principal pueden perjudicar la percepci\u00f3n de calidad m\u00f3vil.<\/li>\n<li><strong>Lentitud m\u00f3vil:<\/strong> afecta m\u00e9tricas de experiencia y comportamiento del usuario.<\/li>\n<li><strong>CLS alto:<\/strong> si el contenido salta mientras el usuario intenta tocar, la experiencia se degrada.<\/li>\n<li><strong>Elementos t\u00e1ctiles peque\u00f1os:<\/strong> dificultan navegaci\u00f3n y pueden ser se\u00f1al de mala usabilidad.<\/li>\n<\/ul>\n<h3>Datos que conviene revisar en Search Console<\/h3>\n<p>Dentro de Google Search Console, revisa:<\/p>\n<ul>\n<li>Rendimiento filtrado por dispositivo m\u00f3vil.<\/li>\n<li>Consultas con alto volumen m\u00f3vil y bajo CTR.<\/li>\n<li>P\u00e1ginas con ca\u00edda de impresiones m\u00f3viles.<\/li>\n<li>Informes de Core Web Vitals.<\/li>\n<li>Estado de indexaci\u00f3n de URLs clave.<\/li>\n<li>Captura de la p\u00e1gina mediante inspecci\u00f3n de URL.<\/li>\n<\/ul>\n<p>Si una p\u00e1gina tiene buen rendimiento en escritorio pero cae en m\u00f3vil, no siempre es culpa del contenido. A veces el contenido est\u00e1 bien, pero llega envuelto en plomo.<\/p>\n<h2 id=\"checklist\">Checklist profesional de auditor\u00eda responsive<\/h2>\n<p>Esta lista sirve para propietarios de sitios web, equipos de marketing, desarrolladores WordPress y responsables t\u00e9cnicos que necesitan una revisi\u00f3n clara. No sustituye una auditor\u00eda avanzada, pero evita muchos naufragios previsibles. \ud83d\udea2<\/p>\n<h3>Revisi\u00f3n visual<\/h3>\n<ul>\n<li>La web no presenta desplazamiento horizontal en 320 px, 360 px, 390 px, 414 px y 768 px.<\/li>\n<li>El encabezado no tapa contenido importante.<\/li>\n<li>El men\u00fa m\u00f3vil abre, cierra y permite navegar todos los niveles.<\/li>\n<li>Los botones principales est\u00e1n visibles y no se superponen.<\/li>\n<li>Las im\u00e1genes se ajustan sin deformarse.<\/li>\n<li>Los textos tienen tama\u00f1o legible y buen interlineado.<\/li>\n<li>Los formularios caben en pantalla y muestran errores correctamente.<\/li>\n<li>Los popups pueden cerrarse f\u00e1cilmente.<\/li>\n<\/ul>\n<h3>Revisi\u00f3n CSS y layout<\/h3>\n<ul>\n<li>Existe etiqueta viewport correcta.<\/li>\n<li>No hay contenedores r\u00edgidos con ancho fijo innecesario.<\/li>\n<li>Las tablas tienen comportamiento responsive o scroll controlado.<\/li>\n<li>Los iframes usan contenedores proporcionales.<\/li>\n<li>Las columnas se reorganizan correctamente en m\u00f3vil.<\/li>\n<li>No se abusa de <code>position: absolute<\/code> para estructura.<\/li>\n<li>Los breakpoints siguen una l\u00f3gica consistente.<\/li>\n<li>Se evita el uso descontrolado de <code>!important<\/code>.<\/li>\n<\/ul>\n<h3>Revisi\u00f3n WordPress<\/h3>\n<ul>\n<li>Tema actualizado y compatible con la versi\u00f3n actual de WordPress.<\/li>\n<li>Plugins actualizados y sin conflictos visibles.<\/li>\n<li>Constructor visual revisado en vistas escritorio, tablet y m\u00f3vil.<\/li>\n<li>Cach\u00e9 limpia tras cambios de dise\u00f1o.<\/li>\n<li>Minificaci\u00f3n y diferido de JS probados en m\u00f3vil real.<\/li>\n<li>CSS cr\u00edtico verificado para plantillas principales.<\/li>\n<li>WooCommerce probado desde producto hasta pago.<\/li>\n<li>Plugins de popups, cookies y anuncios revisados en pantallas peque\u00f1as.<\/li>\n<\/ul>\n<h3>Revisi\u00f3n de rendimiento<\/h3>\n<ul>\n<li>LCP m\u00f3vil por debajo de 2,5 s cuando sea razonablemente posible.<\/li>\n<li>CLS inferior a 0,1.<\/li>\n<li>INP inferior a 200 ms.<\/li>\n<li>Im\u00e1genes comprimidas y servidas en tama\u00f1os adecuados.<\/li>\n<li>Fuentes optimizadas con <code>font-display<\/code> apropiado.<\/li>\n<li>JavaScript innecesario reducido o cargado bajo demanda.<\/li>\n<li>Cach\u00e9 de p\u00e1gina y cach\u00e9 de navegador configuradas.<\/li>\n<li>Servidor con TTFB competitivo.<\/li>\n<\/ul>\n<h3>Revisi\u00f3n de accesibilidad<\/h3>\n<ul>\n<li>Contraste suficiente entre texto y fondo.<\/li>\n<li>Elementos t\u00e1ctiles c\u00f3modos y separados.<\/li>\n<li>Estados de foco visibles.<\/li>\n<li>Formularios con etiquetas claras.<\/li>\n<li>Men\u00fas accesibles mediante teclado y lector de pantalla.<\/li>\n<li>Contenido comprensible al hacer zoom.<\/li>\n<li>No se bloquea la orientaci\u00f3n de pantalla sin motivo.<\/li>\n<\/ul>\n<h2 id=\"soluciones\">Soluciones t\u00e9cnicas y buenas pr\u00e1cticas<\/h2>\n<p>Una vez detectados los fallos, toca intervenir. Aqu\u00ed conviene distinguir entre parches y soluciones. El parche apaga el incendio; la soluci\u00f3n revisa por qu\u00e9 hab\u00eda gasolina junto a la estufa.<\/p>\n<h3>Adopta una estrategia mobile first<\/h3>\n<p>Dise\u00f1a primero para el espacio m\u00e1s limitado. Esto obliga a priorizar contenido, jerarqu\u00eda y acciones. Despu\u00e9s a\u00f1ade complejidad en pantallas mayores. La versi\u00f3n m\u00f3vil no debe ser una poda triste del escritorio, sino la ra\u00edz del sistema.<\/p>\n<h3>Usa contenedores fluidos<\/h3>\n<p>Una estructura flexible evita muchos problemas. En lugar de fijar anchos absolutos, combina <code>width<\/code>, <code>max-width<\/code> y funciones modernas.<\/p>\n<pre>.layout {\n  width: min(100% - 32px, 1180px);\n  margin-inline: auto;\n}\n\n.card {\n  padding: clamp(16px, 3vw, 32px);\n}<\/pre>\n<h3>Controla im\u00e1genes, v\u00eddeos e iframes<\/h3>\n<p>Los medios incrustados son una fuente cl\u00e1sica de desbordamientos. Para v\u00eddeos de YouTube, mapas o iframes, usa contenedores con proporci\u00f3n estable:<\/p>\n<pre>.embed-responsive {\n  position: relative;\n  width: 100%;\n  aspect-ratio: 16 \/ 9;\n}\n\n.embed-responsive iframe {\n  width: 100%;\n  height: 100%;\n  border: 0;\n}<\/pre>\n<p>La propiedad <code>aspect-ratio<\/code> simplifica una tarea que antes requer\u00eda trucos con padding. La web tambi\u00e9n envejece; por suerte, a veces envejece para bien.<\/p>\n<h3>Evita sliders pesados en la parte superior<\/h3>\n<p>Los sliders hero suelen ser caros: m\u00faltiples im\u00e1genes grandes, JavaScript, animaciones, retrasos en LCP y contenido que pocos usuarios ven completo. En m\u00f3vil, muchas veces una buena imagen, un titular claro y un bot\u00f3n honesto convierten mejor que un carrusel con \u00ednfulas de cine.<\/p>\n<h3>Revisa fuentes web<\/h3>\n<p>Las tipograf\u00edas aportan identidad, pero pueden ralentizar la carga. Usa pocos pesos, precarga solo lo esencial y configura intercambio de fuente cuando proceda.<\/p>\n<pre>@font-face {\n  font-family: \"MiFuente\";\n  src: url(\"\/fonts\/mifuente.woff2\") format(\"woff2\");\n  font-display: swap;\n}<\/pre>\n<p>Tambi\u00e9n conviene usar fuentes del sistema cuando la velocidad sea prioritaria. No todas las marcas necesitan cargar seis variantes tipogr\u00e1ficas para decir \u201ccont\u00e1ctanos\u201d.<\/p>\n<h3>Reduce JavaScript en m\u00f3vil<\/h3>\n<p>El JavaScript excesivo es una niebla espesa: todo est\u00e1 ah\u00ed, pero cuesta avanzar. Revisa scripts de tracking, chatbots, mapas, sliders, animaciones, p\u00edxeles publicitarios y widgets externos. Cada uno promete valor; juntos pueden formar una procesi\u00f3n lenta.<\/p>\n<p>Buenas pr\u00e1cticas:<\/p>\n<ul>\n<li>Cargar scripts solo en p\u00e1ginas donde se usan.<\/li>\n<li>Diferir JavaScript no cr\u00edtico, con pruebas rigurosas.<\/li>\n<li>Eliminar plugins redundantes.<\/li>\n<li>Evitar librer\u00edas completas para tareas simples.<\/li>\n<li>Medir impacto antes y despu\u00e9s de cada cambio.<\/li>\n<\/ul>\n<h3>Implementa CSS moderno con prudencia<\/h3>\n<p>Flexbox y CSS Grid permiten layouts robustos y adaptables. Pero incluso las herramientas modernas pueden usarse mal. Un grid sin reglas para pantallas peque\u00f1as puede romperse con la misma solemnidad que una tabla de 2005.<\/p>\n<pre>.servicios {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));\n  gap: 24px;\n}<\/pre>\n<p>Esta t\u00e9cnica permite que las tarjetas se acomoden seg\u00fan el espacio disponible, sin depender de una lista interminable de breakpoints.<\/p>\n<h3>Gestiona correctamente la cach\u00e9<\/h3>\n<p>Cuando un cliente dice \u201cyo lo veo roto, t\u00fa lo ves bien\u201d, a menudo hay una cach\u00e9 en medio, sonriendo con malicia. Puede ser cach\u00e9 del navegador, del plugin, del servidor, del CDN o incluso del operador m\u00f3vil.<\/p>\n<p>Despu\u00e9s de cambios importantes:<\/p>\n<ul>\n<li>Vac\u00eda cach\u00e9 del plugin de WordPress.<\/li>\n<li>Purge CDN si usas Cloudflare, QUIC.cloud u otro servicio.<\/li>\n<li>Regenera CSS del constructor visual si aplica.<\/li>\n<li>Prueba en ventana inc\u00f3gnita.<\/li>\n<li>Verifica desde otra red o dispositivo.<\/li>\n<\/ul>\n<h3>No olvides la seguridad<\/h3>\n<p>Puede parecer un desv\u00edo, pero no lo es. Un sitio WordPress infectado o mal protegido puede inyectar scripts, iframes, anuncios ocultos o redirecciones que alteran el dise\u00f1o m\u00f3vil. Algunos ataques se muestran solo a usuarios m\u00f3viles o solo a visitantes no autenticados, lo que complica el diagn\u00f3stico.<\/p>\n<p>Medidas m\u00ednimas:<\/p>\n<ul>\n<li>Mantener WordPress, temas y plugins actualizados.<\/li>\n<li>Eliminar plugins abandonados.<\/li>\n<li>Usar un firewall de aplicaciones web cuando sea necesario.<\/li>\n<li>Revisar archivos modificados recientemente.<\/li>\n<li>Escanear malware con herramientas confiables.<\/li>\n<li>Aplicar permisos correctos de archivos.<\/li>\n<li>Evitar usuarios administradores innecesarios.<\/li>\n<\/ul>\n<p>          <strong>\ud83d\udd10 Pista importante:<\/strong> si la web solo se rompe en m\u00f3vil para visitantes an\u00f3nimos, revisa cach\u00e9, scripts de terceros, anuncios, consentimiento de cookies y posible inyecci\u00f3n maliciosa. El administrador logueado suele ver una realidad distinta.<\/p>\n<h2>Errores menos obvios que suelen pasar desapercibidos<\/h2>\n<h3>La barra del navegador m\u00f3vil cambia la altura visible<\/h3>\n<p>En m\u00f3viles, la barra de direcci\u00f3n puede aparecer y desaparecer al hacer scroll, alterando la altura real disponible. Por eso <code>100vh<\/code> ha causado tantos dolores de cabeza: no siempre representa lo que uno imagina. Las unidades modernas como <code>dvh<\/code>, <code>svh<\/code> y <code>lvh<\/code> ayudan a manejar estos casos, aunque conviene probar compatibilidad seg\u00fan el p\u00fablico del sitio.<\/p>\n<pre>.hero-mobile {\n  min-height: 100dvh;\n}<\/pre>\n<h3>El modo horizontal revela fallos ocultos<\/h3>\n<p>Muchas auditor\u00edas olvidan girar el tel\u00e9fono. Error. En orientaci\u00f3n horizontal, una cabecera fija puede consumir media pantalla; un modal puede quedar inaccesible; un men\u00fa puede no permitir scroll. Es un escenario menos frecuente, s\u00ed, pero no ex\u00f3tico.<\/p>\n<h3>El contenido din\u00e1mico rompe dise\u00f1os perfectos<\/h3>\n<p>Una tarjeta se ve preciosa con t\u00edtulos de tres palabras. Luego llega un producto llamado \u201cPack profesional avanzado de mantenimiento web responsive y optimizaci\u00f3n integral\u201d y la armon\u00eda se desploma como una estanter\u00eda mal anclada.<\/p>\n<p>Prueba siempre con contenido real, largo, irregular, multiling\u00fce si aplica, precios con descuentos, etiquetas, mensajes de error y estados vac\u00edos.<\/p>\n<h3>Los idiomas cambian el ancho de todo<\/h3>\n<p>Un bot\u00f3n que dice \u201cBuy\u201d cabe donde \u201cA\u00f1adir al carrito\u201d quiz\u00e1 no. El dise\u00f1o internacional no es traducir palabras; es prever que las palabras tienen cuerpos distintos.<\/p>\n<h2>Priorizaci\u00f3n: qu\u00e9 arreglar primero<\/h2>\n<p>No todos los errores tienen el mismo peso. Si el presupuesto o el tiempo son limitados, conviene priorizar por impacto.<\/p>\n<table>\n<thead>\n<tr>\n<th>Prioridad<\/th>\n<th>Problema<\/th>\n<th>Por qu\u00e9 actuar primero<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Alta<\/strong><\/td>\n<td>Men\u00fa m\u00f3vil roto, checkout inutilizable, formulario inaccesible, botones principales tapados.<\/td>\n<td>Afecta directamente a navegaci\u00f3n, captaci\u00f3n de leads o ventas.<\/td>\n<\/tr>\n<tr>\n<td><strong>Alta<\/strong><\/td>\n<td>Contenido principal fuera de pantalla o ilegible.<\/td>\n<td>Perjudica experiencia, SEO m\u00f3vil y confianza.<\/td>\n<\/tr>\n<tr>\n<td><strong>Media<\/strong><\/td>\n<td>CLS elevado por im\u00e1genes, banners o fuentes.<\/td>\n<td>Deteriora Core Web Vitals y genera frustraci\u00f3n.<\/td>\n<\/tr>\n<tr>\n<td><strong>Media<\/strong><\/td>\n<td>Im\u00e1genes demasiado pesadas en m\u00f3vil.<\/td>\n<td>Impacta velocidad, datos m\u00f3viles y LCP.<\/td>\n<\/tr>\n<tr>\n<td><strong>Baja<\/strong><\/td>\n<td>Peque\u00f1as diferencias visuales sin impacto funcional.<\/td>\n<td>Se corrigen despu\u00e9s de resolver bloqueos reales.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>La perfecci\u00f3n visual absoluta puede esperar. Un bot\u00f3n de pago que funcione, no.<\/p>\n<h2>C\u00f3mo documentar una auditor\u00eda responsive profesional<\/h2>\n<p>Una auditor\u00eda \u00fatil no debe ser una colecci\u00f3n de capturas sueltas enviadas por chat. Debe dejar rastro, contexto y prioridad. Recomiendo documentar cada incidencia con:<\/p>\n<ul>\n<li><strong>URL afectada.<\/strong><\/li>\n<li><strong>Dispositivo o ancho probado.<\/strong><\/li>\n<li><strong>Navegador y sistema operativo.<\/strong><\/li>\n<li><strong>Descripci\u00f3n del problema.<\/strong><\/li>\n<li><strong>Captura o v\u00eddeo corto.<\/strong><\/li>\n<li><strong>Impacto estimado:<\/strong> alto, medio o bajo.<\/li>\n<li><strong>Causa probable.<\/strong><\/li>\n<li><strong>Soluci\u00f3n recomendada.<\/strong><\/li>\n<li><strong>Estado:<\/strong> pendiente, en progreso, resuelto, verificado.<\/li>\n<\/ul>\n<p>Esto evita una escena bastante conocida: tres personas opinando sobre \u201clo roto\u201d sin hablar exactamente del mismo fallo. La documentaci\u00f3n es menos emocionante que una revelaci\u00f3n creativa, pero salva proyectos. Como el pan en una mesa larga: nadie lo aplaude, todos lo necesitan.<\/p>\n<h2>Plantilla breve de informe t\u00e9cnico<\/h2>\n<p>Puedes usar esta estructura para presentar hallazgos a un cliente, equipo interno o desarrollador:<\/p>\n<pre>Incidencia: Desbordamiento horizontal en p\u00e1gina de servicios\nURL: \/servicios\/\nDispositivo: 390 px, iOS Safari y Chrome DevTools\nImpacto: Alto\nS\u00edntoma: Aparece scroll horizontal; el bloque de precios excede el viewport.\nCausa probable: Tabla con min-width de 720 px dentro de contenedor sin overflow controlado.\nRecomendaci\u00f3n: Convertir tabla en tarjetas en m\u00f3vil o aplicar overflow-x con dise\u00f1o accesible.\nEstado: Pendiente de correcci\u00f3n y prueba.<\/pre>\n<h2>Qu\u00e9 pedir a tu desarrollador o agencia<\/h2>\n<p>Si no vas a corregirlo t\u00fa, pide algo m\u00e1s concreto que \u201chacer que se vea bien en m\u00f3vil\u201d. Esa frase es una nube. Mejor solicita:<\/p>\n<ul>\n<li>Auditor\u00eda responsive por plantillas cr\u00edticas.<\/li>\n<li>Pruebas en dispositivos reales o emulaci\u00f3n documentada.<\/li>\n<li>Revisi\u00f3n de Core Web Vitals m\u00f3vil.<\/li>\n<li>Correcci\u00f3n de overflow horizontal y elementos t\u00e1ctiles.<\/li>\n<li>Revisi\u00f3n de men\u00fa m\u00f3vil y formularios.<\/li>\n<li>Pruebas post-cach\u00e9 y post-CDN.<\/li>\n<li>Informe antes\/despu\u00e9s con capturas y m\u00e9tricas.<\/li>\n<\/ul>\n<p>Un proveedor serio no deber\u00eda limitarse a decir \u201cya est\u00e1\u201d. Deber\u00eda poder explicar qu\u00e9 fallaba, qu\u00e9 se cambi\u00f3, qu\u00e9 se prob\u00f3 y qu\u00e9 riesgos quedan. La transparencia t\u00e9cnica no es un lujo; es mantenimiento preventivo.<\/p>\n<h2>Mantenimiento: la auditor\u00eda responsive no se hace una sola vez<\/h2>\n<p>La web cambia. WordPress se actualiza. Los plugins mutan. El navegador Safari decide interpretar algo con personalidad propia. Google ajusta m\u00e9tricas. El equipo de marketing instala un nuevo banner. Alguien sube una imagen de 6 MB llamada final-final-ahora-si.jpg. La vida digital, en fin, contin\u00faa.<\/p>\n<p>Por eso conviene establecer una rutina:<\/p>\n<ul>\n<li><strong>Mensual:<\/strong> revisar p\u00e1ginas principales en m\u00f3vil y actualizar componentes cr\u00edticos.<\/li>\n<li><strong>Despu\u00e9s de cada cambio grande:<\/strong> probar dise\u00f1o m\u00f3vil, cach\u00e9 y formularios.<\/li>\n<li><strong>Trimestral:<\/strong> auditar Core Web Vitals, plugins, tema y rendimiento.<\/li>\n<li><strong>Antes de campa\u00f1as:<\/strong> probar landing pages, p\u00edxeles, formularios y checkout en dispositivos reales.<\/li>\n<li><strong>Despu\u00e9s de actualizaciones mayores:<\/strong> revisar compatibilidad del tema, builder y WooCommerce.<\/li>\n<\/ul>\n<p>          <strong>\ud83d\udee0\ufe0f Regla sensata:<\/strong> si una p\u00e1gina genera ingresos, leads o reputaci\u00f3n, debe probarse en m\u00f3vil antes de cada campa\u00f1a. No despu\u00e9s, cuando el informe ya parece una autopsia.<\/p>\n<h2>Un sitio responsive no es peque\u00f1o: es preciso<\/h2>\n<p>La versi\u00f3n m\u00f3vil de una web es una prueba de car\u00e1cter. Obliga a elegir. A quitar lo ornamental. A ordenar jerarqu\u00edas. A respetar el tiempo ajeno. En escritorio se puede disimular con espacio; en m\u00f3vil, cada p\u00edxel declara sus intenciones.<\/p>\n<p>Si tu sitio se desconfigura en m\u00f3viles, no lo tomes como una cat\u00e1strofe, sino como una se\u00f1al. Algo en la arquitectura pide revisi\u00f3n: CSS r\u00edgido, plugins excesivos, im\u00e1genes pesadas, cach\u00e9 caprichosa, men\u00fas poco accesibles, decisiones tomadas para una pantalla que ya no gobierna sola.<\/p>\n<p>Auditar el dise\u00f1o responsive es mirar la web con humildad t\u00e9cnica. Es aceptar que el usuario no visita desde el dispositivo ideal, con la conexi\u00f3n ideal, en el momento ideal. Visita desde donde puede. Desde un tren, una cocina, una sala de espera, una calle con sol directo. Y aun as\u00ed espera que todo funcione.<\/p>\n<p>Ah\u00ed est\u00e1 el reto: construir una p\u00e1gina que no solo se vea bien, sino que se sostenga. Ligera sin ser pobre. Flexible sin ser ca\u00f3tica. Hermosa sin sacrificar utilidad. Como un puente bien dise\u00f1ado: nadie piensa en sus c\u00e1lculos al cruzarlo, pero todos conf\u00edan en que no va a caer. \ud83c\udf09<\/p>\n<\/article>\n<p>  <\/main><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udcf1 Dise\u00f1o responsive \u00b7 WordPress \u00b7 Rendimiento web \u00bfPor qu\u00e9 mi sitio web se desconfigura<\/p>\n","protected":false},"author":1,"featured_media":3747,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"","_seopress_redirections_param":"","_seopress_redirections_type":0,"_seopress_analysis_target_kw":"","_seopress_news_disabled":"","_seopress_video_disabled":"","_seopress_video":[],"_seopress_pro_schemas_manual":[],"_seopress_pro_rich_snippets_disable_all":"","_seopress_pro_rich_snippets_disable":[],"_seopress_pro_schemas":[],"footnotes":""},"categories":[2],"tags":[],"class_list":["post-3748","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mantenimiento"],"_links":{"self":[{"href":"https:\/\/mantenimientoweb.pro\/blog\/wp-json\/wp\/v2\/posts\/3748","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mantenimientoweb.pro\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mantenimientoweb.pro\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mantenimientoweb.pro\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mantenimientoweb.pro\/blog\/wp-json\/wp\/v2\/comments?post=3748"}],"version-history":[{"count":1,"href":"https:\/\/mantenimientoweb.pro\/blog\/wp-json\/wp\/v2\/posts\/3748\/revisions"}],"predecessor-version":[{"id":3749,"href":"https:\/\/mantenimientoweb.pro\/blog\/wp-json\/wp\/v2\/posts\/3748\/revisions\/3749"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mantenimientoweb.pro\/blog\/wp-json\/wp\/v2\/media\/3747"}],"wp:attachment":[{"href":"https:\/\/mantenimientoweb.pro\/blog\/wp-json\/wp\/v2\/media?parent=3748"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mantenimientoweb.pro\/blog\/wp-json\/wp\/v2\/categories?post=3748"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mantenimientoweb.pro\/blog\/wp-json\/wp\/v2\/tags?post=3748"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}