Ya habiamos escrito sobre como detectar un dispositivo móvil y hacer el redireccionamiento respectivo, en esta ocasión presentamos como adaptar una interfaz web para un dispositivo móvil.

Problema a resolver:  Tenemos una web diseñada y me  piden crear una versión adaptada para móviles.

La solución tiene que:

1. Mantener contenidos: No quieren tener que actualizar dos webs (cómodo para ellos)
2. Quieren que se mantenga la imagen de la web y de la entidad (nos permiten ciertas licencias)
3. Quieren que funciones todos los servicios  (flash?, ajax?, java?)

Por suerte:

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 hacemos entonces?

Tenemos claro que el interfaz gráfico es mucho más pequeño 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

Via: Inclusión