El diseño web receptivo y adaptable son dos métodos para crear sitios web amigables con múltiples dispositivos que funcionan bien en una variedad de tamaños de pantalla. Mientras que el diseño web sensible es recomendado por Google y es el más popular de los dos enfoques, ambos métodos para el diseño web multi-dispositivo tienen sus fortalezas y sus debilidades.

Echemos un vistazo a las diferencias entre el diseño web receptivo y adaptativo, centrándonos específicamente en estas áreas clave:

• Facilidad de desarrollo
• El nivel de control que tiene sobre el diseño
• Amplitud del soporte de dispositivo/pantalla
• Que tan amigable para el futuro es la solución
• Velocidad general de descarga y rendimiento del sitio

Algunas definiciones

Antes de entrar en nuestras comparaciones de diseño web receptivo y adaptativo, tomemos un momento para ver una definición de alto nivel de estos dos enfoques.

Los sitios web con capacidad de respuesta tienen un diseño fluido que cambia y se adapta independientemente del tamaño de la pantalla que se utilice. Las consultas de los medios de comunicación permiten que los sitios que responden cambien «sobre la marcha» si se cambia el tamaño del navegador.

El diseño adaptativo utiliza tamaños fijos basados en puntos de interrupción predeterminados para ofrecer la versión de diseño más apropiada para el tamaño de pantalla que se detecta cuando se carga la página por primera vez.

Una vez establecidas estas definiciones generales, volvamos a nuestras áreas clave de enfoque.

Facilidad de desarrollo

La diferencia más significativa entre el diseño web con capacidad de respuesta y el diseño web adaptativo está en la forma en que estas soluciones se aplican a un sitio web. Debido a que un diseño sensible crea un diseño completamente fluido, es mejor utilizarlo en proyectos en los que se está rediseñando el sitio desde cero. Tratar de adaptar el código de un sitio web existente para que responda es a menudo un asunto agotador porque simplemente no tienes el nivel de control que tendrías si estuvieras desarrollando ese código desde cero y teniendo en cuenta el diseño receptivo en las etapas más tempranas de ese proceso. Esto significa que cuando se modifica un sitio para que responda, se ve obligado a hacer compromisos para mantenerse dentro de la base de código existente.

Si está trabajando con un sitio web existente de ancho fijo, un enfoque adaptativo significa que puede dejar intacto el tamaño para el que fue diseñado el sitio y añadir puntos de ruptura adaptativos adicionales según sea necesario. En algunos casos, si el presupuesto de un proyecto es pequeño, y si sólo acomoda una pequeña cantidad de trabajo de desarrollo, puede optar por añadir sólo nuevos puntos de interrupción adaptables para tamaños de pantalla/centrado móvil más pequeños. Esto significa que permitiría que las pantallas más grandes usen el mismo diseño, tal vez una versión de punto de ruptura de 960 que era para lo que ese sitio fue diseñado originalmente.

La ventaja de un enfoque adaptativo es que puede aprovechar mejor el código de un sitio existente, pero una de las desventajas es que está creando plantillas de diseño diferentes para cada punto de interrupción que elija admitir. Esto tendrá un impacto en la carga de trabajo necesaria para desarrollar y mantener esta solución a largo plazo.

Control de diseño

Uno de los puntos fuertes de los sitios web con capacidad de respuesta es que su fluidez les permite adaptarse y soportar todos los tamaños de pantalla en lugar de sólo los puntos de ruptura preestablecidos determinados en un enfoque adaptativo. La realidad, sin embargo, es que los sitios sensibles pueden verse muy bien en ciertos tamaños de pantalla clave (típicamente tamaños que corresponden a dispositivos populares disponibles en el mercado), pero el diseño visual a menudo se descompone entre esas resoluciones populares.

Por ejemplo, un sitio puede verse muy bien en la disposición de pantalla ancha de 1400 píxeles, el tamaño de la pantalla central de 960 píxeles y la pantalla pequeña de 480 píxeles, pero ¿qué pasa con los estados intermedios de estos tamaños? Como diseñador, usted tiene poco o ningún control sobre estos tamaños intermedios y el aspecto visual de la página en esos tamaños es a menudo menos que ideal.

Con un sitio web adaptable, usted tiene mucho más control sobre los distintos diseños que se utilizan porque son tamaños fijos basados en sus puntos de ruptura establecidos. Esos estados intermedios incómodos ya no son un problema porque usted ha diseñado cuidadosamente cada «look» (es decir, la visualización de cada punto de ruptura) que se entregará a los visitantes.

Por muy atractivo que pueda parecer este nivel de control de diseño, debe tener en cuenta que tiene un precio. Sí, usted tiene control total sobre la apariencia de cada punto de ruptura, pero eso significa que debe invertir el tiempo de diseño requerido para diseñar cada uno de esos diseños únicos. Cuantos más puntos de ruptura elija para los que diseñará, más tiempo necesitará dedicar a ese proceso.

Amplitud de soporte

Tanto el diseño web sensible como el adaptable disfrutan de un soporte bastante robusto, especialmente en los navegadores modernos.

Los sitios web adaptables requieren componentes del lado del servidor o Javascript para la detección del tamaño de la pantalla. Obviamente, si un sitio adaptable requiere Javascript, significa que un navegador necesita tenerlo activado para que ese sitio funcione correctamente. Esto puede no ser una gran preocupación para usted, ya que la mayoría de las personas tienen Javascript en sus navegadores, pero cada vez que un sitio tiene una dependencia crítica de cualquier cosa, debe tenerse en cuenta.

Los sitios web con capacidad de respuesta y las consultas de los medios de comunicación que los alimentan funcionarán bien en todos los navegadores modernos. Los únicos problemas que tendrá son con las versiones más antiguas de Internet Explorer, ya que las versiones 8 y siguientes no admiten consultas multimedia. Para evitarlo, a menudo se utiliza un relleno de Javascript, lo que significa que aquí también hay una dependencia de Javascript, al menos para aquellas versiones anticuadas de IE. Una vez más, esto puede no ser una gran preocupación para usted, especialmente si el análisis de su sitio muestra que usted no recibe muchos visitantes que utilizan las versiones de los navegadores más antiguos.

Amistad en el futuro

La naturaleza fluida de los sitios web con capacidad de respuesta les da una ventaja sobre los sitios adaptables cuando se trata de ser amigables con el futuro. Esto se debe a que esos sitios sensibles no están construidos para acomodar sólo un conjunto de puntos de ruptura previamente establecidos. Se adaptan para encajar todas las pantallas , incluyendo aquellas que pueden no estar realmente en el mercado hoy en día. Esto significa que los sitios que responden no necesitarán ser «fijos» si de repente se hace popular una nueva resolución de pantalla.

Teniendo en cuenta la increíble variedad del panorama de dispositivos (en agosto de 2015, había más de 24.000 dispositivos Android distintos en el mercado), tener un sitio que hace todo lo posible para acomodar esta amplia gama de pantallas es de vital importancia para la facilidad de uso en el futuro. Esto se debe a que es poco probable que ese paisaje sea menos diverso en el futuro, lo que significa que será imposible diseñar para pantallas o tamaños específicos, si no hemos alcanzado ya esa realidad.

En el otro lado de este escenario de comparación, si un sitio es adaptable y no se adapta a nuevas resoluciones que pueden llegar a ser importantes en el mercado, entonces puede que se vea obligado a añadir ese punto de interrupción en los sitios que ha creado. Esto añade tiempo de diseño y desarrollo a los proyectos y significa que esos sitios adaptables deben ser monitoreados consistentemente para asegurar que no se hayan introducido nuevos puntos de ruptura en el mercado que deban ser agregados al sitio. Una vez más, con la diversidad de dispositivos siendo lo que es, tener que comprobar constantemente nuevos tamaños y acomodarlos con nuevos puntos de ruptura es un desafío continuo que tendrá un impacto en el trabajo que se debe realizar para dar soporte a un sitio y en el costo de ese mantenimiento para la compañía u organización para la cual el sitio está destinado.

Rendimiento

El diseño web sensible ha sido acusado durante mucho tiempo (injustamente en muchos casos) de ser una solución deficiente desde el punto de vista de la velocidad de descarga y el rendimiento. Esto se debe en gran medida al hecho de que en los primeros días de este enfoque, muchos diseñadores web simplemente añadieron pequeñas consultas de medios de pantalla en el CSS existente de un sitio. Esto obligó a que las imágenes y los recursos destinados a pantallas más grandes se entregaran a todos los dispositivos, incluso si esas pantallas más pequeñas no los utilizaban en sus diseños finales. El diseño sensible ha avanzado mucho desde aquellos días y la realidad es que los sitios sensibles a la calidad hoy en día no sufren de problemas de rendimiento.

Las bajas velocidades de descarga y los sitios web hinchados no son un problema de respuesta – es un problema que se puede encontrar en todos los sitios web. Las imágenes que son demasiado pesadas, los feeds de los medios sociales, los scripts excesivos y más y que pesan un sitio hacia abajo, pero tanto los sitios web sensibles y adaptables pueden ser construidos para ser de carga rápida. Por supuesto , también pueden construirse de una manera que no haga del rendimiento una prioridad, pero esto no es un rasgo de la solución en sí, sino más bien un reflejo del equipo que estuvo involucrado en el desarrollo del sitio mismo.

Más allá del diseño

Uno de los aspectos más convincentes del diseño web adaptativo es que usted no sólo tiene control sobre el diseño del sitio para establecer puntos de interrupción, sino también sobre los recursos que se entregan para esas versiones del sitio. Por ejemplo, esto significa que las imágenes de la retina sólo se pueden enviar a los dispositivos de la retina, mientras que las pantallas sin retina obtienen imágenes más apropiadas que son más pequeñas en tamaño de archivo. Otros recursos del sitio (archivos Javascript, estilos CSS, etc.) pueden ser entregados inteligentemente sólo cuando son necesarios y serán utilizados.

Este uso del diseño web adaptativo va mucho más allá de la simple ecuación de que «si estás actualizando un sitio web, la adaptación puede ser un enfoque más fácil de usar». Todos los sitios, incluidos los rediseños completos, pueden beneficiarse de un enfoque más inteligente para una experiencia más personalizada.

Este escenario muestra la naturaleza matizada de este debate «receptivo versus adaptativo». Si bien es cierto que un enfoque adaptativo puede ser más adecuado que una respuesta a las modificaciones del sitio, también puede ser una gran solución para rediseños completos. Del mismo modo, en algunos casos se puede añadir un enfoque de respuesta a la base de código de un sitio existente, dando a ese sitio todos los beneficios de un enfoque de respuesta completa.

¿Qué enfoque es mejor?

Cuando se trata de diseño web con capacidad de respuesta frente a diseño web adaptativo, no hay un «ganador» claro, aunque la respuesta es sin duda el enfoque más popular. En realidad, el enfoque «mejor» depende de las necesidades de un proyecto específico. Además, esto no tiene por qué ser una situación de «uno u otro». Hay muchos profesionales de la web que están construyendo sitios que combinan lo mejor del diseño web sensible (anchos de fluido, soporte futuro) con las fortalezas del diseño adaptativo (mejor control del diseño, carga inteligente de los recursos del sitio).

Comúnmente conocido como RESS (Responsive Web Design with Server Side Components), este enfoque demuestra que no existe realmente una solución única para todos los casos. Tanto el diseño web sensible como el adaptable tienen sus fortalezas y sus desafíos, por lo que necesita determinar cuál funcionará mejor para su proyecto específico, o si una solución híbrida puede ser la que mejor se adapte a sus necesidades.