Diseño web adaptable: una guía práctica
El diseño adaptable significa un solo sitio que funciona a cualquier anchura, no una versión móvil aparte. En la práctica casi todos los sitios son adaptables sobre el papel y están rotos en puntos concretos: una tabla que fuerza desplazamiento horizontal, una navegación que se come un tercio de la pantalla, un formulario que hace zoom de forma impredecible en iOS.
Esta guía cubre cómo abordarlo, dónde están los fallos reales y cómo probarlos.
Diseñe desde el extremo estrecho#
Empezar estrecho obliga a decidir prioridades. A 320 píxeles hay sitio para una cosa cada vez, así que hay que decidir cuál es; ensanchar un diseño después es sobre todo cuestión de dar más aire.
Ir al revés —diseñar a 1440 y luego quitar cosas— produce maquetaciones móviles que son el escritorio con piezas ocultas, y así es como el contenido importante acaba en display:none en el dispositivo que usa la mayoría.
- Empiece las maquetaciones a 320–360 px, los dispositivos reales más estrechos en uso común.
- Nunca oculte en móvil contenido que un visitante móvil necesita; muévalo o pliéguelo.
- Deje que el contenido decida los puntos de ruptura: ponga uno donde la maquetación se rompe, no en nombres de dispositivo.
- Pruebe con el tamaño de texto del navegador al 200 %: es un ajuste de accesibilidad común y rompe más maquetaciones que cualquier móvil.
Los puntos de ruptura con nombre de dispositivo envejecen mal. «Tableta» ha significado seis anchuras distintas en diez años; «el punto en el que la rejilla de tarjetas se ve fea» no cambia.
Los elementos que de verdad se rompen#
Un puñado de componentes explica casi todos los fallos de adaptabilidad, y son lo bastante previsibles como para comprobarlos a propósito.
| Elemento | Fallo | Solución |
|---|---|---|
| Tablas | Desplazamiento horizontal de toda la página | Contenedor con scroll, o reapilar como tarjetas con etiquetas de dato |
| Palabras o URLs largas | La página se desplaza de lado | overflow-wrap y min-width:0 en los hijos de flex y grid |
| Imágenes | Desbordan o desplazan la maquetación | max-width:100 %, atributos width y height explícitos |
| Navegación | Ocupa un tercio de la pantalla | Colapsar, o mover lo principal a una barra inferior |
| Formularios | iOS hace zoom y no vuelve atrás | Tamaño de fuente de al menos 16 px en los campos |
| Elementos fijos | Tapan el contenido al que anclan | Tenerlos en cuenta en scroll-padding y en el relleno del body |
| Ventanas modales | No se pueden cerrar en pantalla pequeña | A pantalla completa en móvil, con un control de cierre visible |
Imágenes y multimedia#
Las imágenes suelen ser lo más pesado de una página y la fuente más común de desplazamiento de la maquetación. Tres atributos arreglan casi todo y no cuestan nada.
- Ponga siempre los atributos width y height para que el navegador reserve el espacio antes de que llegue el archivo.
- Sirva formatos modernos —WebP o AVIF— con una alternativa donde aún haga falta.
- Use srcset y sizes para que un móvil descargue un archivo de tamaño móvil, no una imagen principal de 2000 px.
- Cargue en diferido las imágenes bajo la línea de flotación, y nunca la mayor visible: ese es su elemento LCP.
- Dé a la imagen principal fetchpriority="high" para que no quede en cola detrás de recursos decorativos.
- En imágenes de fondo fije una relación de aspecto para que el contenedor no colapse antes de cargar.
Táctil, no solo anchura#
La adaptabilidad no va solo de maquetación. Una ventana estrecha suele significar un dedo en vez de un ratón, y la entrada táctil tiene requisitos distintos que las consultas de medios por anchura no cubren por sí solas.
- Objetivos táctiles de al menos 44 × 44 px con espacio entre ellos; los enlaces contiguos de 30 px se pulsan mal constantemente.
- Nada importante detrás de hover: un menú solo con hover es inalcanzable al tacto.
- Use consultas pointer:coarse para quitar efectos de hover que se quedan pegados tras un toque.
- Mantenga las acciones principales al alcance del pulgar en móviles altos; la esquina superior derecha es la más difícil con una mano.
- Respete prefers-reduced-motion: el parallax y las transiciones grandes causan malestar real a algunas personas.
Preguntas frecuentes
¿Cuántos puntos de ruptura necesito?
Normalmente de tres a cinco, y deberían salir de su contenido y no de una lista de dispositivos. Añada uno donde la maquetación empieza a verse mal al ensanchar la ventana, no porque exista un móvil concreto. Los sitios con una docena de puntos de ruptura casi siempre están compensando una maquetación que no era fluida de partida.
¿Alguna vez es correcto un sitio móvil aparte?
Rara vez. Implica dos bases de código, dos juegos de URLs, dos despliegues y una relación canónica que mantener, y suele acabar con uno de los dos quedándose atrás en silencio. Los casos en que aún ocurre son sistemas heredados que no se pueden hacer adaptables, y aun así es un parche más que un plan.
¿Cómo pruebo bien el diseño adaptable?
La emulación de dispositivos del navegador detecta problemas de maquetación pero no el comportamiento táctil, de red ni de plataforma. Pruebe en al menos un Android real de gama media-baja y un iPhone, con datos móviles y no con el wifi de la oficina. Después repita las páginas clave con el tamaño de texto del navegador al 200 %, que es donde de verdad se desmoronan casi todas las maquetaciones.
¿Y las tablas de datos en móvil?
Dos opciones viables: meter la tabla en un contenedor con desplazamiento horizontal, con una pista visible y la primera columna fija, o reapilar cada fila como una tarjeta donde cada celda lleva su propia etiqueta de columna. El contenedor con scroll mantiene la comparación posible; el apilado en tarjetas se lee mejor. Elija según si los visitantes comparan filas o leen de una en una.
diseño web adaptableweb adaptada a móvilpuntos de rupturadiseño mobile firstimágenes adaptablesobjetivos táctiles
