Diseño Adaptativo

Flowchart nodes

• Diseño Responsive

• Diferencias entre Diseño Adaptativo y Diseño Responsive

• Diseño Adaptativo

• Se usa un único diseño para todos los dispositivos donde se visualice nuestro sitio web.

• Uso de layouts flexibles y media queries.

•   Se establecen valores de tamaños proporcionales.

• Es flexible, se redimensiona a cualquier resolución.

• El código a utilizar es más complejo.

• Puede requerir mayor tiempo de carga del sitio web, sobre todo cuando se usa móviles.

• El costo de desarrollo es menor.

• Se usa diferentes diseños de acuerdo al tamaño de los dispositivos que se utilicen para visualizar nuestro sitio web.

• Utiliza componentes del progessive enhancement.

• Se establecen valores de tamaños de pantalla fijos y preestablecidos para cada uno de los dispositivos.

• No es tan flexible. No se ajusta exactamente a cualquier resolución.

• Sencillez a nivel de código.

• P R O S

• CONTRAS

• P R O S

• CONTRAS

• objetivo principal asegurar una mayor experiencia de usuario.

• objetivo principal asegurar una mayor experiencia de usuario.

• Menos tiempo de desarrollo y rentable

• Proporciona control sobre el diseño

• Mayor tiempo de carga (para dispositivos móviles con conectividad de datos inconsistente)

• Costoso y lento  

• Características del diseño:

• Adaptativo

• Responsive

• El diseño depende del dispositivo al que accedamos

• El contenido del sitio web se adapta por completo a la pantalla del dispositivo

• Los datos que envía la página web son siempre los mismos

• Se reestructuran los elementos que contiene el sitio con el fin de optimizar el espacio disponible

• Un solo diseño para todo tipo de dospositivo

• Se crean diseños específicos para los distintos dispositivos

• La misma dirección web para todos los dispositivos

• Limitado a dispositivos específicos

• Menos tiempo de carga: solo se descargan los archivos optimizados para dispositivos móviles.

• Requiere esfuerzos de diseño más cuidadosos.

• La carga del sitio web será mucho más rápida

• El costo de desarrollo es mayor porque se debe pagar por varios diseños que se adapten a las distintas resoluciones y pantallas y a los tamaños de los dispositivos.

• El contenido se puede actualizar fácilmente

• Los elementos cambian según el tamaño de la pantalla

• Mejor aspecto y sensación

• Elimina la necesidad de "hacer clic en siguiente"

• El mismo contenido para todos  los dispositivos

• Los elementos son flexibles,  incluso los multimedia

• Diseño+Adaptativo (binary/octet-stream)

• Diseño+Responsivo (binary/octet-stream)

• Tache (binary/octet-stream)

• Diferencias+Responsive+Vs+Adaptativo (binary/octet-stream)

• Dra. Jacqueline Carrera Rocher Jun/2021 UPAEP

• Emoji+Feliz (binary/octet-stream)