Buenas prácticas en Web Móvil: Ejemplos
Flickr
URL: http://m.flickr.com
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

- 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

- 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

- 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

- 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

- 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).








