Outbook

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

Datos de búsqueda

Buenas prácticas en Web Móvil: Ejemplos

Flickr

Diseño de una sola columna, de ancho variable:

  • Cabecera mínima con el logotipo la información de login y la barra de navegación con las opciones más importantes.
  • Pie de página con la información de copyright y enlaces de navegación de menor importancia.

Home

Captura de Flickr: Home

  • En el contenido hay más opciones de navegación, las que resultan más útiles para iniciar la navegación, llegando a repetirse las de la barra de navegación de la cabecera.
  • Se observan pocas imágenes: el logo, la imagen de usuario y la flechita en los enlaces del contenido.

Listado de imágenes

Captura de Flickr: Listado de imágenes

  • Optimizado para pantalla táctil: enlaces grandes para pulsarlos con los dedos. Esto no impide ni dificulta su utilización con los botones direccionales en terminales no táctiles.
  • Se echa en falta la fecha de cada imagen del listado.
  • Paginación simple: solo botones de anterior y siguiente.
  • De nuevo se minimiza el número de imágenes y su tamaño.

Detalle de imagen

Captura de Flickr: Detalle de imagen

  • Imagen grande, que en este caso no supone inconveniente, ya que el usuario ya sabía que el contenido le resultaba interesante, y es un sitio dedicado a la fotografía.
  • Navegación entre imágenes con la vista previa de las mismas, fácil de utilizar.
  • Datos de la imagen: menos datos que en la versión normal, se echan de menos algunos datos, como la fecha.
  • Comentarios:
    • Si hay gran número de comentarios aparece una paginación: no se carga información que no interesa al usuario, la carga de la página es más rápida.
    • Posibilidad de insertar comentario (aunque pueda resultar incómodo siempre habrá usuarios que quieran comentar).
    • ‘How do I format my comment?’: desplegable con etiquetas HTML que se pueden utilizar. ¿Habrá alguien que las utilice comentando desde un dispositivo móvil?
    • Si se quiere comentar habrá que recorrer antes los comentarios (haciendo scroll vertical).
  • Puede aparecer también, bajo la foto, un comentario del autor.

Expansión de barra de navegación

Captura de Flickr: Expansión de barra de navegación

  • La opción ‘More’ da acceso a otras opciones importantes pero que por espacio no podían incluirse en la barra principal, pero que por su importancia no debían quedar relegadas al pie de página.
  • Está precargada en todas las páginas.

Imágenes destacadas

Captura de Flickr: Imágenes destacadas

  • Gran cantidad de imágenes (24), aunque sean pequeñas: el usuario probablemente sabía lo que iba a abrir, aunque sería interesante poder avisarle de algún modo.
  • Son del tamaño justo para poder pulsar el enlace con el dedo (pantallas táctiles).

Información del sitio