Cómo hacer que una web sea responsive para móviles

Para que una web sea responsive en móvil, añade una etiqueta meta viewport, construye el diseño primero para móvil con anchos flexibles y usa puntos de ruptura CSS para reorganizarlo en pantallas más grandes: apilando columnas, contrayendo el menú y ajustando las imágenes al espacio. Después revisa cada página con el ancho de un teléfono para detectar desplazamiento lateral, texto diminuto y botones demasiado pequeños para tocar. En una web creada con IA, un prompt claro y una revisión en una vista previa de tamaño móvil suelen arreglar la mayoría de los problemas.

Qué es realmente el diseño responsive

Una web responsive usa un único conjunto de páginas y URL que se adaptan a la pantalla. En lugar de un sitio «m.» aparte, el CSS cambia el diseño a ciertos anchos, llamados puntos de ruptura (breakpoints). Los bloques básicos son:

• La etiqueta meta viewport, que indica a los navegadores móviles que usen el ancho real del dispositivo.
• Diseños fluidos, que usan porcentajes, flexbox y grid en lugar de anchos fijos en píxeles.
• Media queries (o clases de frameworks como md: de Tailwind) que cambian el diseño a partir de cierto ancho.
• Medios flexibles: imágenes y vídeos que se encogen para ajustarse a su contenedor.

Importa porque es probable que gran parte de tu tráfico llegue desde el móvil, y porque Google indexa la versión móvil de tus páginas. Si el contenido o los enlaces solo existen en escritorio, Google tampoco los verá.

Opciones y compensaciones

Mobile-first suele ser más sencillo: una sola columna es el diseño más fácil, y añadir columnas a medida que hay espacio es menos trabajo que quitarlas.

Las partes que suelen romperse

La etiqueta viewport

Si una página se ve como un sitio de escritorio en miniatura en el móvil, falta la etiqueta viewport:

<meta name="viewport" content="width=device-width, initial-scale=1">

No añadas maximum-scale=1 ni user-scalable=no. Bloquear el zoom con pellizco dificulta el uso del sitio a personas con baja visión.

Anchos fijos y desplazamiento horizontal

El error responsive más común es algo más ancho que la pantalla: un contenedor de width: 1200px fijo, una tabla ancha, una URL larga o un bloque de código, una imagen sin max-width: 100%. Toda la página entonces se desplaza de lado. Usa max-width en lugar de width, deja que el texto se ajuste y da a los elementos anchos su propia área de desplazamiento.

Navegación

Cinco enlaces de menú de escritorio rara vez caben en un móvil. La solución habitual es un botón de menú que abre un panel. Mantén visibles las dos o tres acciones más importantes («Reservar», «Carrito», «Iniciar sesión») y asegúrate de que el menú funciona con teclado y se cierra con facilidad.

Texto y áreas táctiles

• Un texto de unos 16 px es un mínimo sensato en móviles. Los campos con texto más pequeño hacen que los iPhone amplíen al tocarlos.
• Haz que los botones y enlaces sean fáciles de tocar. WCAG 2.2 AA fija un mínimo de 24 por 24 píxeles CSS (o suficiente separación); unos 44 píxeles es más cómodo para el pulgar.
• Deja espacio entre enlaces contiguos para que la gente no toque el equivocado.

Tablas y datos

Las tablas anchas son la parte más difícil de una app responsive. Opciones, por orden de preferencia: mostrar menos columnas en el móvil, convertir cada fila en una tarjeta o meter la tabla en un contenedor con desplazamiento horizontal con la primera columna fija. Elige según lo que la gente necesite comparar.

Imágenes y medios

Usa max-width: 100% y height: auto, sirve archivos más pequeños a pantallas pequeñas con srcset y define el ancho y el alto para evitar saltos en el diseño. Los vídeos y mapas incrustados necesitan un contenedor responsive para mantener su proporción. Las imágenes más pequeñas también hacen que las páginas carguen más rápido; consulta cómo hacer tu web más rápida.

Formularios

Pon las etiquetas encima de los campos, haz los campos de ancho completo y usa los tipos de entrada adecuados (type="email", type="tel", inputmode="numeric") para que el móvil muestre el teclado correspondiente. Coloca el botón de envío donde el pulgar lo alcance y mantenlo visible cuando se abra el teclado.

Interacciones que solo funcionan con el cursor

En los móviles no hay cursor sobre el elemento. Las descripciones emergentes, los desplegables y las vistas previas que solo aparecen al pasar el ratón son invisibles para quien usa táctil. Haz que también funcionen al tocar.

Prompts que funcionan

Para una construcción nueva, dilo desde el principio:

Constrúyelo pensando primero en móvil. Una sola columna en teléfonos, dos columnas desde el ancho de tableta, diseño completo en escritorio. Sin desplazamiento horizontal a 320 px de ancho, texto del cuerpo de al menos 16 px, áreas táctiles de al menos 44 px, un botón de menú en pantallas pequeñas y tablas que se conviertan en tarjetas en el móvil.

Para una página existente, describe lo que ves:

En móviles, la página /pricing se desplaza de lado y las tres tarjetas de plan se ven aplastadas una junto a otra. Apila las tarjetas verticalmente por debajo de 768 px, haz que la tabla de comparación se desplace horizontalmente dentro de su propio contenedor con la columna de funciones fija y mantén el diseño de escritorio sin cambios.

Revisa cada página a 375 px de ancho. Enumera todo lo que se desborde, se solape, tenga texto de menos de 16 px o áreas táctiles de menos de 44 px, o solo funcione con el cursor, y luego corrige cada cosa.

Paso a paso

1. Confirma la etiqueta viewport en el encabezado de la página.
2. Prueba a 320–375 px de ancho en el modo de dispositivo del navegador o en una vista previa de tamaño móvil. Recorre cada página de arriba abajo.
3. Arregla primero el desplazamiento horizontal. Encuentra el elemento que es demasiado ancho; todo lo demás es difícil de valorar hasta que desaparece.
4. Ordena la navegación: botón de menú, acciones clave visibles.
5. Revisa texto, áreas táctiles y formularios en cada flujo clave: registro, búsqueda, pago, contacto.
6. Gestiona tablas y medios: tarjetas o contenedores con desplazamiento, imágenes y embebidos responsive.
7. Comprueba los tamaños intermedios. Arrastra lentamente el ancho del móvil al escritorio; los diseños suelen romperse alrededor del ancho de tableta.
8. Prueba en un móvil real. Los emuladores no detectan cosas como el teclado en pantalla tapando un botón, las muescas o lo rápido que carga la web con datos móviles.

Errores habituales

• Probar solo con un tamaño de teléfono. Comprueba un móvil pequeño, uno grande y una tableta.
• Ocultar contenido en móvil para que quepa. Google indexa la versión móvil, y quien usa el teléfono quiere la misma información.
• Desactivar el zoom en la etiqueta viewport.
• Imágenes de tamaño de escritorio en móviles, que cuestan tiempo de carga y datos.
• Elementos fijos que se acumulan: una cabecera fija, un banner de cookies y una burbuja de chat pueden tapar media pantalla del móvil.
• Ventanas emergentes que no se pueden cerrar en pantallas pequeñas porque el botón de cierre queda fuera de la pantalla.

Lista de comprobación para móvil

• Etiqueta meta viewport presente; zoom no desactivado
• Sin desplazamiento horizontal a 320 px en ninguna página
• Texto del cuerpo de unos 16 px; los campos no provocan zoom
• Áreas táctiles lo bastante grandes y separadas
• El menú funciona en móviles y con teclado
• Tablas legibles en móviles (tarjetas, menos columnas o contenedor con desplazamiento)
• Imágenes y embebidos se escalan; se sirven archivos de tamaño adecuado
• Los formularios usan los tipos de entrada correctos; el botón de envío es alcanzable
• Nada importante depende del cursor
• Probado en al menos un móvil real

El diseño responsive también forma parte de la accesibilidad: WCAG pide que el contenido funcione a 320 px de ancho y con un zoom del 200 %. Si estás construyendo una app que la gente usará a diario desde el móvil, cómo crear una app web optimizada para móviles va más allá, incluidas las PWA instalables.

Diseño responsive en Mythex

Mythex crea apps web responsive, y en el plan Pro puede empaquetarlas como apps de Android e iPhone. En el espacio de trabajo, haz clic en el icono del teléfono encima de la vista previa (Switch to Mobile, cambiar a móvil) para ver tu app en un marco de tamaño móvil, y arrastra el borde del marco para probar otros anchos (Vista previa y código). La documentación tiene un prompt de inicio breve para corregir el diseño en pantallas pequeñas en prompts para diseño responsive. Compruébalo también en un móvil real: abre la URL publicada o comparte un enlace de vista previa y ábrelo en tu teléfono.

Preguntas