Diseño web responsive

El diseño web responsive es la técnica que hace que una misma web se adapte al tamaño de cualquier pantalla, desde un móvil pequeño hasta un monitor grande, reorganizando textos, imágenes y menús para que todo se lea bien y se pueda manejar con el dedo.

Cómo funciona por dentro

Una web responsive se apoya en tres mecanismos que trabajan juntos. El primero es la rejilla fluida: las columnas se definen en porcentajes en lugar de en píxeles fijos, de modo que se estiran o se encogen con la ventana. El segundo son las imágenes flexibles, que nunca superan el ancho de su contenedor y se sirven en varios tamaños para que un móvil no descargue una foto pensada para pantalla de escritorio. El tercero son las media queries, unas reglas de la hoja de estilos que dicen al navegador qué maquetación aplicar a partir de determinado ancho.

Esos anchos donde la maquetación cambia se llaman puntos de ruptura. Lo razonable es fijarlos donde el diseño empieza a romperse, no en las medidas exactas de los móviles de moda, que cambian cada año.

Hoy la forma habitual de trabajar es empezar por el móvil y ampliar después, no al revés. Diseñar primero la pantalla pequeña obliga a decidir qué es imprescindible, y todo lo que sobra en un móvil suele sobrar también en un ordenador.

Responsive, adaptativo y web móvil aparte

Se confunden tres enfoques distintos. El responsive usa una sola web con un solo código que fluye de forma continua según el ancho disponible. El diseño adaptativo prepara varias maquetaciones fijas y sirve la que más se acerca al dispositivo detectado, con saltos bruscos entre una y otra. La web móvil separada mantiene dos sitios distintos, uno en el dominio principal y otro en un subdominio del tipo m punto.

La tercera opción está prácticamente abandonada porque duplica el trabajo de mantenimiento y reparte la fuerza de posicionamiento entre dos direcciones. El adaptativo sobrevive en algunos entornos concretos. Para una pyme, la respuesta sensata casi siempre es responsive.

Qué revisa Google y qué nota el visitante

Google rastrea e indexa las webs con su robot para móvil desde 2019, así que la versión que decide tu posición es la que se ve en un teléfono. Si un contenido existe en escritorio pero está oculto o eliminado en móvil, para Google ese contenido no cuenta.

En España, más de dos tercios de las visitas a webs de pyme llegan desde un teléfono, y esa proporción sube en sectores como restauración, servicios locales y moda. Un visitante que llega desde una búsqueda en el móvil y encuentra un texto minúsculo, un botón imposible de pulsar o un formulario que se descoloca, se marcha en segundos y vuelve a los resultados.

Hay detalles que marcan la diferencia y no se ven en un mockup: que las zonas pulsables midan al menos 44 píxeles de lado, que el cuerpo de texto no baje de 16 píxeles, que los formularios abran el teclado numérico cuando piden un teléfono y que el número de contacto sea un enlace que llame al tocarlo.

Ejemplo: una casa rural en la Alpujarra

Un alojamiento de seis habitaciones tiene una web de 2016 que funciona bien en ordenador. El 78 por ciento de sus visitas llega desde el móvil, y de esas, la mitad se va antes de los diez segundos.

El repaso en un teléfono real explica el problema. La portada muestra un vídeo de fondo de 14 megas que tarda una eternidad con cobertura irregular, algo habitual en la zona. El menú se despliega en horizontal y se corta por la derecha, de modo que la sección de tarifas queda fuera de pantalla. El formulario de reserva tiene los campos tan juntos que resulta imposible acertar sin ampliar. Y el teléfono aparece como imagen, así que no se puede pulsar para llamar.

La reconstrucción se hace pensando primero en la pantalla pequeña. El vídeo se sustituye por una imagen ligera con carga diferida del resto de fotos. El menú pasa a un desplegable con las cinco secciones y con el botón de reservar siempre visible en la parte inferior. El formulario se reduce de nueve campos a cuatro, con teclados adecuados a cada dato. El teléfono se convierte en un botón de llamada directa.

Tres meses después, la web carga en 2,4 segundos en móvil frente a los 9 anteriores, la proporción de visitantes que se marchan de inmediato baja del 61 al 34 por ciento y las reservas directas desde el móvil se multiplican por tres, lo que reduce la dependencia de los portales de reservas y su comisión.

Errores frecuentes

• Comprobar la web solo en el ordenador reduciendo la ventana del navegador. Sirve para ver la maquetación, pero no reproduce ni la velocidad de la red móvil ni el tamaño del dedo.
• Ocultar contenido en móvil para que quepa. Lo que se esconde deja de contar para el posicionamiento y suele ser justo lo que el visitante buscaba.
• Servir la misma imagen enorme a todos los dispositivos. Es la causa número uno de webs lentas en teléfono.
• Poner menús desplegables que se abren al pasar el cursor. En una pantalla táctil no existe el cursor, así que esos submenús quedan inaccesibles.
• Descuidar las tablas y los catálogos con muchas columnas. Necesitan una solución propia en pantalla estrecha, no un desplazamiento lateral imposible.
• Instalar una plantilla que dice ser responsive y darlo por hecho. La plantilla lo será; el contenido que se le mete encima, no necesariamente.
• Olvidar las ventanas emergentes. Un aviso a pantalla completa que no deja ver el botón de cerrar en móvil penaliza doblemente, ante el visitante y ante Google.

Qué exigir en un proyecto nuevo

Cualquier presupuesto de web debe incluir el comportamiento responsive como parte del trabajo, no como extra. Conviene pedir que la revisión final se haga en dispositivos reales, con al menos un Android de gama media y un iPhone, y que se acompañe de una medición de velocidad en conexión móvil, no solo en la fibra de la oficina.

Hay tres comprobaciones que cualquier persona puede hacer sin conocimientos técnicos antes de dar por buena una web. La primera, abrirla en el móvil con los datos móviles activados y el wifi apagado, y cronometrar cuánto tarda en verse algo legible. Por encima de tres segundos, hay trabajo pendiente. La segunda, intentar completar el proceso que da dinero al negocio, ya sea comprar, reservar o pedir presupuesto, usando solo el pulgar y sin ampliar la pantalla en ningún momento. La tercera, girar el teléfono a horizontal y comprobar que nada se rompe, porque mucha gente consulta tablas y galerías así.

Conviene además repetir estas pruebas cada vez que se instala un plugin nuevo o se cambia la plantilla. Buena parte de las webs que dejan de funcionar bien en móvil no nacieron mal: se estropearon con una actualización que nadie revisó en un teléfono.

En Ocelot el desarrollo web parte siempre de la pantalla pequeña y del comportamiento real de quien entra desde una búsqueda con prisa. Si tu web se ve correcta en el ordenador de la oficina pero las visitas desde el móvil no acaban en llamada ni en pedido, ahí suele haber más recorrido que en cualquier campaña.