Imaginemos a un encargado de obra. Está junto a una pila de chapas de cubierta, con el teléfono en una mano y un guante de trabajo en la otra, y tiene que comprobar rápido el grosor y el recubrimiento con lo que hay en el sitio del proveedor. En el ordenador el proveedor tiene una tabla de características estupenda, de ocho columnas. En el teléfono de ella quedan columnas estrechas en las que los números se parten de uno en uno.
El encargado intenta ampliar la pantalla, la tabla se va hacia un lado y se pierden los títulos de las columnas. La sección de certificados, que en el ordenador estaba justo debajo de la tabla, alguien la ocultó en algún momento en la versión móvil para que la página fuera más corta. Al final la persona hace lo más sensato en su situación: llama al gestor. El sitio es adaptable en lo formal. Usarlo desde el teléfono es casi imposible.
Qué significa un sitio adaptable
Un sitio adaptable se recompone según el ancho de la pantalla: las columnas se ponen una bajo otra, el menú se esconde en un botón y las imágenes se reducen. Tilda, según la ayuda de la versión móvil, lo hace automáticamente en los bloques estándar. Pero recomponer la rejilla es solo la mitad del trabajo. La otra mitad es que, después de recomponer, la persona pueda hacer en el sitio todo lo mismo que en el ordenador.
El W3C formula bien esta idea en la explicación del criterio 1.4.10 «Recomposición»: el contenido debe mostrarse sin pérdida de información ni de funcionalidad, sin desplazamiento en dos direcciones, con un ancho equivalente a 320 píxeles CSS. Un detalle curioso: esos 320 píxeles corresponden a una pantalla de 1280 píxeles de ancho con un zoom del 400%. No se trata solo de teléfonos, sino también de quienes amplían la página en el ordenador para leerla.
Lo digo de entrada: superar esta prueba todavía no hace cómodo el sitio. Es el mínimo, y la conversación sobre la comodidad empieza después.
Tablas y filtros: lo que no se puede solo comprimir
El W3C reconoce directamente que cierto contenido no se puede recomponer en una columna sin perder el sentido. Las tablas de datos, los mapas, los esquemas y el vídeo necesitan una disposición en dos dimensiones, y para ellos hay una excepción. Pero la excepción alcanza solo a la tabla misma. El título de encima, la búsqueda, la paginación y el texto de alrededor deben recomponerse con normalidad, y el W3C propone mostrar la tabla en su propio contenedor con desplazamiento, para que se vaya hacia un lado ella y no toda la página.
En un catálogo esto se nota especialmente. Una tabla de características de ocho columnas puede seguir siendo tabla, pero entonces la primera columna conviene que sea aquello por lo que la persona busca, y que quede fija. A veces funciona mejor otro formato: una ficha en la que las características van en lista, «parámetro — valor». Los filtros que en el ordenador están en una columna a la izquierda suelen pasar en el teléfono a un panel aparte, y está bien que, tras elegir, la persona vea cuántos productos quedan y cómo quitar el filtro. Si el catálogo aún se está proyectando, estas decisiones es más fácil dejarlas en la estructura de la tienda online desde el principio que ajustarlas luego a la pantalla.
Ocultar un bloque es decidir que esa información no hace falta
En Tilda el bloque tiene el ajuste «Rango de visibilidad en dispositivos». Según la ayuda, sirve para que en móviles y ordenadores se muestren bloques distintos. Es una posibilidad útil: se puede mostrar en el teléfono un esquema simplificado en lugar de una infografía ancha, u otra composición de la primera pantalla.
El peligro es que «mostrar otra cosa» se convierte fácil en «no mostrar nada». El bloque se ocultó porque se veía mal en el teléfono y el reemplazo no se hizo. El W3C tiene para esto una formulación de error aparte: el contenido desaparece y deja de estar disponible después de la recomposición. Me parece que cada bloque oculto en el teléfono hay que comprobarlo con una pregunta simple: ¿dónde va a encontrar ahora esa información quien entra desde el móvil? Si no hay respuesta, los certificados no le llegarán a nuestro encargado.
El teléfono no es una pantalla de reserva
Si una parte importante de los visitantes llega desde el teléfono, la versión móvil conviene proyectarla a la vez que la principal: decidir cómo se comportarán tablas, filtros y formularios antes de que todo eso esté dibujado para un monitor grande.
Texto grande y elementos fijos
La adaptabilidad se suele comprobar en un teléfono con el tamaño de letra normal. Pero el tamaño del texto es fácil de aumentar en los ajustes del sistema o del navegador. En la explicación del W3C se habla aparte de la relación con el criterio 1.4.4: incluso con la recomposición, todo el texto debe poder ampliarse al menos hasta el 200%. Un botón cuya leyenda cabía justa en una línea, con la letra más grande se corta o se monta sobre el de al lado.
El segundo problema frecuente son los elementos fijados. La cabecera, la placa con el teléfono, el botón del mensajero y el banner de una oferta ocupan poco cada uno. En una pantalla pequeña o con zoom, juntos pueden tapar media página. El W3C aconseja con insistencia que en pantallas estrechas esos elementos sean normales, sin fijar, o que la persona pueda ocultarlos.
Cómo está hecho esto en Tilda
Los bloques estándar de Tilda, según la ayuda, tienen ajustes aparte de tipografía y márgenes para la versión móvil, y parte de los bloques tiene además ajustes móviles de los elementos. Si la adaptabilidad estándar no basta, el bloque se puede convertir en Zero Block y ajustar el aspecto a mano en cinco rangos de ancho de pantalla o en los propios. Pero la ayuda advierte: después de la conversión el contenido y el diseño vuelven a los ajustes por defecto, y el texto y las imágenes hay que añadirlos de nuevo. También existe el extremo contrario: una casilla que desactiva la adaptabilidad, y entonces en el teléfono la página se ve igual que en el ordenador.
Otro detalle de la misma ayuda: cambiar la vista en el editor no es una vista previa completa, y algunos bloques se ven distintos en la página publicada. Por eso la versión móvil yo la comprobaría en la vista previa y en un teléfono de verdad, mejor en dos distintos. En mis proyectos la adaptación a todos los dispositivos entra por defecto. Mirar el resultado es más útil con los ojos de ese mismo encargado.
A él, por cierto, no le hace falta un sitio que en el teléfono se vea tan vistoso como en el monitor. Le hace falta encontrar el grosor de la chapa y descargar el certificado sin quitarse el guante. Si eso sale, la versión móvil ha hecho su trabajo.