Cómo hacer una página web responsive: 10 cambios que importan

Para adaptar una web al móvil, añade una etiqueta meta viewport correcta, deja que el diseño se ajuste al ancho de la pantalla en lugar de usar anchos fijos en píxeles, usa media queries para reorganizar el contenido en pantallas pequeñas, haz que el texto se lea bien y que los botones sean fáciles de pulsar, y sirve imágenes con el tamaño adecuado para teléfonos. Después, pruébala en vistas móviles reales. Los diez cambios siguientes cubren lo que casi todas las webs no adaptadas hacen mal, en el orden en que conviene abordarlos.

1. Añade la etiqueta meta viewport

Sin ella, los teléfonos suponen que la página se hizo para escritorio, la renderizan con unos 980 px de ancho y luego la encogen. El texto se vuelve diminuto y hay que hacer zoom con los dedos. Pon esto en el <head> de todas las páginas:

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

No añadas user-scalable=no ni maximum-scale=1: bloquear el zoom perjudica a quien necesita texto más grande. Detalles: la etiqueta meta viewport explicada.

2. Cambia los anchos fijos por anchos fluidos

Un contenedor de width: 960px no cabe en una pantalla de 390 px. Usa porcentajes, max-width y herramientas de layout modernas:

.container {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

Flexbox con flex-wrap: wrap y CSS Grid con repeat(auto-fit, minmax(16rem, 1fr)) hacen que las columnas bajen de línea solas, a menudo sin ninguna media query.

3. Haz que imágenes y contenidos incrustados se encojan

img, video, iframe {
  max-width: 100%;
  height: auto;
}

Para vídeos y mapas incrustados, usa aspect-ratio: 16 / 9; width: 100% para que escalen sin romper el diseño. Esta sola regla elimina muchos casos de desplazamiento lateral.

4. Reorganiza el contenido con media queries

Algunos diseños tienen que cambiar, no solo encogerse: la barra lateral pasa debajo del contenido y un pie de cuatro columnas se queda en una. Escribe primero el diseño móvil y añade complejidad para pantallas anchas:

.layout { display: grid; gap: 2rem; }

@media (min-width: 64rem) {
  .layout { grid-template-columns: 3fr 1fr; }
}

Cómo elegir los anchos se explica en breakpoints responsive, y la sintaxis en la guía de media queries en CSS. El enfoque mobile first se explica en diseño mobile first.

5. Usa una tipografía legible

Pon el texto principal a 16 px como mínimo (1rem en casi todos los navegadores) con un interlineado de alrededor de 1,5. Usa unidades rem para que el texto respete el tamaño de fuente configurado por el usuario. En pantallas grandes, mantén una longitud de línea cómoda con max-width: 65ch en los bloques de texto. Los títulos pueden escalar con la pantalla usando clamp():

h1 { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }

6. Haz zonas táctiles grandes y bien separadas

Los dedos son menos precisos que el puntero del ratón. WCAG 2.2 fija un tamaño mínimo de objetivo de 24 × 24 píxeles CSS; las guías de diseño de Apple y Google recomiendan unos 44–48 px para pulsar con comodidad. Da suficiente padding a los enlaces de texto y a los botones de icono, y separación con los elementos vecinos.

7. Crea una navegación que funcione sin hover

En las pantallas táctiles no existe el hover. En pantallas pequeñas, usa un botón de menú que abra una lista al tocarlo, limita el número de elementos principales y asegúrate de que los submenús se despliegan al tocarlos y con el teclado. Comprueba que el menú se cierra al elegir un enlace.

8. Adapta los formularios al móvil

• Usa los tipos de campo correctos (email, tel, url, number) e inputmode, para que el teléfono muestre el teclado adecuado.
• Añade atributos autocomplete (name, email, street-address, cc-number) para que funcione el autocompletado.
• Mantén el texto de los campos en 16 px o más: Safari en iOS hace zoom en los campos más pequeños al enfocarlos.
• En pantallas estrechas, coloca las etiquetas encima de los campos y haz que el botón de envío ocupe todo el ancho.

9. Sirve imágenes con tamaño para móvil

Una imagen de cabecera de 2400 px es una descarga pesada en un teléfono. Usa imágenes responsive para que el navegador elija el archivo adecuado:

<img src="hero-800.jpg"
     srcset="hero-480.jpg 480w, hero-800.jpg 800w, hero-1600.jpg 1600w"
     sizes="(min-width: 64rem) 50vw, 100vw"
     alt="Panel del producto en un teléfono">

Los formatos modernos como WebP y AVIF reducen todavía más el peso. Añade loading="lazy" a las imágenes que quedan por debajo de la primera pantalla. Para acelerar las páginas, consulta la guía del test de velocidad móvil.

10. Elimina las molestias en el móvil

Los pop-ups a pantalla completa nada más entrar, las burbujas de chat encima del botón “Comprar” y las barras fijas que ocupan un cuarto de la pantalla hacen que una web resulte hostil en el teléfono. Retrasa los pop-ups, haz que se cierren con facilidad y mantén pequeños los elementos fijos.

Cómo comprobar el resultado

Después de cada cambio, mira la página a tamaño de teléfono. Una forma rápida es una vista móvil en Chrome de escritorio: el modo dispositivo de DevTools o una extensión de un clic como Mobile View Extension, que recarga la pestaña con un user agent móvil real y permite comparar tamaños de dispositivo. Después ejecuta una auditoría de Lighthouse para móvil y, antes del lanzamiento, el checklist de pruebas de una web móvil. Las herramientas que sustituyen a la antigua prueba de un clic de Google están en alternativas al Mobile-Friendly Test.

¿Usas WordPress? Los principios son los mismos, pero casi todos los cambios se hacen en el tema. Consulta cómo hacer responsive un sitio WordPress.

Preguntas frecuentes

¿Cuál es la forma más rápida de adaptar una web antigua al móvil?

Añade la etiqueta meta viewport, pon max-width: 100% en imágenes y contenidos incrustados, quita los anchos fijos de los contenedores principales y apila las columnas con una media query. Con eso se arregla en una tarde casi todo el desplazamiento lateral y el texto diminuto.

¿Necesito una web móvil separada?

No. Un único sitio responsive que se adapta a la pantalla es más fácil de mantener y es lo que recomienda Google. Las webs m. separadas son un enfoque antiguo.

¿Cómo sé si mi web está adaptada al móvil?

Mírala a tamaño de teléfono, ejecuta una auditoría de Lighthouse en modo móvil y revisa la captura de la inspección de URLs de Google Search Console. Juntas sustituyen a la prueba de optimización para móviles que Google retiró.