¿En qué se diferencian el diseño web fluido, adaptativo y responsivo?
Los distintos nombres de los métodos para crear sitios multipantalla están confundiendo a muchas personas, en esta nota explicamos en qué consiste cada uno y cómo diferenciarlos.
En IDA hemos notado que existe una gran confusión sobre los métodos para adaptar el diseño web a las distintas pantallas. Esto ocurre porque se trata de un tema relativamente nuevo y hay varios nombres y traducciones para cada técnica.
Uno de los errores más comunes es confundir el diseño responsivo con el adaptativo. Esto puede causar grandes problemas en la planificación de un proyecto, porque se trata de técnicas que dan un resultado visual muy distinto, ofrecen un nivel diferente de usabilidad y accesibilidad, y tienen costos variados en su producción e implementación.
Para evitar estos problemas, describimos en qué consiste cada técnica y cuáles son sus implicancias.
Diseño web líquido o fluido
En este tipo de diseño se usan porcentajes o ems (unidad de medida tipográfica) en vez de pixeles, para que los elementos se adapten según el ancho de la pantalla. Si bien el resultado puede parecer atractivo en pantallas medianas, como computadores de escritorio y tablets, se producen muchos problemas en las pantallas grandes y pequeñas. Por ejemplo, en televisores las imágenes se estiran mucho y en teléfonos los textos son difíciles de leer.
Como una forma de evitar estos errores, es posible fijar el ancho máximo y mínimo. El problema es que esto hace que aparezcan áreas en blanco en las pantallas grandes y barras de desplazamiento horizontal en las más pequeñas.
El diseño web elástico es otro método muy parecido al fluido. En este, el contenido crece junto al ancho del diseño para rellenar la pantalla. Si bien esto soluciona el problema de los textos ilegibles, mantiene todos los demás inconvenientes.
Antes todos los sitios web eran elásticos, ya que por defecto el HTML funciona de esta forma, pero los diseñadores prefirieron cambiarlos a estáticos.
Por todos estos problemas, no recomendamos usar estos métodos. La usabilidad se ve muy perjudicada y representa un fallo de ergonometría que afecta negativamente a la experiencia de usuario.
También se conoce como Liquid, fluid, elastic o flexible web design y diseño web flexible.
Diseño web adaptativo, adaptable o adaptive
Usa plantillas estáticas basadas en puntos de quiebre. Cuando la pantalla alcanza cierto límite de tamaño, se cambia a otro diseño.
Por ejemplo, puedes diseñar una página en tres dimensiones diferentes. Cuando un usuario visite tu sitio, los archivos adaptativos detectarán el aparato que está usando y mostrarán la plantilla adecuada.
Esta aproximación podría funcionar mejor para clientes con un presupuesto reducido, ya que implica sólo desarrollar las plantillas para algunas pantallas, en vez de planificar una experiencia óptima a través de ellas. Sin embargo, ofrece un bajo nivel de usabilidad y muestra una versión reducida de los contenidos en móviles, un medio que crece con fuerza y gana cada vez más relevancia.
También se conoce como: AWD o Adaptive Web Design.
Diseño web responsivo o Responsive web design
En el responsive web design el diseño y el contenido se adaptan a cada pantalla, entregando una experiencia de usuario muy similar en resoluciones bajas, altas o en formatos de distintas pulgadas.
Para lograr esto, los contenidos se ordenan en bloques que se reorganizan según las características de la pantalla y el navegador que se utiliza. Las partes y la jerarquía de los elementos se definen según una serie de parámetros, entre ellos:
- Ancho y alto de la ventana del navegador.
- Orientación del dispositivo.
- Proporción entre el alto y ancho de la pantalla.
- Resolución del dispositivo, es decir, la precisión del detalle en las imágenes de mapa de bits.
De esta forma el usuario ve una diagramación distinta en cada dispositivo, pero aún así puede acceder a todos los contenidos. La información se mantiene igual, pero su presentación se optimiza según el aparato y el navegador usado.
También se conoce como: RWD, responsive, diseño responsivo.
Es importante mencionar que estos métodos no son necesariamente excluyentes, en algunos casos es posible aplicarlos en forma combinada. En IDA usamos responsive web design, preferentemente no elástico. Este es el método que ofrece la mejor experiencia para los usuarios, ya que adapta los contenidos de forma comprensiva y considera los distintos escenarios. Además, ayuda a la optimización SEO al no usar redirecciones a otras plantillas y reduce los costos de mantención al usar un sólo HTML y CSS.
Para ver más ejemplos comparativos de la aplicación de estos métodos, puedes revisar las ilustraciones animadas de la empresa Fast Company. Ahora que entiendes las diferencias, trata de identificar a qué método corresponde cada ejemplo de la imagen principal de este artículo.
Acerca del Autor
Agregar un comentario