Sígueme en Twitter: twitter.com/angeletti

Mis favoritos en delicious.com/angeletti

Contactos Profesionales y currículum en linkedin

Diseñando para dispositivos móviles: Responsive Web Design y Hand per Device

Clasificado como Diseño, Noticias, programacion, Tablets Pc el oct 11th, 2011 | 2 comentarios

Una de las tendencias en el diseño web para dispositivos móviles (smartphones, tablets, etc…) es el “Responsive Design” o “Diseños webs sensibles”, que no es más que la respuesta a la gran fragmentación de dispositivos, cada uno con una resolución y características de pantalla propias.

Como indican el artículo de genbetadev, el “Responsive Design” es una forma de diseñar las webs usando diseños flexibles que se adaptan a los dispostivos, incluso cambiando la distribución de los elementos usando técnicas de diseños fluidos (tamaños de los objetos proporcionales), mediaquerys (carga de css según característica del dispositivo) y adaptación del tamaño de las imágenes. Se busca realizar diseños que se adapten tanto a una pantalla de escritorio, portatil, smartphone y tablets. Una labor que me antoja casi imposible. Como con muchos diseños fluidos te das cuenta de que para que se vea “decente” a todos los tamaños, no se a ver bien en ninguno.

Usar “Responsive Web Design” en una horquilla tan grande de dispositivos es demasiado complicado y olvidamos que no se trata solamente de un cambio de diseño por dispositivo sino que cada uno de ellos se usa de forma diferente y se le da usos diferentes. Ahí dónde nos va a ayudar un concepto tan sencillo como el “Hand por Device” o “Manos por dispositivo”, haciendo subgrupos en os que si podremos aplicar técnicas de “Responsive design”.

Hugo Manilla habla del concepto “Hand per Device” en su presentación: HANDS PER DEVICE. An Alternative approach to optimizing web content delivery and interaction for multiple plataforms (descarga en PDF)

El concepto es sencillo: segmentar los tipos de dispositivos por “manos necesarias para controlarlo”, por lo que al final nos quedaría 4 grandes grupos:

Ordenadores Personales: de sobremesa, portátiles, netbooks, etc…
Tablets: iPads, tablets androids, etc…
Smartphones: Androids, iPhones, etc…
Set Top boxes: televisores con conexión a internet, apples Tv, etc…

Cada uno de los grupos tiene en común la forma en que controlamos el dispositivo: teclado y ratón en el caso de los ordenadores de sobremesa, pantallas táctiles en tablets y smartphones pero con distinto tipo de pantallas y mando a distancia y pantallas grandes, usando mínimo scroll.

Son 4 grupos muy diferenciados en los que varía mucho el tipo de tecnología que podemos utilizar, por lo que una adaptación solamente basada en CSS y diseño fluido se queda corta, siendo necesarios desarrollos un poco más complejos pero en los que podemos aprovechar el tipo de uso y navegación de cada dispositivo y así crear experiencias de usuario más ricas para cada uno de ellos.

Enlaces:

Diseñando para dispositivos móviles: Responsive Web Design y Hand per Device

Artículos relacionados: