Definición
El diseño responsive es construir una sola web que se adapta a cualquier pantalla: móvil, tablet, portátil o monitor grande. Un único HTML, un único CSS, y el diseño se reorganiza según el espacio disponible.
La alternativa histórica era mantener una versión aparte para móvil, normalmente en un subdominio. Se abandonó por lo evidente: dos webs que mantener, dos sitios donde equivocarse y un lío de SEO con contenido duplicado.
Hoy no es opcional. La mayoría del tráfico web es móvil, y Google indexa priorizando la versión móvil de tu página. Si tu web funciona mal en un teléfono, funciona mal para Google.
Cómo se hace
Tres herramientas y una filosofía.
La etiqueta viewport. Sin esta línea en el <head>, el móvil finge ser un ordenador y encoge la página hasta hacerla ilegible:
<meta name="viewport" content="width=device-width, initial-scale=1">
Media queries. Reglas de CSS que solo se aplican a partir de cierto ancho:
.rejilla { display: grid; gap: 16px; }
@media (min-width: 768px) {
.rejilla { grid-template-columns: repeat(2, 1fr); }
}
Unidades y layouts flexibles. Porcentajes, fr, minmax(), clamp(). Muchas veces ni siquiera hace falta un media query: repeat(auto-fit, minmax(280px, 1fr)) decide sola cuántas columnas caben.
Mobile first. Escribe primero el diseño de móvil y añade reglas para pantallas grandes, no al revés. Encoger un diseño de escritorio es mucho más difícil que ampliar uno de móvil, porque en móvil te ves obligado a decidir qué es imprescindible.
Ejemplo práctico
Al auditar esta misma web encontré tres desbordamientos horizontales que nadie había visto, y los tres son casos de manual.
En móvil, las fichas del diccionario se salían 31 píxeles. La causa era un <code> con una ruta larga dentro de una lista anidada. El texto entre comillas invertidas no parte por ningún sitio, así que empujaba la caja fuera de la pantalla. Afectaba a las 85 fichas de entonces. Una línea de CSS lo arregló: overflow-wrap: anywhere.
En tablet, la página de proyectos se salía 141 píxeles. Ahí el problema era otro: una rejilla de tres columnas que arrancaba a 768 px. La primera columna medía 360 px fijos, y sumando el resto no cabía en la pantalla de una tablet. La solución fue mover ese cambio de 768 a 1024 px.
Lo interesante de los dos casos es que ninguno se ve mirando la web en el ordenador, y ninguno da error. La página simplemente se puede arrastrar de lado, que es de las cosas que peor sensación dan en un móvil.
Para encontrarlos hay un truco que vale para cualquier web: comparar el ancho del documento con el ancho de la ventana. Si el primero es mayor, algo se sale.
document.documentElement.scrollWidth - window.innerWidth
Si eso da más de cero, tienes un desbordamiento.
Errores comunes
- Olvidar la etiqueta viewport. La web se ve minúscula en el móvil y no hay CSS que lo arregle.
- Probar solo redimensionando la ventana del ordenador. Ayuda, y no sustituye a mirarlo en un teléfono de verdad. Las fuentes, el teclado que sube y el rendimiento son distintos.
- Anchos fijos en píxeles. Un
width: 400pxen una pantalla de 390 px ya se sale. - Tapar el problema con
overflow-x: hiddenen el body. Esconde el síntoma, rompe elposition: stickyy deja el elemento culpable ahí, sin arreglar. - Objetivos táctiles pequeños. Un botón de 20 píxeles es cómodo con ratón e imposible con el dedo. El mínimo recomendado son 44 píxeles.
- Imágenes sin
max-width: 100%. Una imagen más ancha que la pantalla la desborda ella sola. - Puntos de ruptura pensados para dispositivos concretos. No pongas el corte "para iPhone": ponlo donde tu diseño empiece a verse mal.
Cuándo usarlo
Siempre. No hay proyecto web hoy en el que no aplique.
Lo que sí varía es cuánto esfuerzo dedicar a cada tamaño. Una herramienta interna que solo se usa en el ordenador de la oficina no necesita el mismo cuidado en móvil que una web pública. Pero funcionar, tiene que funcionar: tarde o temprano alguien la abre desde el teléfono.
