Diseño web responsive: qué es y cómo adaptar tu web a móviles

Una web responsive es una sola web que reorganiza su contenido según el ancho de la pantalla. En un ordenador puede mostrar tres columnas, en una tablet dos y en un móvil una sola, con el menú recogido en un botón. El contenido y la dirección son los mismos, cambia la presentación.

Antes era habitual tener una versión móvil aparte, con otra dirección y menos contenido. Esa práctica casi ha desaparecido: mantener dos webs es más caro, divide los enlaces y confunde a los buscadores. Google indexa las webs a partir de su versión móvil, así que lo que no se ve bien en el teléfono pierde visibilidad también en los resultados.

El diseño responsive se apoya en cuatro piezas. La primera es la etiqueta viewport en la cabecera de la página, que indica al navegador del móvil que use el ancho real de la pantalla en lugar de simular un ordenador. La segunda son las rejillas fluidas, con anchos en porcentajes o en fracciones en lugar de píxeles fijos.

La tercera son las imágenes flexibles, que nunca superan el ancho de su contenedor y que, idealmente, se sirven en varios tamaños para que el móvil descargue una versión ligera. La cuarta son las media queries, reglas de estilo que se aplican solo a partir de cierto ancho de pantalla y permiten cambiar la disposición, el tamaño de letra o el menú.

Una buena práctica es diseñar primero para el móvil y añadir después las reglas para pantallas mayores. Obliga a priorizar el contenido y suele dar webs más ligeras.

Prácticamente todos los temas actuales de WordPress son responsive, y el directorio oficial lo exige a los nuevos temas. Aun así, conviene revisar cómo se comportan el menú, las tablas y las galerías en el móvil, que son los elementos que más fallan.

Las tablas anchas son el caso más delicado: en un móvil no caben. Las soluciones habituales son permitir el desplazamiento horizontal solo dentro de la tabla o convertir cada fila en una tarjeta. Las plantillas HTML5 modernas también son responsive, y suelen estar construidas sobre rejillas fluidas y media queries como las descritas.

El fallo más visible es el desplazamiento lateral: una imagen, una tabla o un bloque con ancho fijo que se sale de la pantalla y hace que toda la página se mueva hacia los lados. Otro clásico son los botones y enlaces demasiado pequeños o demasiado juntos, imposibles de pulsar con el dedo sin acertar al de al lado.

Las ventanas emergentes que ocupan toda la pantalla del móvil y no se pueden cerrar con facilidad irritan al visitante y los buscadores las penalizan. Y el texto demasiado pequeño, por debajo de lo cómodo para leer sin zoom, obliga a ampliar la página y rompe la experiencia.

Todos estos errores se detectan en pocos minutos recorriendo la web en un móvil real. Hazlo cada vez que añadas una sección nueva o cambies de tema.

Los puntos de corte son los anchos en los que el diseño cambia de disposición. No hace falta fijarlos según modelos concretos de teléfono o tableta, que cambian cada año. Lo práctico es estirar la ventana del navegador poco a poco y añadir un punto de corte allí donde el diseño empieza a romperse.

Con dos o tres puntos de corte bien elegidos se cubre la gran mayoría de pantallas. Más allá de eso, las rejillas fluidas y las unidades relativas se encargan de los anchos intermedios.