Tenemos smartphones, tablets, proyectores de pantalla… y sin embargo muchas de nuestras websites aún no están diseñadas para ajustarse a los nuevos entornos de pantalla. ¿Está tu web adaptada a las nuevas pantallas 18:9? ¿Conoces las diferencias entre Adaptive Web Design y Responsive Web Design? Aunque ambos sistemas adaptan las webs a los diferentes dispositivos, no son iguales. Si vas a contratar una web, ten muy en cuenta estas diferencias por que tanto los presupuestos como el resultado final de tu web será diferente.
¿Qué es Responsive Web Design?
Es una técnica de desarrollo de interfaces web. Mediante el uso de media queries en las hojas de estilo dotan de una estructura flexible a los contenidos web adaptándolos a cada tipo de dispositivo. A través del Responsive Web Design se puede mostrar contenidos diferentes de una misma web en diferentes dispositivos, así como escalar a la perfección las imágenes a cada pantalla.
Si quieres saber más sobre Responsive Web Design te recomendamos echar un vistazo a la ponencia de Manuel Medina, profesional de usabilidad, ux, diseño de interacción y fundador de la revista digital Maspixel.
Diferencias entre Adaptive Web Design (AWD) y Responsive Web Design (RWD)
1. Identificación del Dispositivo
El Adaptive Web Design (AWD) utiliza el código del servidor o de cliente para detectar el dispositivo y adaptar la presentación de una web al formato de pantalla, utilizando las hojas de estilo CSS, aunque no siempre se ajustan del todo bien. El Responsive Web Design utiliza «Media Queries» para detectar el dispositivo ofreciendo imágenes escalables que se ajustan perfectamente al tamaño de la pantalla.
2. Optimización del Contenido
En el AWD la información es preseleccionada y únicamente se descargan los activos optimizados para móviles, es decir, puede que no todo el contenido de tu web llegue a mostrarse en todas las pantallas. En cambio, en el RWD se muestra toda la información para cada dispositivo. Todos los activos de la web se descargan en cada dispositivo.
3. Optimización de los dispositivos
En el AWD hay distintas plantillas para cada dispositivo. En el RWD hay una única plantilla que sirve para todos los dispositivos. Mucho más sencillo e intuitivo.
4. Diferentes características en AWD y RWD
Mientras que el Adaptive Web Design utiliza secuencias de comandos para ayudar con la adaptación a distintos dispositivos y tamaños de pantalla, detectando el tipo de dispositivo y sus funcionalidades para después cambiar el comportamiento de las webs; el Responsive Web Design incluye todas las características que un navegador web, smartphone o tablet pueda necesitar (flash, menús, javascript, resolución de imágenes o vídeos, etc).
5. Rendimiento de la web en AWD y RWD
En la AWD la descarga de la página es más rápida que en RWD ya que el Adaptive Web Design sólo carga los recursos necesarios para el dispositivos que está utilizando el usuario mientras que el Responsive Web Design descarga todos los elementos y recursos necesarios para todos los dispositivos (aunque el usuario sólo esté utilizando un único dispositivo).
6. Desarrollo de una web en AWD y RWD
Si ya tienes una web desarrollada, puedes partir de tu web para adaptarla a las diferentes pantallas con AWB. Si quieres tener una web totalmente RWD necesitarás reconstruir tu sitio nuevamente y empezar de cero. Es aquí donde el presupuesto se dispara.
7. Despliegue de una web en AWD y RWD
En un proyecto Adaptive Web Design tendrás que buscar programadores que tengan una sólida base de javascript y CSS para poder utilizar esta técnica y adaptar tu web. En un proyecto Responsive Web Design, las dificultades son otras. Si optas por el RWD verás como la fase de diseño y testeo puede alargarse más de la cuenta ya que la experiencia de usuario debe personalizarse para todos los dispositivos posibles.
Conclusiones
– El Adaptive Web Design no necesita rehacer una web por completo, tan sólo hacer ciertas modificaciones en su programación CSS y javascript. Su rendimiento es bueno en gran cantidad de dispositivos y su coste es menor que el Responsive Web Design.
– Por el contrario, el Responsive Web Design, pese a que su fase de diseño y testeo pueda alargarse más de la cuenta, es ideal para nuevas marcas y startups que comienzan de cero.
Y tú, ¿Qué sistema prefieres? ¿Encuentras alguna diferencia mas? Déjanos tu comentario más abajo. ☟☟
En mi experiencia tiene muchas más ventajas el RWD, muy buen post!
La verdad es que este artículo es para reenviar a los clientes. Excelente explicación.
No estoy de acuerdo en que se necesite más tiempo como sugiere el autor.
Se necesita tiempo para aprender a pensar de otra manera. Hay que desterrar la expresión «px» (pixel) y aprender a usar % (porcentaje) para todo, imágenes y textos (fonts). Porque también las fonts se redimensionan.
Una vez aprendido y digerido eso el desarrollo se hace más rápido. Y probar, lo que se dice probar, había que hacerlo antiguamente y hay que hacerlo ahora. Siempre.
Todo eso lo dice un ignorante, que no es de este oficio, que acaba de demostrar a los chapuceros profesionales que hacían una web para su hijo que sí que era posible lo que el pedía: una web «responsive». La he hecho yo y se la he pasado por delante de sus narices.
Y añadir que una vez adquiridos los conocimientos para el diseño «responsive» me he dado una vuelta por Internet inspeccionando las webs de los profesionales que se dedican a ello (aquí, no fuera de España): me dan pena. Todos (casi) parten de un ancho de 1000px y fuera de eso, el desierto para pantallas de mucho más de 1000 de ancho.
Esos 1000 px se verán sin redimensión en 1024×768 y 1360×768. Más abajo ¿qué sucede? Ahí empieza el baile.
Gracias al autor por tomarse la molestia de escribir el artículo, aunque yo no esté de acuerdo en el tiempo «extra» para un diseño «responsive». Es cierto, me costó bastantes horas aprenderlo pero ahora ¡puedo trabajar como una centella!
¡Saludos a todos!
Interesante post, yo aunque soy partidario del responsive desing creo que aun no es la solución y que la gente sobre todos los clientes no entiende que desde un dispositivo movil va a tardar mucho en cargar.
Lo mejor es hacer dos tipos de web aunque lo malo es que es más costoso.
Saludos y buen articulo
Gracias Rafa!
El Responsive Web Design es más complejo pero creemos que como primera toma de contacto se comprende mejor con estas 7 diferencias. Muchos éxitos con tus clientes. Saludos!!
Fantástica explicación de todos los pormenores de ambos sistemas. Se lo voy a enviar a todos mis clientes a ver si se enteran de una vez de las diferencias 😉