Diseño Responsivo y Adaptativo

Diseño Responsivo y Adaptativo

Es importante diseñar para varios dispositivos, de esta forma nuestro usuario tendrá la mejor experiencia. Siempre es bueno diseñar para desktop, tablet y mobile.

2 metodologías para hacerlo

Diseño adaptativo: En esta seleccionamos tamaños definidos de pantalla, y diseñamos a la perfección para cada uno de ellos. En cuestión de implementación sus ventajas son Carga menos hacia mandar el código al usuario. Pero nos puede ocasionar problemas en SEO y si el usuario tiene un dispositivo más grande de lo que hayamos diseñado pueden quedar huecos. mas rápido por lo que es probable que cargue algunos errores.

Diseño responsivo: Cuando se hace la implementación el diseño es totalmente fluido y se adapta a cualquier tipo de dispositivo, un tiempo de carga más lento pero nos ayuda a mejorar el SEO **** y a darle una mejor experiencia a los usuarios.

Esto es fundamental en la programación.

Por eso es tan importante el tema de las columnas en los wireframes, te permiten saber cómo adaptarlo.

• Web: 12 Columnas.
• Tablet: 8 Columnas.
• Smartphone: 4 Columnas.

En herramientas como Boostrap encontrarán que el diseño responsive está entorno a esto y de seguro muchas más.

¿Por qué puede generar problemas en SEO el diseño adaptativo? ¿Por qué Tannia no explica con más detalle? Este es el curso más malo que he tomado en Platzi 😦

Diseño adaptativo
Tamaños definidos de pantalla y diseñamos para cada uno de ellos.

• Ventajas: Carga menor al enviar el código al usuario.
• Desventajas: Es probable que en diferentes dispositivos puede haber errores.

**Diseño Responsivo: **
Diseño fluido que se adapta a cualquier dispositivo.

• Ventajas: Se adapta a cualquier dispositivo, mejor experiencia de usuario.
• Desventajas: Se tarda más en cargar.

Entiendo que quieran dar explicaciones con videos cortos para no aburrir, pero creo que deberían poner cuidado en algunos términos porque Tannia da por hecho que ya los conocemos y no siempre es así. Vi que e por ahí alguien preguntaba qué es el SEO y no le dieron respuesta por lo que mejor decidí buscar el término en internet.

Que es un SEO?

Este curso deja muchos vacíos, creo que debería de tomarse un poco más de tiempo para ejemplos más claros y explicar terminología que no es tan común para todos.

Hola a todos!, estuve investigando un poco y encontré que las paginas web bajo un diseño Responsive (Un solo diseño que se acomoda para todos los tamaños de pantalla) pueden ser más amigable con el SEO* porque a la larga permite que la experiencia de LA MAYORIA de usuarios pueda ser más fluida y agradable a comparación de una web Adaptativa (donde deben haber diferentes diseños especificos para el tamaño (especifico) de cada pantalla). Lo que sugiere que con el diseño Adaptativo habrán usuarios con algúnas pantallas a quienes no se les va a acomodar bien la pagina web, (y por ejemplo la jerarquia de información se podria ver afectada), lo que a la final termina siendo una experiencia negativa para ALGUNOS usuarios. y este factor negativo es castigado por los buscadores como Google (lo cual afecta el SEO, ya que el SEO incluye no solo la revisión de palabras claves de busqueda si no tambien optimización de contenido, EXPERIENCIA DE USUARIO, diseño de la web y hasta buen contenido actualizado frecuentemente).

*SEO (Search engine organic) es agroso modo cumplir una serie de caracteristicas (definidas por ejemplo por Google) para ubicar tu pagina web organicamente (o sea sin pagar) en los primeros resultados de una busqueda que hagas. La experiencia de usuario es una de esas caracteristicas que Google califica para ver si te pone de primero en sus busquedas.

Todavia no he revisado la lectura recomentada, me corrigen si estoy equivocado. Saludos!

Como diseñadores es super importante que aprendamos a diseñar para diferentes dispositivos, de esta manera podemos asegurar que nuestro usuario siempre va a tener la mejor experiencia, lo recomendado en clase es que siempre diseñemos para desktop, tableta y dispositivos móviles.

Todos los prototipos de alta fidelidad hechos anteriormente deben ser adaptados a estos tres dispositivos mencionados antes.

En cuestión de metodologías hay dos maneras de hacerlo:

1. Diseño adaptativo, en esta seleccionamos tamaños definidos de pantalla y diseñamos a la perfección para cada uno de ellos, en cuestión de implementación tiene varias ventajas la primera es que tiene una carga menor al momento de mandar todo el código hacia el usuario pero también nos puede crear problemas en SEO y si el usuario tiene un dispositivo un poco más grande al que planeamos es posible que queden huecos.

2. Diseño Responsivo, de esta manera a la hora de que se hace la implementación el diseño es totalmente fluido y se adapta a cualquier tamaño de dispositivo la desventaja es que nos da un tiempo de carga más lento pero nos ayuda mucho mas a mejorar el SEO y dar una experiencia a todos los usuarios.

Diseño Responsivo y Adaptativo
Es importante primero que nada aprender a diseñar para varios dispositivos:desktop-dispositivo movil-tablet; de esta manera nos aseguramos que el usuario tenga la mejor experiencia adaptando a esos tres tipos de pantallas. Para eso utilizaremos dos metodologias de diseño:

Por eso es tan importante el tema de las columnas en los wireframes, te permiten saber cómo adaptarlo.

Web: 12 Columnas.
Tablet: 8 Columnas.
Smartphone: 4 Columnas.
En herramientas como Boostrap encontrarán que el diseño responsive está entorno a esto y de seguro muchas más.

Diseño adaptativo: En esta seleccionamos tamaños definidos de pantalla, y diseñamos a la perfección para cada uno de ellos. En cuestión de implementación sus ventajas son Carga menos hacia mandar el código al usuario. Pero nos puede ocasionar problemas en SEO y si el usuario tiene un dispositivo más grande de lo que hayamos diseñado pueden quedar huecos. mas rápido por lo que es probable que cargue algunos errores.

Diseño responsivo: Cuando se hace la implementación el diseño es totalmente fluido y se adapta a cualquier tipo de dispositivo, un tiempo de carga más lento pero nos ayuda a mejorar el SEO **** y a darle una mejor experiencia a los usuarios.
Desventajas: Se tarda más en cargar.

Se queda corto en esta parte, creo que es importante redundar más en este tema que incluye más temas dentro como SEO, código, tamaño de imágenes ETC.

Es importante primero que nada aprender a diseñar para varios dispositivos:desktop-dispositivo movil-tablet; de esta manera nos aseguramos que el usuario tenga la mejor experiencia adaptando a esos tres tipos de pantallas. Para eso utilizaremos dos tipos de diseño:

-Diseño adaptativo: tamaños definidos de pantalla, mas rápido por lo que es probable que cargue algunos errores.

-Diseño responsivo se adapta a cualquier tamaño de dispositivo la desventaja es el tiempo de carga mas lento.(mejor experiencia de usuario).

First mobile luego desk

😃

El Responsive Design nos permite hacer proyectos multiplataformas, teniendo en los cabios en las diagramaciones y la importancia de cada elemento en nuestra interfaz.

Para aquellos que como yo no podían descargar los recursos de la página que la profesora ha mencionado a lo largo de las clases, prueben con otro navegador diferente a Chrome. Con Firefox a la primera pude descargar los libros que dejaban en lecturas.

Gracias por los recursos

Ya tengo gran cantidad de material para leer sobre diseño y UX, aquí nunca se para de aprender!

-Diseño Adaptativo: Tamaños definidos de pantalla, mas rápido pero es probable que carguen algunos errores.

-Diseño Responsivo: Se adapta a cualquier tamaño de dispositivo, pero el tiempo de carga es mas lento.(Mejor experiencia de usuario).

Por ellos es mejor diseñar en bloques responsivos para que se vallan ajustando lo mejor posible

creo que la mejor forma es diseñar para adaptativo asi se hace una mejor integración a la hora que el front escriba el código

Me hubiera gustado que hubieran empezado y guiado el curso con Mobile First

Siempre debemos diseñar para diferentes dispositivos, esto nos asegura que el usuario tenga siempre la mejor experiencia (Mobile, Tablets, Desktop)

Metodologias
Diseño adaptativo: Esto consiste en definir el tamaño especifico de la pantalla y diseñar a la perfeccion para cada una de ellos.
En implementacion tiene ventajas, se le manda una carga menor de codigo hacia el usuario. Pero puede tener problemas en SEO. O si nuestro usuario lo abre en una pantalla mas grandes de la que nosotros hemos diseñado puede que queden huecos.

Diseño responsivo: El diseño es totalmente fluido y se adapta a cualquier tamaño de pantalla. Desventaja es que la carga un poco mas lenta pero ayuda a mejorar el SEO y dar una buena experiencia a todos los usuarios

Martín Coronel
UX/UI Design

Web: https://martincoronel.com/

Diseño adaptativo:
pros: tener menor carga al mandar el código
contras: complica el SEO y puede variar según el dispositivo

Diseño Responsivo:
pros: se adapta perfectamente a la pantalla en la que se esta viendo
contras: aumenta los tiempos de carga