soy Kseso y esto EsCSS

Del diseño web Responsive y Adaptive: que no te líen ni confundan.

Del diseño web Responsive y Adaptive: que no te líen ni confundan.

·Por Kseso ✎ 16

Los antecedentes

Del Responsive y el Adaptive web design: una opiniónAntes de la eclosión actual de dispositivos, formas de acceso a la red y herramientas (Css3, frameworks, librerías js...), allá cuando la mayor novedad era 'opacity' y la gestión de png´s transparentes era "trend topic", ya existía el concepto y práctica de lo que se llamaba diseño flexible, líquido, porcentual, adaptable... frente al fijo.

Y quien encontraba matices diferenciadores entre los distintos adjetivos (flexible, líquido, porcentual, adaptable...).

No era sólo evitar la aparición del scroll, principalmente en el eje x, con independencia de que la web se mostrase en una pantalla de 800px, de 1024px o de los entonces enormes 1280px. También era la relación de tamaños de las columnas entre sí y la ventana, evitar solapamientos y/o descuadres, que hubiese elementos (o parte de ellos) que quedases inaccesibles en pantallas pequeñas o lo contrario en "grandes".

Entonces los recursos eran escasos y muy limitados comparados con la actualidad: principalmente elementos flotados y uso de max/min-width junto a tamaños declarados en %.

Todo ello, necesidades y falta de medios, llevaba a estrujar el coco y la imaginación dando lugar a realizaciones verdaderamente ingeniosas, no exentas de marcado html complejo. Algunas aún disponibles en araudi.net.

Ya se manejaban y alentaban el uso de conceptos y prácticas hoy más obligatorias aún, como la accesibilidad, la semántica y la mejora progresiva o degradación elegante.

Resposive Web Design o RWD

Con independencia de cómo fuese pensado y formulado por Ethan Marcotte en su génesis, el concepto del RWD fue adoptado, desarrollado y concretado por una inmensa mayoría para quedar definido por sí mismo, tanto en qué es como en su metodología para aplicarlo a la creación de páginas y aplicaciones web.

Así, podría decirse que el RWD:

Hace posible que tanto la forma (el continente) como el manejo de la información (el contenido) es la óptima y está adaptada para mostrase en el dispositivo que la demanda y para que éste (el aparato) la pueda manejar según sus capacidades.
O de otra forma: hacer lo más grata la experiencia al usuario con independencia de con qué o cómo visite la página. Y hacerlo con el mínimo de recursos o esfuerzos, tanto para el desarrollador como para el visitante y para su dispositivo.

Nota: se que a la definición anterior puedes tildarla de imprecisa o mostrar tu desacuerdo con toda ella o alguna parte. En su brevedad lo lleva. Date cuenta que hay multitud de libros dedicados a explicar qué es el RWD y cómo desarrollarlo.

Para lograr estos fines, el RWD propone y aboga por:

  1. El uso de las reglas Css @media queries para adaptar el layout a la ventana o viewport
  2. La caja flexible o flexbox a la espera de que el CSS Grid Layout sea una opción real.
  3. Usar recursos gráficos (img, video, canvas...) sensibles al medio o responsive images [1] / responsive images [2]. No sólo en tamaños (px) sino en su resolución (2x...) y/o hasta seleccionar la imagen que se sirve (nuevos elementos como picture, atributos srcset... bases de selección, étc [ver 1])
  4. Usa "Javascript discreto" o no invasivo (Unobtrusive JavaScript)
  5. Trabajar con el concepto de "mejora progresiva" (Progressive Enhancement) siempre en mente.

Iceberg webUn pilar base es tener claro que el uso de @medias queries de Css o adaptar el layout no debe hacerse en función de dispositivos y la disparidad de ellos que existen. Sería imposible. Las @medias queries deben utilizarse para crear puntos de ruptura o cambio en base a las particularidades de la página en cuestión y en el momento que esa realización (y no otra) lo demande: "Piensa en tu diseño, olvida los aparatos".

Como estamos hablando de técnicas para la mejora del diseño y creación de páginas y aplicaciones web, inmediatamente hubo autores y desarrolladores que propusieron, ampliaron y aplicaron la idea del RWD a otros aspectos o campos, algunos no resueltos del todo aún, como:

Resumiendo, el RWD se define de forma afirmativa en sí mismo. Define los porqués de su existencia, sus objetivos y forma de alcanzarlos en base a qué es, qué propone y cómo lograrlo. Además, junto a él y formando parte o no del desarrollo del RWD (depende de los límites que cada cual le imponga al RWD) se han desarrollado otros campos u aspectos de la realización de páginas y aplicaciones web.

Adaptive Web Design o AWD

Adaptive Web Design o AWDAntes de entrar en materia, quiero que notes que la denominación en inglés es adaptive, nunca "adaptative". Así que convendría para evitar aumentar la confusión y la desinformación (aún más de la que ya hay) evitar expresiones como "adaptative" en inglés o "adaptativo" en español. Aunque con diferencias sutiles, siempre "adaptive" y en español mejor "diseño adaptado".

Parece que su origen, o al menos el referente principal, es la idea de Aaron Gustafson expuesta en su libro "Adaptive Web Design" cuyo subtítulo dice Elaboración de experiencias dinámicas con la mejora progresiva

Estos son los capítulos de esa referencia del Adaptive web design:

  • Chapter 1: Think of the User, Not the Browser
  • Chapter 2: Progressive Enhancement With Markup
  • Chapter 3: Progressive Enhancement With CSS
  • Chapter 4: Progressive Enhancement With Javascript
  • Chapter 5: Progressive Enhancement for Accessibility
  • Chapter 6: Take It Away

No voy a entrar en los "testimonios" y en el que han elegido como representativo del "AWD" propuesto en esta obra. Son eso, testimonios. Lo que voy a traerte es lo que el autor dice del AWD en su artículo "On Adaptive vs. Responsive Web Design" y el extracto que nos deja aquí, en este blog en su comentario:

To me, "adaptive web design" is just another term for "progressive enhancement" of which responsive web design can (an often should) be an integral part, but is a more holistic approach to web design in that it also takes into account varying levels of markup, CSS, JavaScript and assistive technology support.

Para mí, el "diseño web adaptativo" es sólo otro término para la "mejora progresiva" de los cuales el diseño web "responsive" puede (con frecuencia debería) ser parte integrante, pero es un enfoque más holístico para el diseño web, ya que también tiene en cuenta la variación a nivel de marcado (html), CSS, JavaScript y el soporte asistencial de la tecnología.

Diferencias, dependencias, relaciones entre el Responsive y el Adaptive

libros sobre el diseño y desarrollo web
Libros sobre el diseño y desarrollo web

Como puedes ver, tanto en el extracto del propio Aaron Gustafson en los comentarios como en el enlace a su artículo, son dos caras de la misma moneda, más o menos coincidentes según el propio concepto que se tenga de uno y otro. Posíblemente la mayor diferencia es el énfasis que Aaron pone en la mejora progresiva y en el apoyo y recomendación explícita a servir un código diferente si fuese necesario.

Quizás te haya pasado como a mi, que tras leer y ver multitud de artículos, infografías, dibujitos y opiniones (inglés y español) en nada me han aclarado qué es el "adaptive". Todo lo contrario. Cada cual preconiza una idea que en ocasiones son contrarias y excluyentes y en otras son de todo punto erróneas.

Casi todos los que intentan definir qué es es el "adaptive web design" necesitan hacerlo por exclusión o negación de lo que es o él entiende que es el "responsive web design". Y siempre lo hacen con un denominador común: una visión reducionista y simple del RWD. Necesitan podar y poner límites imaginarios al RWD para, en base a esas carencias creadas artificialmente, dotar de contenido y espacio al AWD. O a lo que ellos entienden por AWD.

Como muestra la siguiente imagen, una de tantas por el estilo que circulan. Fíjate en ella y verás el sinsentido que sería realizar cualquier página o aplicación web bajo cualquiera de los dos conceptos tal como los define:

comparativa sin sentido
Responsive frente a Adaptive: comparativa sin sentido y excluyente

¿Una página por cada posible dispositivo y/o resolución, no soportar máquinas o navegadores que no sean los nuevos o viejos? WTF!!!.

¿Hay dilema y confrontación RWD vs AWD?

falsa relación No. No hay confrontación, tampoco comparación y mucho menos son excluyentes en su concepción y uso del "responsive web design" y el "adaptive web design". Mucho menos tiene cabida o razón de ser gráficos como el de la derecha.

En todo caso sí que hay un complemento o desarrollo por parte del AWD del cuarto punto del RWD: Trabajar con el concepto de "mejora progresiva" (Progressive Enhancement) siempre en mente.

Nada te obliga a que si decides primar el "Progressive Enhancement" deba ser renunciando a páginas "responsive".

Esta es sólo mi visión. Posíblemente tan errada y parcial como cualquier otra de las que hayas leído. Y posíblemente ni compartas ni suscribas y a la que objetarás múltiples aspectos. Házmelos saber en un comentario y así nos enriquecemos todos.

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso