El diseño web adaptable y adaptable son métodos para crear sitios web compatibles con múltiples dispositivos que funcionan bien en una variedad de tamaños de pantalla. Aunque Google recomienda el diseño web adaptable y es el más popular de los dos enfoques, ambos métodos para el diseño web de dispositivos múltiples tienen sus fortalezas y sus debilidades.
Echemos un vistazo a las diferencias entre el diseño web adaptable y adaptable, centrándonos específicamente en estas áreas clave:
- Facilidad de desarrollo
- El nivel de control que tienes sobre el diseño.
- Amplitud del dispositivo / soporte de pantalla
- ¿Qué tan amigable es la solución para el futuro?
- Velocidad general de descarga y rendimiento del sitio
Algunas definiciones
Antes de entrar en nuestras comparaciones lado a lado de diseño web adaptable y adaptable, tomemos un momento para ver una definición de alto nivel de estos dos enfoques.
Los sitios web receptivos tienen un diseño fluido que cambia y se adapta independientemente del tamaño de la pantalla que se esté utilizando. Las consultas de medios permiten que los sitios receptivos 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 entregar la versión de diseño más adecuada para el tamaño de pantalla que se detecta cuando se carga la página por primera vez.
Con esas definiciones amplias en su lugar, pasemos a nuestras áreas clave de enfoque.
Facilidad de desarrollo
La diferencia más significativa entre el diseño web adaptable y el adaptable reside en la forma en que estas soluciones se aplican a un sitio web. Debido a que el diseño responsivo crea un diseño completamente fluido, es mejor utilizarlo en proyectos donde está rediseñando el sitio desde cero. Tratar de modernizar el código de un sitio web existente para que sea receptivo a menudo es un asunto agotador porque simplemente no tiene el nivel de control que tendría si estuviera desarrollando ese código desde cero y teniendo en cuenta el diseño responsivo en las primeras etapas de ese proceso Esto significa que cuando actualiza un sitio para que sea receptivo, se ve obligado a hacer concesiones para permanecer dentro de la base de código existente.
Si está trabajando con un sitio web de ancho fijo existente, un enfoque adaptativo significa que puede dejar intacto el tamaño para el que fue diseñado el sitio y agregar puntos de interrupción adaptativos adicionales según sea necesario. En algunos casos, si el presupuesto de un proyecto es pequeño y si solo se ajustará a una pequeña cantidad de trabajo de desarrollo, puede optar por agregar solo nuevos puntos de interrupción adaptativos para tamaños de pantalla / móviles 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 interrupción 960 que fue para lo que se diseñó originalmente ese sitio.
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 diferentes plantillas de diseño para cada punto de interrupción que elija admitir. Esto tendrá un impacto en la carga de trabajo requerida para desarrollar y mantener esta solución a largo plazo.
Control de diseño
Una de las fortalezas de los sitios web receptivos es que su fluidez les permite adaptarse y admitir todos los tamaños de pantalla, a diferencia de los puntos de interrupción predeterminados determinados en un enfoque adaptativo. Sin embargo, la realidad es que los sitios receptivos pueden verse bien en ciertos tamaños de pantalla clave (generalmente 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 bien en el diseño de pantalla ancha de 1400 píxeles, el tamaño de pantalla media de 960 píxeles y la pantalla pequeña en 480 píxeles, pero ¿qué pasa con los estados intermedios de estos tamaños? Como diseñador, tiene poco o ningún control sobre estos tamaños intermedios y el aspecto visual de la página en esos tamaños a menudo es menos que ideal.
Con un sitio web adaptable, tiene mucho más control de diseño sobre los distintos diseños que se utilizan porque son tamaños fijos según sus puntos de interrupción establecidos. Esos incómodos estados intermedios ya no son un problema porque ha diseñado cuidadosamente cada "aspecto" (es decir, la visualización de cada punto de interrupción) 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í, tienes control total sobre el aspecto de cada punto de interrupción, pero eso significa que debes invertir el tiempo de diseño requerido para cada uno de esos diseños únicos. Cuantos más puntos de interrupción elija para diseñar, más tiempo necesitará para invertir en ese proceso.
Amplitud de apoyo
Tanto el diseño web adaptable como el adaptable disfrutan de un soporte bastante robusto, especialmente en los navegadores modernos.
Los sitios web adaptativos 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 debe tenerlo habilitado para que ese sitio funcione correctamente. Es posible que no sea una preocupación importante para usted, ya que la mayoría de las personas tendrán Javascript en sus navegadores, pero en cualquier momento en que un sitio tenga una dependencia crítica de cualquier cosa, se debe tener en cuenta.
Los sitios web receptivos y las consultas de medios que los impulsan funcionarán bien en todos los navegadores modernos. Los únicos problemas que tendrá serán con las versiones más antiguas de Internet Explorer, ya que las versiones 8 y anteriores no admiten consultas de medios. Para solucionar este problema, a menudo se usa un polyfill de Javascript, lo que significa que también hay una dependencia de Javascript aquí, al menos para esas versiones anticuadas de IE.Una vez más, esto puede no ser una gran preocupación para usted, especialmente si los análisis de su sitio muestran que no recibe muchos visitantes con las versiones anteriores del navegador.
Amabilidad del futuro
La naturaleza fluida de los sitios web receptivos les da una ventaja sobre los sitios adaptativos en lo que respecta a la amistad con el futuro. Esto se debe a que los sitios de respuesta no están diseñados para alojar solo un conjunto de puntos de interrupción previamente establecido. Se adaptan a la medida. todas las pantallas , incluyendo aquellos que pueden no estar actualmente en el mercado hoy. Esto significa que los sitios de respuesta no tendrán que ser "arreglados" si una nueva resolución de pantalla de repente se vuelve popular.
Al observar la increíble variedad en el panorama de dispositivos (a partir de agosto de 2015, había más de 24,000 dispositivos Android distintos en el mercado), tener un sitio que haga todo lo posible para adaptarse a esta amplia gama de pantallas es de vital importancia para el futuro. Esto se debe a que es poco probable que ese paisaje se vuelva menos diverso en el futuro, lo que significa que el diseño para pantallas o tamaños específicos se volverá imposible, si aún no hemos alcanzado esa realidad.
En el otro lado de este escenario de comparación, si un sitio es adaptable y no admite nuevas resoluciones que pueden llegar a ser importantes en el mercado, es posible que se vea obligado a agregar ese punto de interrupción a los sitios que haya creado. Esto agrega tiempo de diseño y desarrollo a los proyectos y significa que esos sitios de adaptación deben ser monitoreados constantemente para asegurar que no se hayan introducido nuevos puntos de interrupción en el mercado que se deben agregar al sitio. Una vez más, dado que la diversidad de dispositivos es lo que es, tener que verificar constantemente los nuevos tamaños y los posibles ajustes para los nuevos puntos de ruptura es un desafío continuo que tendrá un impacto en el trabajo que debe realizar para apoyar un sitio y el costo de ese mantenimiento la empresa u organización para la cual está el sitio.
Actuación
El diseño web sensible ha sido acusado durante mucho tiempo (de manera injusta en muchos casos) de ser una solución pobre desde el punto de vista de la velocidad de descarga / rendimiento. Esto se debe en gran parte al hecho de que en los primeros días de este enfoque, muchos diseñadores web simplemente abordaron las consultas de medios de pantalla pequeña en el CSS existente de un sitio. Esto obligó a que las imágenes y los recursos destinados a pantallas más grandes se enviaran a todos los dispositivos, incluso si esas pantallas más pequeñas no las usaban en sus diseños finales. El diseño responsivo ha recorrido un largo camino desde aquellos días y la realidad es que los sitios responsivos de calidad hoy en día no sufren problemas de rendimiento.
Las velocidades de descarga lentas y los sitios web inflados no son un problema de sitio web sensible, es un problema que se puede encontrar en todos los sitios web. Las imágenes son demasiado pesadas, se alimentan de redes sociales, secuencias de comandos excesivas y más, y pesan un sitio, pero los sitios web adaptables y con capacidad de respuesta se pueden crear para que se carguen rápidamente. Por supuesto , también se pueden construir de una manera que no hace del desempeño una prioridad, pero esto no es un rasgo de la solución en sí, sino un reflejo del equipo que participó en el desarrollo del sitio en sí.
Más allá del diseño
Uno de los aspectos más convincentes del diseño web adaptativo es que no solo tiene control sobre el diseño del sitio para establecer puntos de interrupción, sino también los recursos que se entregan para esas versiones del sitio. Por ejemplo, esto significa que las imágenes de retina se pueden enviar solo a dispositivos de retina, mientras que las pantallas que no son de 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 entregarse de manera inteligente solo cuando son necesarios y se utilizarán.
Este uso del diseño web adaptativo va mucho más allá de la simple ecuación de "si está modernizando un sitio web, 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 de "respuesta frente a adaptación". Si bien es cierto que un enfoque adaptativo puede ser más adecuado que el que responde a las modernizaciones del sitio, también puede ser una gran solución para los rediseños completos. De manera similar, en algunos casos, se puede agregar un enfoque de respuesta a la base de código de un sitio existente, lo que le da a ese sitio todos los beneficios de un enfoque completamente sensible.
¿Qué enfoque es mejor?
Cuando se trata de diseño web adaptable versus adaptable, no hay un "ganador" claro, aunque el enfoque más popular es ciertamente responsive. En verdad, el enfoque "mejor" depende de las necesidades de un proyecto específico. Además, esto no tiene por qué ser una situación de "cualquiera de los dos". Hay muchos profesionales de la web que están construyendo sitios que combinan lo mejor del diseño web sensible (anchos fluidos, soporte futuro) con las fortalezas del diseño adaptable (mejor control de diseño, carga inteligente de recursos del sitio).
Comúnmente conocido como RESS (Diseño web responsivo con componentes del lado del servidor), este enfoque muestra que realmente no existe una solución única para todos. Tanto el diseño web responsivo como el adaptable tienen sus fortalezas y sus desafíos, por lo que debe determinar cuál funcionará mejor para su proyecto específico, o si una solución híbrida puede adaptarse mejor a usted.
