¿Cómo adapto un interfaz web para móvil?

Escuchar con webReader

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

La W3C nos da más recomendaciones,  pero muchas de ellas ya se evitan si seguimos los estándares para la creación de páginas webs (tablas, frames, popups, plugins externos…)

Me parece que este blog tiene mucho que mejorar para los móviles.


Lo más leído

¿Disfrutaste esta entrada? Por qué no dejas un comentario abajo y continúas la conversación, o te suscríbes a mi feed y obtienes los artículos como este enviados automáticamente cada día hacia tu lector de feeds.

Trackbacks & Pingbacks

[...] ¿Cómo adapto un interfaz web para móvil? [...]

[...] el aumento de conexiones desde dispositivos móviles cuya velocidad de transferencia de datos a es baja vuelve a crear las necesidad de optimizar las [...]

[...] en: Inclusión Esta entrada fue publicada el Lunes, 28 Junio , 2010 a las 12:45 pm y clasificada en Desarrollo [...]

Salon spray tan tips

¿Cómo adapto un interfaz web para móvil? » Inclusión. Accesibilidad y Usabilidad web.

laser hair regrowth helmet

¿Cómo adapto un interfaz web para móvil? » Inclusión. Accesibilidad y Usabilidad web.

[…] ¿Cómo adapto un interfaz web para móvil? […]

you can try this out

¿Cómo adapto un interfaz web para móvil? » Inclusión. Accesibilidad y Usabilidad web.

remo frame drum 22

¿Cómo adapto un interfaz web para móvil? » Inclusión. Accesibilidad y Usabilidad web.

celebrity dresses coupon code

¿Cómo adapto un interfaz web para móvil? » Inclusión. Accesibilidad y Usabilidad web.

spray tanning booth equipment

¿Cómo adapto un interfaz web para móvil? » Inclusión. Accesibilidad y Usabilidad web.

野球ス 軟式用b号球 中学生用

¿Cómo adapto un interfaz web para móvil? » Inclusión. Accesibilidad y Usabilidad web.

Marine Nz

¿Cómo adapto un interfaz web para móvil? » Inclusión. Accesibilidad y Usabilidad web.

additional hints

¿Cómo adapto un interfaz web para móvil? » Inclusión. Accesibilidad y Usabilidad web.

hcg weight loss tracking sheet

¿Cómo adapto un interfaz web para móvil? » Inclusión. Accesibilidad y Usabilidad web.

bodycon dresses Big cartel Themes

¿Cómo adapto un interfaz web para móvil? » Inclusión. Accesibilidad y Usabilidad web.

self tan uk

¿Cómo adapto un interfaz web para móvil? » Inclusión. Accesibilidad y Usabilidad web.


Comentarios

He aquí uno de mis beneficios favoritos de la maquetación con estándares: la independencia del dispositivo.

De todas formas, lo que más me quita el sueño es la gestión de las imágenes en la versión móvil, por ejemplo en mi wordpress. Aunque desde la css puedes gestionar el tamaño de la presentación, obviamente la imagen pesa lo mismo.

A lo mejor ya existe, pero si no estaría genial un plugin que creara una vesión de las imágenes del contenido para la versión móvil en el momento de subirlas y que en la configuración del theme indicases qué tipo de imágenes quieres mostrar.

<!–
// XHTML should not attempt to parse these strings, declare them CDATA.
/* */
//–>

El wordpress dispone de un plugin que crea thumbnails con el tamaño que necesitas en cada página.

Se llama timthumb, es muy útil para estas cosas ya que transforma la imagen antes de mostrarla.

Espero que te ayude.

Nice post. I used to be checking continuously this weblog and I am impressed!
Extremely useful information particularly the last part :)
I maintain such information much. I used to be looking for this certain info for a
long time. Thanks and good luck.

Deja un comentario

Saltos de línea automáticos, la dirección de email nunca será publicada, HTML permitido: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

(requerido)

(requerido)


Desarrollado por Hacce . paginas web vigo, paginas web galicia, Coruña, Santiago