Buscar este blog

miércoles, 1 de junio de 2011

Adaptando la web para dispositivos mobiles



El día de hoy se nos a solicitado a parte de muchas otras cosas crear la interfaz mobil de nuestra web. Por lo que:

A tener en cuenta:
  1. La web está ya diseñada siguiendo los standards y con una hoja de estilos separada: Esto nos permitirá jugar con la imagen de manera más simple y adaptar aquello que nos interese sin tener que depender del código generado por el CMS
  2. No utiliza Flash, ni javascript, ni hay popups:  Muchos móviles no soportan los embed y tienen problemas con plugins y scripts.
  3. El gestor de contenidos tiene un sistema de plantillas: Lo que nos permitirá crear una plantilla adaptada si es necesario, sin cambiar para nada la actualización de contenidos.

¿Que podemos hacer entonces?

Tenemos claro que el interfaz gráfica es mucho más pequeña y las limitaciones son varias.
  1. Ancho máximo 120px: Consideramos que el ancho máximo es 120px (a tener en cuenta en las imágenes sobre todo)
  2. Rediseñamos la cabecera: Mantenemos el logo pero usamos una versión alargada, minimizando el espacio que ocupa.
  3. Estructuramos los bloques: Evitamos crear varias columnas, de manera que la lectura sea totalmente lineal, y las líneas lo más largas posibles.
  4. Cambiamos los mecanismos de navegación
    1. Utlizamos la miga de pan como elemento principal de navegación. Si es necesario creamos un menú con las mínimas opciones necesarias, pero siempre intentando que sea un línea.
    2. Movemos el menú principal al final de la página. Si alguien quiere ver toda la navegación, ahí la tiene.
  5. Ajustamos las imágenes: Ponemos solamente las imprescindibles, y si se puede las optimizamos este medio (más pequeñas, mínimo peso)
  6. Comprobamos las fuentes: las aumentamos para facilitar la lectura en las pantallas o las optimizamos probando en distintos navegadores móviles
  7. Usamos medidas relativas:  Evitamos siempre medidas absolutas para permitir que según sea la pantalla móvil se adapte todo el contenido.
  8. Evitamos el scroll horizontal

Estamos preparándonos para tener lista nuestra web.  Esperenlo!

No hay comentarios:

Publicar un comentario