¿En qué consisten el diseño responsive y el diseño adaptado?
¿En qué consisten el diseño responsive y el diseño adaptado?
Responsive Web Design (RWD) o Diseño Web Responsive es una técnica para desarrollar interfaces que hace uso de media queries y hojas de estilos, estableciendo unas medidas de ancho en tamaños proporcionales para hacer una estructura flexible y que el contenido de la web se adapte a las distintas resoluciones de pantalla. De esta forma la experiencia de usuario no se ve afectada. Por lo tanto, busca una mayor flexibilidad.
Adaptive Web Design (AWD) o Diseño Web Adaptado (no adaptativo, que sería una traducción incorrecta del término «adaptive») es una técnica que utiliza tamaños de pantalla preestablecidos: 320px, 480px, 760px, 960px, 1200px, 1600px y se crea un diseño a medida para cada uno de esos tamaños. Cuando se detecta el dispositivo, se le suministra el diseño que mejor se adapta de entre los realizados. Por lo tanto, no es tan flexible pero sí más cómodo de realizar.
Responsive vs Adaptive. Comparativa
1. Identificación del dispositivo
El diseño adaptado utiliza el servidor web para detectar el dispositivo y adaptar la interfaz de la web a una resolución de pantalla especifica. La carga del proceso recae en el servidor web.
El diseño responsive utiliza Media Queries (se programan en la hoja de estilos CSS) para detectar la resolución y entonces el diseño, que está basado en columnas flexibles, se adapta al tamaño de pantalla. La carga del proceso recae en el ordenador del usuario.
2. Optimización del contenido
Con la metodología de un diseño adaptado la información es preseleccionada y sólo se descargan los ficheros específicos para la resolución desde la que estás navegando en ese momento. Por lo tanto, se descargan menos datos en el ordenador del usuario y eso dará al sitio una velocidad ligeramente mayor.
Sin embargo, con la metodología responsive, se envía toda la información, sea o no la correspondiente a ese tamaño y luego en función de la pantalla se procesa la que sea necesaria. Consume más datos y el rendimiento de carga puede ser ligeramente peor.
3. Optimización del dispositivo
Con AWD se diseñan varias plantillas que se adapten a diferentes tamaños. No obstante, dado que los dispositivos son muy variables y que existen numerosos tamaños de pantalla, puede ocurrir que en un tamaño concreto que no hemos tenido en cuenta, la experiencia de uso no sea del todo consistente. En ese sentido, tendremos que dedicar más tiempo a pruebas para verificar los cambios de tamaños.
En el RWD hay una única plantilla, por lo que sirve para cualquier pantalla.
4. Características específicas
El diseño adaptado implica detectar el tipo de dispositivo y sus funcionalidades para cambiar el comportamiento de la web de forma adecuada.
Con el diseño responsive se incluyen todas las características que un navegador necesita (archivos Javascript, resoluciones de imagen y vídeo…).
5. Rendimiento
Como he comentado en el punto 2, la velocidad de carga cuando usamos la metodología adaptada es mayor que cuando usamos un diseño responsive, ya que se cargan solo los recursos necesarios para cada dispositivo y se optimizan las imágenes también. Menor tamaño de archivos implica menos datos a cargar y por lo tanto, menos tiempo en cargarlos. Recordemos que en móviles el tiempo de carga es un aspecto bastante crítico para la experiencia de uso.
Con el diseño responsive, por ejemplo, las imágenes se envían desde el servidor al usuario en tamaño completo, siendo el navegador el que las ajusta al dispositivo.
Por ejemplo, la empresa Catchpoint realizó un estudio, comparando un sitio web realizado en WordPress que usaba una plantilla responsive (diseño responsive) con el mismo sitio usando el plugin Wiziapp, que permite mostrar al usuario una plantilla diferente según su tamaño (diseño adaptado). Los resultados en cuanto a tiempo de carga y bytes descargados son bastante concluyentes.
6. Desarrollo
El diseño adaptado permite partir de una web ya creada e irla adaptando a diferentes tamaños de pantalla (los que consideres necesarios, aunque los tamaños estandarizados son los 6 mencionados antes). Se suele trabajar empezando con resoluciones bajas y posteriormente irlas subiendo. Esto implica un mayor trabajo, ya que además hay que hacer mayores test y comprobar bien los diferentes saltos de pantalla.
Si quieres una Web Responsive lo lógico es hacer tu web desde cero. Se suele tener en mente una resolución intermedia y después usar media queries para ir ajustando el diseño a tamaños inferiores o superiores.
7. Coste
El diseño adaptado es más costoso en tiempo y dinero que un diseño responsive, pues el diseño se personaliza más para cada tamaño de pantalla. Implica realizar múltiples plantillas. Lo mismo podemos decir del mantenimiento.
El diseño responsive es el que más se ha popularizado, gracias a la existencia de numerosas plantillas en las principales plataformas como WordPress, Joomla, Prestashop…
Ejemplos de webs responsive y adaptive
Como ejemplos de sitios web que usan la técnica RWD, tenemos:
Palacio de Congresos de Granada
Y como ejemplos de sitios web que usan la técnica AWD, tenemos:
Responsive vs Adaptive. Conclusión. ¿Cuál elijo?
Como conclusión, he de decir que ninguno es mejor que el otro en términos absolutos. Lo principal a la hora de decidirse por responsive o adaptive es analizar previamente nuestras necesidades y el tipo de dispositivos que usan nuestros visitantes o el público al que va dirigida la web. Si nuestro sitio web va a ser complejo y necesitamos optimizar al máximo la experiencia del usuario en cualquier tipo de dispositivo y pantalla, y además estamos dispuestos a invertir más tiempo y recursos, claramente me decantaría por un diseño adaptado. Por ejemplo, para portales de venta online y sitios de reservas, donde el proceso hasta la compra conlleva diferentes pasos. En caso contrario, bien porque no disponemos de demasiados recursos o porque nuestros requerimientos de uso no son tan exigentes, un diseño web responsive cubrirá perfectamente nuestras necesidades y las de los usuarios. El diseño responsive de momento es lo más popular, pero es probable que esto cambie si es encuentran soluciones mejores, más parecidas a un diseño adaptado, pero con un menor coste.
¡La elección está en tu mano!
Empecemos por ¿Qué son?
Responsive Web Design (RWD) o Diseño Web Responsive es una técnica para desarrollar interfaces que hace uso de media queries y hojas de estilos, estableciendo unas medidas de ancho en tamaños proporcionales para hacer una estructura flexible y que el contenido de la web se adapte a las distintas resoluciones de pantalla. De esta forma la experiencia de usuario no se ve afectada. Por lo tanto, busca una mayor flexibilidad.
Adaptive Web Design (AWD) o Diseño Web Adaptado (no adaptativo, que sería una traducción incorrecta del término “adaptive”) es una técnica que utiliza tamaños de pantalla preestablecidos: 320px, 480px, 760px, 960px, 1200px, 1600px y se crea un diseño a medida para cada uno de esos tamaños. Cuando se detecta el dispositivo, se le suministra el diseño que mejor se adapta de entre los realizados. Por lo tanto, no es tan flexible pero sí más cómodo de realizar.
¿Qué tienen en común?
El objetivo de ambos es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visualizarlas. Hoy día las páginas web se visualizan en multitud de dispositivos como tabletas, teléfonos, libros electrónicos, portátiles, PCs… lo que hace necesario que nuestra web se pueda visualizar correctamente en cualquier dispositivo, y es aquí donde entra el momento de elegir cual es la que más nos conviene y cuales son sus diferencias.
La gran diferencia…
Para empezar uno se adapta con un diseño fluido y el otro con un diseño a saltos, como puedes ver en el ejemplo si pinchas en él.
El diseño responsive es fluido porque la estructura se ajusta de manera fluida independientemente del dispositivo en que se esté visualizando.
En cambio, el diseño adaptable se muestra en saltos ya que la página está mostrando algo diferente dependiendo del navegador o dispositivo en que se esté visualizando.
¿Quiere decir esto que el diseño adaptable es peor?
Todo depende del resultado que queramos.
Un diseño web responsive es mejor por su fluidez, por su adaptación suave y flexible, por la simplificación de su código y más eficiente en cuanto a la gestión de recursos, ya que se adaptará a futuros tamaños de dispositivos y pantallas sin tener que modificar tu CSS. También es el que más se ha popularizado, gracias a la existencia de numerosas plantillas en las principales plataformas como WordPress, Joomla, Prestashop…
Pero hay proyectos en los que es mejor definir diseños diferentes y específicos, ofreciendo experiencias distintas según el tamaño del dispositivo desde el que veamos la web.
0 comentarios