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

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: