Saltar al contenido principal

Encabezado principal de una web de eventos: una primera pantalla útil

El encabezado principal es la primera sección de una página de evento, pero no constituye todo el recorrido de inscripción. Quien llega por primera vez debe poder reconocer qué es el evento, cuándo y dónde sucede y qué hará el botón principal. Redacta esa respuesta con datos aprobados antes de elegir la foto o el diseño.

Equipo editorial de Boletolibre

Publicado

Un panel ancho de página y otro estrecho de teléfono muestran la misma jerarquía: líneas de título, símbolos de calendario y ubicación, bloque de acción principal y zona de imagen separada.
Conserva los datos del evento y la acción reconocibles al pasar de la pantalla ancha al móvil. Las formas muestran jerarquía, no una interfaz de plataforma.

1. Confirma los datos antes de escribir el titular

Nombra el evento con palabras que entienda alguien nuevo. Añade una línea breve sobre la experiencia o el público y después la fecha aprobada, la hora de inicio con zona horaria y el lugar o formato en línea. Si es una serie, identifica la edición o fecha que representa esta página; el lema permanente de la marca no sustituye al programa actual. Asigna responsable a cada dato que pueda cambiar.

Descargar la hoja editable de texto y publicación del encabezado (Markdown, en inglés)

2. Ordena claramente la primera pantalla

Usa el nombre del evento como título principal. Coloca cerca la fecha y el lugar concretos y una breve razón para asistir. Un lema decorativo puede apoyar esa explicación, pero no reemplazarla. Mantén la información esencial como texto de la página, en vez de dejar la única copia dentro de un cartel. Compara el orden en escritorio y móvil con la hoja antes de aprobar el diseño.

3. Haz que el botón principal corresponda al destino real

Elige una acción principal según el estado actual. «Elegir entradas» debe llevar al evento correcto o a la selección de fecha; «Unirse a la lista de interés» debe abrir un formulario real, no una caja de pago. Si hace falta otra acción, como consultar el programa o el acceso, dale una etiqueta distinta. Anota texto, URL de destino, responsable y fecha de prueba. W3C explica que la finalidad de un enlace debe entenderse por su texto o contexto determinable por programa.[1]

4. Prueba la página publicada, no solo el diseño

Abre la página pública en un móvil y en una pantalla ancha. Comprueba que fecha, lugar y botón sigan legibles, que el recorte de la imagen no oculte datos y que el texto se adapte sin desplazamiento horizontal. Si hay palabras sobre una foto, revisa el contraste en el recorte real; W3C identifica el contraste insuficiente sobre imágenes de fondo como un fallo de accesibilidad. Sigue el botón con teclado y como visitante nuevo; confirma que el destino muestre el mismo evento y el estado de venta vigente. Repite la revisión tras cambiar fecha, sede o enlace de entradas.[2][3]

Fuentes y lecturas

  1. Understanding ReflowW3C Web Accessibility Initiative · Consultado
  2. Failure F83: Background images without sufficient text contrastW3C Web Accessibility Initiative · Consultado