La constante evolución de los dispositivos móviles obliga a desarrolladores y diseñadores web a caminar a pasos agigantados para adaptarse a las necesidades del usuario y a optimizar la manera en la que se muestra el contenido web.

Thomas Mueller, Director de la Experiencia del Cliente en Siegel+Gale, agencia publicitaria basada en Nueva York, descubre en ClickZ, la última tendencia en diseño web para dispositivos móviles: el diseño adjustive que llega a complementar los dos pilares del diseño móvil: el diseño responsive (RWD) y el diseño adaptive (AWD).

Unos de los principales problemas que se encuentran los desarrolladores es que cada dispositivo móvil tiene su propia pauta de evolución: mientras algunos (los dispositivos portátiles móvil, como pulseras o relojes) se hacen cada vez más pequeños, otros son cada vez más grandes (Smartphones y Tablets). Y no cabe duda que el tamaño afecta la manera en la que nosotros consumimos el contenido en nuestros móviles. La experiencia del usuario no es la misma, así que ya no es suficiente que el diseño sea solo responsive o adaptive.

adjustive3

¿Qué es el diseño web responsive (RWD)? 

La técnica fue creada y difundida por el diseñador norteamericano Ethan Marcotte a partir de una serie de artículos en A List Apart,una publicación especializada en diseño y desarrollo web, idea que luego extendería en su libro Responsive Web Design. En este tipo de diseños siempre se envía el mismo contenido y es el propio dispositivo (ordenador, móvil, tablet, etc), el que realiza el trabajo de adaptar la visualización a la pantalla.

Entre sus características destacan:

  • Se abandonan los grids fijos y se pasa a layout con grids fluidos.
  • Se introducen las media queries en las propiedades de los Estilos CSS 3. (las media queries son una serie de órdenes que se incluyen en la hoja de estilos que indica al documento HTML cómo debe comportarse en diferentes resoluciones de pantalla).
  • Se añaden meta-tags dentro del elemento header de la web que le diga al navegador que use el ancho del medio (por ejemplo, del móvil) como ancho de la web, anulando la escala inicial.

La principal ventaja de este tipo de técnica es que se suele necesitar un único diseño para todos los dispositivos, por lo tanto el coste de desarrollo suele ser menor. Pero no se podrá definir una estrategia móvil independiente y por otro lado, algunos dispositivos antiguos no se adaptan correctamente a estos diseños. Se suelen enviar muchos más datos de los que necesita el dispositivo para mostrar correctamente el sitio.

¿Qué es el diseño web adaptive (AWD)? 

El término fue acuñado por Aaron Gustafson , quien lo expuso en su libro “Adaptive Web Design” cuyo subtítulo es “elaboración de experiencias dinámicas con la mejora progresiva”. Es aquel que se realiza pensando exclusivamente en cómo quedará nuestro diseño en uno o varios dispositivos (por lo general móviles). En este tipo de diseños el servidor detecta el dispositivo que accede a la web y le envía el contenido adaptado al mismo.

Entre sus ventajas:

  • La velocidad de carga mejora al no enviar contenido innecesario.
  • Crear contenido altamente reutilizable.
  • Estructurar diligentemente.
  • Separar el contenido y las formas.
  • Mejora la experiencia web.
  • Elegir un sistema de gestión de contenido utilizable.

Pero se requieren diseños extra para cada dispositivo lo cual encarece bastante el trabajo.

Introduciendo el diseño web adjustive: prevalece la experiencia personal del usuario 

Cuando hablamos del lanzamiento acelerado de los nuevos dispositivos móvil, emergen 2 tendencias: más contenido para los dispositivos grandes (Smartphones y tabletas) y contenido más simple para los dispositivos pequeños. En el caso del diseño adaptive no habrá tantos problemas ya que adaptaremos el contenido para las funcionalidades del cada uno de los dispositivos,  pero ¿estará sufrientemente preparado el diseño responsive para la próxima era en  la experiencia del usuario?

Para adelantarse a este problema ha aparecido el diseño adjustive que tiene las siguientes características principales:

  • El contenido adaptable es la base de todo.
  • La exposición del contenido se ajustará a cada uno de los tamaños de la pantalla.
  • El usuario toma control: podrá mover de sitio algunos elementos del interfaz para adaptarse a su experiencia.

2 ejemplos, para hacernos una idea:

  • Las pantallas de los Smartphones y las tabletas son cada vez más largas y hacer el scroll de todo el contenido puede llegar a ser un problema. En la  mayoría de los casos, el header con el menú desplegable queda demasiado lejos y al usuario le “da pereza” volver para seguir navegando. El diseño adjustive habilita la opción con la que el usuario pueda colorar elementos importantes de su interfaz en posición que les permitiría que sean fácilmente localizables para su uso.

adjustive2

  • En cuanto a los pequeños dispositivos portátiles, su diseño de “joyas en miniatura” ha reducido enormemente el display de sus pantallas: en muchos casos el header con el menú desplegable queda totalmente en desuso. Gracias al diseño adjustive, se podrán esconder los elementos del interfaz que no son necesarios y maximizar así el espacio en la pantalla para el contenido adaptable. Por otro lado, el usuario podrá colocar el menú allí donde mejor le servirá. Aquellos dispositivos que no tienen display, podrán habilitar navegación alternativa a través de sonidos de navegación.

adjustive2

 

En resumen: Simple e intuitivo, el diseño adjustive se podrá entender como un update de los diseños responsive y adaptive, añadiéndoles el toque personal que da a la experiencia del usuario la distinción que necesita para usar a pleno rendimiento su dispositivo móvil.

vía ClickZ