Páginas de eventos responsivas

La mayoría de los visitantes llegan a un evento desde un móvil: una publicación social, un mensaje, un póster escaneado. Esta es la revisión que decide si la página funciona allí.

Prueba correctamente

1. Usa un teléfono real, no una vista previa de escritorio.
2. Usa una ventana privada, para que veas el estado del visitante.
3. Prueba con datos móviles además de con Wi‑Fi.
4. Prueba en un teléfono pequeño, no solo en uno grande.

La página de evento individual

• [ ] El título del subencabezado es legible sobre la imagen y no se recorta de forma extraña.
• [ ] Las categorías bajo el título se pueden leer.
• [ ] El bloque de fecha se lee con claridad.
• [ ] La barra lateral de detalles se apila de forma sensata en lugar de saturar el contenido.
• [ ] El lugar y el organizador se ajustan sin romper el diseño.
• [ ] El enlace de teléfono es táctil y realiza la llamada.
• [ ] Add to my calendar es accesible.
• [ ] Los botones de enlace adicionales se apilan y sus etiquetas no se truncan.
• [ ] El botón de registro ocupa todo el ancho y es evidente.
• [ ] La indicación de plazas restantes se lee con claridad.
• [ ] Las flechas anterior/siguiente se pueden usar o se ocultan, sin solaparse con el contenido.
• [ ] La introducción es lo bastante breve para leerse antes de hacer scroll.
• [ ] Las tarjetas de contenido relacionado se apilan limpiamente.

El formulario de registro

El formulario se abre en un modal, que es la superficie más ajustada del sitio:

• [ ] El modal se ajusta a la pantalla sin scroll horizontal.
• [ ] Todos los campos son accesibles con el teclado abierto.
• [ ] La casilla de consentimiento y su texto se pueden leer.
• [ ] El botón de envío es visible sin tener que buscarlo.
• [ ] Los mensajes de éxito y error son visibles tras enviar.
• [ ] El modal se puede cerrar.

Prueba con el teclado en pantalla abierto. Un modal que se ajusta con el teclado cerrado puede ocultar su propio botón de envío cuando no lo está.

El formulario de búsqueda

• [ ] La columna de filtros se apila por encima de los resultados y no los empuja fuera de la pantalla.
• [ ] El selector de fecha se puede usar con un dedo.
• [ ] Las listas de casillas son táctiles y los términos anidados se distinguen entre sí.
• [ ] Los elementos de resultado son legibles: imagen, título, fecha, lugar.
• [ ] Load more events es accesible.
• [ ] El cargador aparece mientras se cargan los resultados.

Si la columna de filtros domina la pantalla en un móvil, plantéate hide_calendar="yes" para esa página. Consulta Ocultar el calendario de búsqueda.

El calendario

Una cuadrícula de mes es el elemento más difícil de hacer funcionar en un móvil:

• [ ] El mes se lee sin necesidad de pellizcar.
• [ ] Los títulos de los eventos son legibles en sus celdas.
• [ ] Las entradas son táctiles y abren el evento correcto.
• [ ] La navegación entre meses funciona con un dedo.

Si no supera la prueba, coloca el calendario en su propia página y mantén el formulario de búsqueda como listado principal.

Rendimiento

• [ ] La página de evento aparece rápidamente con datos móviles.
• [ ] Las imágenes no llegan notablemente después del texto.
• [ ] Los primeros resultados del formulario de búsqueda llegan lo bastante rápido para que se sienta responsivo.

Las imágenes de eventos son el peso habitual. Súbelas al tamaño al que las publicas.

El recorrido de pago

• [ ] Get access es táctil y evidente.
• [ ] El pago se completa en un móvil.
• [ ] La página de confirmación y su mensaje de inscripción se pueden leer.

Prueba toda la compra en un móvil al menos una vez. Es el recorrido con más pasos y menos espacio.

Cuándo realizar esta revisión

• Antes del lanzamiento, en un evento representativo.
• Después de cambiar los ajustes del evento individual.
• Después de una actualización del tema.
• Después de añadir un idioma, ya que el texto traducido tiene una longitud distinta.
• Periódicamente, porque con el tiempo aparecen eventos con títulos más largos y más contenido.