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

¿Hay guerra entre el diseño responsive y el adaptive? ¿Tienes que elegir entre papá y mamá? Mira que no te líen ni confundan.
Ampliado y complementado con la opinión e idea del AWD de Aaron Gustafson, quien acuño el término "Adaptive Web Design".

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.

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

Comentarios: 16

  1. Interesantisimo post. Cuantos he leido por ahi decir que RWD y AWD son sinonimos.
    Yo personalmente despues de leer muchas notas intentando encontrar las diferencias, llegue a la conclusión de que el RWD puede usarse en casos en los que es valido manipular el layout para adaptar los contenidos a las distintas resoluciones. El AWD quedaría reservado para casos en los que se quiere dar la misma experiencia en la mayor cantidad de dispositivos, pues el sitio se adapta pero no se modifica como se visualiza.
    Si no es posible adaptar la experiencia en todas las resoluciones, es cuando entra en juego una versión desktop y otra mobile, cosa que a mi entender el diseño responsive no prima, sino que se encarga mas, como decia, del layout.
    Pero bueno, también es, más que mi opinión, lo que logré entender de estas tecnicas. Mis desarrollos han sido siempre hechos desde el punto de vista responsivo que explico, sobre todo por agilizar el desarrollo.

    ResponderEliminar
    Respuestas
    1. Hola, es necesario usar fluid grids (cuadrícula fluida) para diseños que puedan ser vistos óptimamente en dispositivos móviles? Vengo trabajando con fluid grids que ofrecen herramientas que facilitan el trabajo como ocultar elementos para versiones móvil o tablet, redimensionar el ancho del div (limitado al ancho de las columnas, claro), pero no me está funcionando bien, tengo problemas.

      Me pregunto si podré hacer sitios web que se adapten fácilmente a los móviles SIN USAR cuadricula fluida (fluid grids), pero especificando media queries y porcentajes, y que en una fila de 4 fotos, cuando vaya a una versiéon móvil se vea dos filas de dos fotos cada una y a un tamaño reducido también.

      Acaso eso solo se puede lograr con fluid grids? Gracias.

      Eliminar
    2. mariocarnival ¿Con "fluid grids" te refieres a prefabricados como 960 grid y similares?
      Creo que tanto esas "plantillas" como la filosofía subyacentes en ella quedaron más que superadas en la actualidad.

      Si te refieres al concepto "framework" tan de moda ahora, tienes cientos de ellos. Malo sería que no encontrases uno (si es que estás obligado a trabajar sobre uno) que no se adapte a tus necesidades.
      Pero la palabra clave es "adaptarlo" tú a lo que necesitas. Si necesitas adaptar tus necesidades a él... algo falla.

      Y aunque sería posible construir un diseño RWD sin medias queries sería algo sólo experimental, poco práctico y limitado. Más un juego que un trabajo.
      Son la base de cualquier construcción RWD.

      Y tu consulta concreta, pasar de una disposición de cuatro imágenes por fila a sólo dos podría lograrse mediante max-width, Pero para cubrir cualquier escenario mejor realizaciones más completas.
      Quizás este pen (es un fork) te sirva como ejemplo o base

      Un saludo

      Eliminar
  2. Muy interesante artículo. Un ejemplo de AWD sería versiones de Redes Sociales por ejemplo: m.facebook.com, https://mobile.twitter.com, entre otras?. Gracias!

    ResponderEliminar
  3. Just my 2¢ (from 2011, but still valid): "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." — On Adaptive vs. Responsive Web Design, http://blog.easy-designs.net/archives/on-adaptive-vs-responsive-web-design/

    ResponderEliminar
    Respuestas
    1. Thanks Aaron for your visit and participation at my little blog.
      Especially for the link to your idea and concept of what the AWD is.
      With great pleasure I include your article in my post.

      Regards

      P.D.: 2¢? No. Million dollar comment ;-)

      Eliminar
  4. Un excelente artículo, me ha resultado muy interesante, muchas gracias.

    ResponderEliminar
  5. Y hablando de lo que estamos hablando, habría que evitar en los textos expresiones como "en el cuadro de la derecha", porque es muy probable que en muchas ocasiones no esté a la derecha :-D
    Enhorabuena una vez más.
    P.D.: ni sabía que te manejabas tan bien en inglés, pajáro.

    ResponderEliminar
    Respuestas
    1. ¡Qué alegría verte por aquí!
      No sabes tú los milagros que aparenta lograr el viejo Box, G translate y en caso extremo el cara o cruz xDD

      Un saludo
      P.D.: Si no llega a ser por la foto... Lo de Larsen todo un descubrimiento

      Eliminar
  6. Interesante planteamiento. Le comenté a un cliente que estaba haciendo páginas "responsivas". ¿Cómo es eso?—me preguntó. Y le suelto que son páginas que se "adaptan" a cualquier dispositivos. ¿Vale entonces el término "adaptable" para que se entere un tío de a pie qué es un RWD? En definitiva tenemos que encontrar una nomenclatura fácil y sencilla para que el cliente entienda a la primera qué le estamos ofreciendo. Y me viene a la mente uno que creía que un "mp3" era un reproductor de música. Cuando el término se cae por la borda, se pierde en el inmenso océano de la popularidad.

    ResponderEliminar
    Respuestas
    1. Discrepo, TBC3D.
      Todo el que sea o se llame o se pretenda "profesional" (sea eso lo que sea porque yo ni lo soy, ni me lo llamo ni lo pretendo) tiene la obligación de saber exáctamente qué está haciendo. Y debe ser consciente de las semejanzas y diferencias entre las distintas metodologías, técnicas, herramientas...

      Mucho más si pretende o está obligado a divulgarlas o explicarlas.
      Si no es capaz de exponerle a su cliente "su producto", las ventajas y diferencias respecto a otros, algo falla. Sea una web o una lavadora.
      Y la culpa del "no entendimiento" por parte del cliente es única y exclusivamente del profesional.
      Tomando un café con su clente, profano en la materia, puede llamar a las cosas como quiera.
      En esa circunstancia sólo hay una obligación: no engañarlo por acción u omisión. O lo que es lo mismo, dar información veraz y comprensible por su interlocutor.

      Pero si lo hace en un ámbito de dominio público, como un artículo en una web, la cosa cambia. A la obligación de veracidad se añade el hacerlo con propiedad y precisión. En las formas y fondo.

      ¿Te imaginas, TBC3D, a un pintor que no supiese trasladar a la Sña. María (cliente potencial) las diferencias entre pintura al temple, plástica, de exterior o interior, si lo que le propone es gotelé, estucado, trampantojo...? Y ahora remata poniendo a ese pintor en un stand en una feria del ramo.

      Un saludo y gracias por tu aportación.
      P.D.: nada de lo anterior digo o insinúo que sea aplicable a ti. Es solo una reflexión al hilo de tu comentario.

      Eliminar
  7. el responsive web design es algo fundamental que hay que aplicar y aprender, cada vez se usan mas celulares y smartphones para navegar!

    saludos y buen año!

    ResponderEliminar
  8. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Mira qué bien viene este span.
      Así puedo probar un par de cosas en los comentarios borrados y sus réplicas.

      Veamos pues...

      Eliminar
  9. tu mismo has utilizado la palabra adaptativo!!! Para mí, el "diseño web adaptativo" es sólo otro término para la "mejora progresiva"....
    jajajjajajajajajaja ahora hablando en serio, muy buen post!

    ResponderEliminar
  10. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap