Optimización móvil

Telar v0.4.0+ incluye una adaptación completa para móviles y tabletas, para que las exposiciones narrativas funcionen bien en cualquier tamaño de pantalla.

Panorama del diseño adaptable

Telar aplica un enfoque de diseño centrado primero en móviles con:

Diseños fluidos que se ajustan a cualquier tamaño de pantalla
Navegación optimizada para toque y gestos
Tipografía optimizada para la lectura en pantallas pequeñas
Mejoras progresivas que aprovechan el espacio adicional en pantallas grandes

Visor de historias en móviles

La experiencia del visor de historias está especialmente optimizada para dispositivos móviles:

Adaptaciones de diseño

División visor/panel:

Escritorio: Disposición en paralelo con el visor a la derecha y la narración a la izquierda
Móvil: Diseño apilado con transiciones suaves entre el visor y el contenido

Navegación:

Escritorio: Botones estándar Previous/Next
Móvil: Botones más grandes y colocados de forma ergonómica (objetivos táctiles mínimos de 45px)

Funciones específicas para móviles

Carga esquelética (skeleton loading): Al navegar entre pasos en móviles aparece un efecto sutil de brillo mientras se inicializa el visor; ofrece una señal visual de que el contenido se está cargando.

Precarga optimizada:

Escritorio: Precarga 3 pasos hacia adelante y 2 hacia atrás
Móvil: Precarga 2 pasos hacia adelante y 2 hacia atrás (precarga más agresiva para una experiencia más fluida)

Transiciones más rápidas: En móviles se usan transiciones solo con fundidos, sin animaciones de deslizamiento, para acelerar la navegación.

Niveles adaptativos basados en altura

Telar usa un sistema de cuatro niveles que se adapta tanto al ancho como a la altura de la pantalla:

Nivel 1 (≤700px de alto)

Reducción de tipografía del 10-15%
Mantiene todas las funciones activas

Nivel 2 (≤667px de alto - iPhone SE)

Reducción de tipografía del 20-25%
Relación visor-panel de 55vh:45vh
Optimizado para teléfonos pequeños

Nivel 3 (≤600px de alto)

Reducción de tipografía del 30-35%
Compresión máxima para dispositivos muy pequeños

Detección de doble eje: Estos niveles solo se activan en pantallas estrechas (ancho < 768px) para evitar afectar ventanas bajas en escritorio.

Optimización de paneles

Los paneles laterales se adaptan automáticamente a los dispositivos móviles:

Ajustes de tamaño

Paneles en escritorio:

Capa 1: 40% de ancho
Capa 2: 55% de ancho
Glosario: 45% de ancho

Paneles en móviles:

Ancho completo con posicionamiento optimizado
Menor padding y márgenes
Tamaños de fuente reducidos para mayor densidad de contenido

Escalado tipográfico

Todo el contenido de los paneles disminuye en móviles:

Encabezados: reducción del 15-25%
Cuerpo del texto: reducción del 10-15%
Interlineado: más compacto para aprovechar la altura disponible

Interacciones táctiles

Objetivo mínimo: 45px × 45px para cualquier elemento interactivo
Gestos de deslizamiento: Desliza hacia abajo para cerrar paneles
Zonas táctiles: Áreas generosas para botones y enlaces

Galería de objetos

La galería de objetos cambia automáticamente a una disposición de una sola columna en móviles (pantallas ≤767px):

Escritorio: Cuadrícula de varias columnas Tableta: Cuadrícula de 2 columnas Móvil: Lista de una sola columna

Así, las miniaturas y los metadatos siguen siendo legibles en pantallas pequeñas.

Índice del glosario

El listado de términos del glosario ajusta los espaciados en móviles:

Márgenes reducidos (33-50% menos)
Encabezados por letra más compactos
Objetivos táctiles optimizados para los enlaces de términos

Prueba tu sitio en dispositivos móviles

Herramientas de desarrollo en el navegador

Utiliza las herramientas de desarrollo del navegador para probar el comportamiento adaptable:

Chrome:

Abre DevTools (F12)
Haz clic en el ícono de barra de herramientas de dispositivos
Selecciona un preajuste de dispositivo o ingresa dimensiones personalizadas
Prueba distintos tamaños y orientaciones

Firefox:

Abre DevTools (F12)
Haz clic en Responsive Design Mode
Prueba varios dispositivos

Pruebas en dispositivos reales

Procura probar en hardware real cuando sea posible:

iOS: Safari en iPhone (varios tamaños)
Android: Chrome en diferentes equipos
Tableta: iPad y tabletas Android

Tamaños de pantalla comunes para probar

iPhone SE: 375 × 667px
iPhone 12/13/14: 390 × 844px
iPhone 12/13/14 Pro Max: 428 × 926px
iPad: 768 × 1024px
Samsung Galaxy S: 360 × 740px
Samsung Galaxy Note: 412 × 915px

Mejores prácticas de contenido para móviles

Selección de imágenes

Para el visor de historias:

Asegúrate de que las imágenes IIIF tengan suficiente detalle al hacer zoom
Verifica que los elementos clave sean visibles en pantallas pequeñas
Revisa cómo se ven las coordenadas en los viewports móviles

Para los widgets:

Usa imágenes de tamaño adecuado (evita archivos exageradamente grandes)
Mantén las leyendas concisas y legibles

Contenido de texto

Narrativas de la historia:

Mantén los párrafos cortos (3-5 oraciones)
Emplea viñetas y listas para facilitar la lectura rápida
Divide secciones largas con subtítulos

Contenido de los paneles:

Prioriza la información esencial en la capa 1
Mueve los detalles complementarios a la capa 2
Considera que las personas usuarias móviles pueden no explorar todas las capas

Uso de widgets

Los widgets funcionan bien en móviles, pero sigue estas recomendaciones:

Carruseles:

Usa máximo 3-5 imágenes para cuidar el rendimiento
Mantén las leyendas breves
Comprueba que las imágenes tengan dimensiones amigables para móviles

Pestañas:

Limítate a 2-3 pestañas (4 puede sentirse aglomerado en móviles)
Usa etiquetas cortas (1-2 palabras)

Acordeones:

Son ideales para móviles (revelan contenido progresivamente)
Usa títulos claros y descriptivos
Mantén el contenido de cada panel enfocado

Optimización de rendimiento

Optimización de imágenes

Para imágenes locales:

Comprime antes de subir (objetivo < 2 MB por imagen)
Usa formatos adecuados (JPEG para fotos, PNG para gráficos)
Deja que las teselas IIIF manejen la carga progresiva

Para IIIF externo:

Prefiere instituciones con servidores rápidos
Prueba la velocidad de carga del manifiesto
Considera imágenes de respaldo para conexiones lentas

Consideraciones de ancho de banda

Las personas en móviles suelen tener datos limitados o medidos:

Mantén el peso de la página razonable (< 3 MB por página)
Aprovecha la carga progresiva de IIIF
Minimiza imágenes innecesarias en los paneles

Límites de GitHub Pages

Ten presentes los límites de GitHub Pages:

1GB de almacenamiento
100GB de ancho de banda mensual
Para sitios móviles con mucho tráfico, evalúa un hosting alterno

Accesibilidad

La optimización móvil incluye consideraciones de accesibilidad:

Objetivos táctiles

Todos los elementos interactivos cumplen la guía WCAG 2.1 para objetivos táctiles mínimos (44px × 44px; Telar usa 45px × 45px).

Compatibilidad con lectores de pantalla

HTML semántico para navegación adecuada
Etiquetas ARIA en elementos interactivos
Enlaces de salto para navegación con teclado

Contraste de color

Todos los temas mantienen relaciones de contraste WCAG AA tanto en escritorio como en móvil.

Limitaciones conocidas

Navegación de historias en móviles

Pantallas muy pequeñas (<360px de ancho) pueden sentirse saturadas
La orientación horizontal en teléfonos no está optimizada
Algunas coordenadas IIIF complejas pueden requerir ajustes para móviles

Variaciones entre navegadores

Safari en iOS tiene políticas estrictas de reproducción automática de medios
Algunos navegadores de Android manejan las teselas IIIF de forma distinta
Prueba siempre en los dispositivos objetivo

Mejoras futuras

Planeadas para versiones próximas:

Navegación por gestos (deslizamiento entre pasos)
Mejor soporte en orientación horizontal
Capacidades de aplicación web progresiva (PWA)
Visualización sin conexión para exposiciones descargadas

Solución de problemas

Contenido desbordado

Si el contenido se desborda en móviles:

Revisa si hay elementos de ancho fijo en tu CSS personalizado
Verifica que las imágenes tengan max-width: 100%
Prueba en las herramientas de desarrollo del navegador

La navegación no funciona

Si la navegación falla en móviles:

Limpia la caché del navegador
Prueba en modo privado/incógnito
Revisa la consola de JavaScript en busca de errores
Verifica que tu código personalizado no bloquee eventos táctiles

Rendimiento lento

Si el sitio se siente lento en móviles:

Reduce el tamaño de los archivos de imagen
Comprueba los tiempos de respuesta de los manifiestos IIIF
Prueba con conexiones lentas (DevTools permite limitar la red)
Considera reducir el número de pasos en la historia

Lista de verificación de pruebas

Usa esta lista al probar la visualización en móviles: