Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Datos de búsqueda

Buenas prácticas en Web Móvil: Ejemplos

The New York Times

Una sola columna, de ancho fijo a 480px.

Cabecera

Cabecera mínima (puede observarse en la captura de la Home):

  • Logo.
  • Publicidad: estorba un poco, pero es imprescindible.
  • Información rápida, la que el usuario buscará con más frecuencia: fecha, datos bursátiles, el tiempo. Cada bloque tiene un enlace de ampliación.
  • Buscador.
  • Barra de navegación: en este caso ocupa poco, ya que se despliega a petición del usuario (ver página siguiente).

Barra de navegación extendida

Captura de The New York Times: Barra de navegación extendida

Al ser tantas opciones las que era necesario mostrar se ha solucionado con un desplegable. De ese modo solo se muestra si el usuario lo desea.

Home

Captura de The New York Times: Home

Zona de contenido:

  • Un primer bloque con noticias destacadas: se proporciona imagen solo para la primera noticia, y texto solo para las dos primeras.
  • Segundo bloque con titulares de sección.

La información está bien organizada, ya que el orden de aparición es el que le va a resultar más útil a la mayor parte de los usuarios, a pesar del tiempo de carga y coste adicional que supondrá el seguundo bloque de contenido.

Pie de página y final de la Home

Captura de The New York Times: Pie de página, final de la Home

  • Navegación secundaria por encima del pie, con elementos de menor interés.
  • Login: quizá esté demasiado escondido.
  • Pie de página muy sencillo: información de copyright y cambio de tamaños de fuente (¿Quién va a hacer scroll hasta el final de la página para cambiar el tamaño de fuente?).

Noticia

Captura de The New York Times: Noticia (zona superior)

  • Titular: título de la noticia (destacado), autor y fecha de publicación.
  • Texto de la noticia.

Zona inferior

Captura de The New York Times: Noticia (zona inferior)

  • Herramientas: enviar por email, enviar a un teléfono, etc.
  • Navegación relacionada con la noticia:
    • Enlace para volver a la página anterior.
    • Enlaces a noticia anterior y noticia siguiente.
    • Enlaces a secciones.

Información del sitio