Esta es una pregunta que surge con más frecuencia de lo que cabría esperar. Lo vemos aparecer en los foros de Programar Plusde vez en cuando. También es una pregunta común que me hacen cuando enseño diseño web introductorio.
¡Y es una buena pregunta!
El diseño web adaptable se ha convertido en un término familiar desde que Ethan Marcotte lo acuñó en A List Apart en 2010; tanto que podemos dar por sentado nuestra comprensión. El concepto de un sitio web receptivo es uno de los mejores “trucos” de CSS en los libros y lo suficientemente importante como para dar un paso atrás para recordarnos qué hace que un sitio web “receptivo” y en qué se diferencia de uno “adaptable”.
Entonces, con eso, veamos la diferencia.
La breve explicación
Los sitios receptivos y los sitios adaptables son iguales en el sentido de que ambos cambian de apariencia en función del entorno del navegador en el que se ven (lo más común: el ancho del navegador).
Los sitios web receptivos responden al tamaño del navegador en cualquier momento. No importa cuál sea el ancho del navegador, el sitio ajusta su diseño (y quizás funcionalidad) de una manera optimizada para la pantalla. Es el navegador 300px ancho o 30000px ¿ancho? No importa porque el diseño responderá en consecuencia. Bueno, ¡al menos si se hace correctamente!
Vea el ejemplo de Pen Responsive por Programar Plus(@ css-tricks) en CodePen.
Sitios web adaptables adapt al ancho del navegador en puntos específicos. En otras palabras, al sitio web solo le preocupa que el navegador tenga un ancho específico, momento en el que adapta el diseño.
Vea el ejemplo adaptable de lápiz mediante Programar Plus(@ css-tricks) en CodePen.
Otra forma de pensarlo es la diferencia entre un diseño suave y rápido. El diseño receptivo es suave porque el diseño se ajusta de manera fluida independientemente del dispositivo en el que se mire. El diseño adaptativo, por otro lado, encaja en su lugar porque la página ofrece algo diferente debido al navegador o dispositivo en el que se ve. Esta animación ilustra la diferencia de comportamiento:
Responsive en la parte superior, adaptable en la parte inferior
Observe cómo el ejemplo receptivo fluye con el entorno, mientras que el adaptativo encaja en un entorno definido.
La explicación más larga
La diferencia entre sitios receptivos y adaptables es un poco más profunda que los ejemplos simples anteriores. Incluso podría pensar en ello como una diferencia en la filosofía.
Consideremos el quid de la definición original de Ethan de diseño web receptivo:
Cuadrículas fluidas, imágenes flexibles y consultas de medios son los tres ingredientes técnicos para el diseño web receptivo, pero también requieren una forma diferente de pensar. En lugar de poner en cuarentena nuestro contenido en experiencias dispares y específicas del dispositivo, podemos utilizar consultas de medios para mejorar progresivamente nuestro trabajo en diferentes contextos de visualización.
Note las palabras operativas fluidas y flexibles. El diseño receptivo es un medio para convertirse en un dispositivo independiente en el sentido de que busca crear una experiencia optimizada para cualquier pantalla. Este pensamiento nos desafía a crear sitios que cambien el contexto de acuerdo con cómo se consume un sitio en una ocasión determinada. Eso significa que nuestros contenedores deben ser fluidos (como en el uso de porcentajes como unidades de medida), los activos que servimos deben ser flexibles (como en el servicio de los activos correctos a los dispositivos correctos en el momento correcto) y nuestras consultas de medios definidas dónde se rompe el contenido (en lugar de al ancho de un tamaño de pantalla específico, digamos iPhone).
Compare eso con una forma de pensar adaptativa, que no es ni fluida ni flexible, pero busca puntos específicos en los que adaptarse. Si bien puede ser difícil adaptar un sitio web en todos los dispositivos que existen, hay un resumen de consultas de medios específicas del dispositivo a las que puede hacer referencia.
Actualizar: Ha habido una gran cantidad de conversaciones asombrosas en los comentarios sobre la diferencia entre diseño receptivo y adaptativo. La conclusión importante es que la diferencia se reduce a más que consultas de medios y unidades de píxeles. El ejemplo de GIF animado anteriormente en la publicación es una forma de ilustrar la diferencia, ya que esos términos se reconocen aquí, pero esta publicación también proporciona una buena serie de ilustraciones para impulsar el punto.
¿Responde mejor que adapta?
Ni siquiera voy a ir allí. Creo que es una diferencia en la filosofía, al igual que el diseño web receptivo lo es del diseño web receptivo para dispositivos móviles. Tú eliges la mejor herramienta para el proyecto en cuestión.
¿Estás obligado a elegir uno sobre el otro? La elección podría ser más sencilla si sabe que tiene dispositivos específicos que su sitio debe admitir. Puede decidir que el iPhone 6 es el único dispositivo que importa y adaptarse a él sería mucho más fácil y eficiente que tener en cuenta otros dispositivos. Por otro lado, un diseño receptivo es una buena estrategia para preparar un sitio para el futuro frente a la posibilidad de cualquier dispositivo (quizás incluso inédito) en el mercado.
La línea de fondo
Tanto los diseños receptivos como los adaptativos son iguales en el sentido de que son métodos para lidiar con la realidad de que los sitios web a menudo se ven en diferentes dispositivos en diferentes contextos. Simplemente lo hacen a su manera.
Recuerde: la web responde por naturaleza. No necesita responder ni adaptarse a ningún dispositivo hasta que empecemos a diseñarlo.
Si está buscando sumergirse en el diseño receptivo, lo mejor que puede hacer es practicar. No hay escasez de recursos para ayudarlo a comenzar, ¡así que hágalo! Aquí hay algunos para comenzar:
- Esto es receptivo: Una colección de ejemplos, patrones y recursos seleccionados por Brad Frost.
- ResponsiveDesign.is: ¡Otro tesoro de recursos, además de artículos y un podcast!
- Podcast de diseño web adaptable: Hablando de podcasts, aquí hay uno coorganizado por Ethan Marcotte y Karen McGrane.
- Diseño web adaptable, por Ethan Marcotte: Ethan escribió literalmente el libro y lo hizo con la mayor claridad.