Diseño Web Adaptable: una nueva forma de pensar

Diseño Web Adaptable: una nueva forma de pensar

Debido a los múltiples terminales, en los últimos años los diseñadores web han buscado soluciones para adaptar sus interfaces a la diversidad de tamaños de pantalla y resoluciones de los dispositivos que actualmente usan el servicio web.

En un primer intento, optaron por realizar diversas versiones de los websites, adaptadas expresamente para determinadas resoluciones de pantalla; así nos encontrábamos con frecuencia, notas de pie de página que indicaban “Este sitio ha sido diseñado para una resolución de 1024×768px”, otra de 800x600, y posiblemente una versión para móviles invocada con algún subdominio como “m.sitio.com”. En este último caso, posiblemente el desarrollador se inspiraba en las características de su iPhone, obviando a quienes contaban con otros modelos.

Obviamente, este procedimiento era totalmente ineficiente, ya que incrementaba el tiempo de desarrollo y mantenimiento de cada versión, y se adaptaba a una muy limitada variedad de dispositivos.

 

One Web

En la búsqueda de soluciones, hacia el año 2008, el consorcio W3C recomendó lo que vino a llamarse “One Web”, el concepto que se basa en la idea de proporcionar, en la medida de lo posible, la misma información y servicios disponibles para todos los usuarios, independientemente del dispositivo que estos empleen. “One Web” se opone a la idea de separar la versión móvil de la de escritorio, simplemente debe adaptarse al contexto.

 

Responsive Web Design

Para el año 2010, Ethan Marcotte publicó un artículo donde describió los conceptos teóricos y prácticos fundamentales para realizar un diseño web siguiendo las ideas del “Diseño Web Adaptable” (del inglés, “Responsive Web Design”). La idea principal de esta técnica no es realizar gran cantidad de diseños para cada tipo de dispositivo, sino por el contrario ser más flexible, hacer un único diseño que sepa adaptarse a las necesidades del dispositivo en cuestión, y haciendo que la interacción con la aplicación sea realmente cómoda para el usuario.

El Diseño Web Adaptable, es un concepto que combina las nuevas avanzadas de HTML5, CSS3 y JavaScript, para crear diseños web fluidos que se pueden ampliar, contraer y reorganizar en función de cualquier tamaño de pantalla. Y todo con una versión única del código html.

Sin embargo el término “Responsive Web Design” no depende únicamente de códigos, es también usabilidad, y conlleva diseñar una experiencia para el usuario donde el contenido es lo más importante. Este término quiere aportar una filosofía para afrontar el nuevo concepto de diseño de páginas web. Una nueva forma de pensar para el diseñador.

El Diseño Web Adaptable es actualmente la tendencia más importante en el desarrollo web.

A nivel implementación Responsive Web Design tiene tres conceptos claves:

  • El primero se basa en el uso de los Media Queries que nos ofrece CSS3, permitiéndonos aplicar estilos condicionalmente, teniendo en cuenta parámetros de la pantalla.
  • El segundo, se trata del diseño web fluido, con la aplicación de medidas definidas en porcentajes que se ajustan a los anchos de pantalla.
  • Y el tercero, agrega una nueva metodología de diseño llamada “Mobile First”.

 

Mobile First

Mobile First es un concepto desarrollado por Luke Wroblewski, el cual señala la priorización del entorno móvil frente al escritorio a la hora de desarrollar experiencias de usuario.

Se trata de la práctica de desarrollar un diseño desde su forma más básica, planteándolo primeramente para la pequeña pantalla de un Smartphone, centrándose únicamente en el contenido, e ir definiendo estilos gradualmente desde la base. Luego se van añadiendo nuevas características, con el empleo de Media Queries y CSS3, en la medida que se va adaptando la presentación para Tablets y terminales de escritorio.

Los navegadores que no soporten esta tecnología recibirán el contenido simplificado.

El motivo esencial para aplicar esta técnica es alcanzar a más usuarios, obligar al diseñador a centrarse en los contenidos y funcionalidades que son los que van a marcar las necesidades del navegante, aprovechando el espacio disponible y los elementos primordiales, sacar provecho de las funcionalidades móviles como pueden ser la geolocalización o los eventos táctiles, y administrar conscientemente el peso de los elementos para conseguir el mejor rendimiento web.

 

En conclusión, la implementación del Diseño Web Adaptable aporta múltiples ventajas:

  1. Reducción de costos en el desarrollo, ya que el objetivo es único y claro con una sola implementación válida tanto para dispositivos de escritorio como dispositivos móviles.
  2. Gran eficiencia a la hora de realizar los procesos de mantenimiento y actualización del contenido.
  3. Mejora de la usabilidad, ya que la navegación por parte del usuario es mucho más cómoda, adaptándose la web al medio correspondiente facilitando la navegación.
  4. Ayuda al posicionamiento de la web en los rankings de buscadores debido al uso de una única URL que centraliza el tráfico, y se evita el contenido duplicado.
  5. El acceso a la web desde dispositivos móviles permite sacar beneficio de las funcionalidades de geolocalización y los eventos táctiles.

 

Santos D'Augusta
Vote: 
Average: 5 (2 votes)
Drupal - Drupal Commerce - HTML5 - CSS3