7 grandes diferencias entre Adaptive Web Design y Responsive Web Design – Blog Interdominioshttps://blog.interdominios.com Blog de hosting, tecnología y marketing digitalWed, 21 Mar 2018 10:13:34 +0000es hourly 1 7 grandes diferencias entre Adaptive Web Design y Responsive Web Designhttps://blog.interdominios.com/7-grandes-diferencias-entre-adaptive-web-design-y-responsive-web-design/ https://blog.interdominios.com/7-grandes-diferencias-entre-adaptive-web-design-y-responsive-web-design/#commentsFri, 25 Oct 2013 10:16:19 +0000http://blog.interdominios.com/?p=3766Tenemos 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

Leer más

The post 7 grandes diferencias entre Adaptive Web Design y Responsive Web Design appeared first on Blog Interdominios.

]]>
responsive-web-design

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.

A continuación os dejamos un recurso bastante interesante de 70 ejemplos de Modern Responsive Web Design y la infografía de SkyRocket donde se muestran estas 7 diferencias principales entre AWD y RWD, con la que nos hemos inspirado para escribir este artículo. (Haz clic en la imagen para ver en grande).

infografia_adaptive_web_design_vs_responsive_web_design

Y tú, ¿Qué sistema prefieres? ¿Encuentras alguna diferencia mas? Déjanos tu comentario más abajo. ☟☟

(Visited 2.325 times, 1 visits today)

Share

The post 7 grandes diferencias entre Adaptive Web Design y Responsive Web Design appeared first on Blog Interdominios.

]]>
https://blog.interdominios.com/7-grandes-diferencias-entre-adaptive-web-design-y-responsive-web-design/feed/6