Diseño responsivo

DISEÑO RESPONSIVO.
Es una metodología que nos permite crear diferentes diseños que sean adaptables a diferentes dispositivos.
¿Cómo garantizamos que nuestro diseño sea responsivo?
1º Tenemos que empezar por dispositivos móviles. Esto nos garantiza que partimos desde el contenido básico hasta el contenido más complejo.
2º Separando las capas de contenido con la de funcionalidad. Así aseguramos que todo el contenido este accesible a todos los usuarios.
3º Utilizar sistemas de Grilla y columnas. Las columnas son referencia para dividir el ancho de la página. Así es más fácil el diseño.
DIFERENTES METODOLOGÍAS.
-. Mejora progresiva. (Progressive enhacement) Se parte de una base donde tenemos solo los elementos esenciales del diseño para un movil, e iremos ampliando la complejidad a medida que vamos subiendo hasta el PC.
-. Degradación Agraciada. (Graceful degradation) Empezamos desde una versión completa y vamos reduciendo la complejidad a medida que bajamos de dispositivo.
Este método se usa sobre todo cuando la web ya esta hecha y queremos adaptarla a móviles o tablets.
Estas metodologías afectan tanto al diseño como a la funcionalidad.
En diseño En Código
4º Animaciones 4º JS
3º Diseño Visual 3º CSS
2º Wireframes 2º HTML
1º Contenido 1º Data

Mis notas
![](

Si te sirvio o te gusto dale corazoncito 😃

Página web en la cual podemos hacer los diseños y los mockups de nuestra aplicación para web, mobile, tv, tablets etc.

https://marvelapp.com/

Mis notas
Metodología Progressive Enhancement: Consiste en partir de una base sólida a la que se le van añadiendo mejoras dependiendo de factores como tamaño de pantalla o sistema operativo.
Esto nos garantiza que los usuarios que tienen baja memoria o dispositivo más pequeño puedan acceder al contenido y los usuarios que tienen mejores dispositivos puedan ver el mismo contenido pero con la experiencia más enriquecida como animaciones y otras funcionalidades.
Este es el escenario ideal para empezar nuevas aplicaciones

Metodología Graceful Degradation: Consiste en partir de una versión completa a la que se le van removiendo capas de complejidad para garantizar su funcionamiento en todos los tamaños de pantalla y sistemas operativos.
El escenario ideal para usar ésta metodología es en aplicaciones que ya existen y deben mejorarse.

Infografía

Acá un texto que nos muestra por que es importante el Mobile First Design:
https://medium.com/@Vincentxia77/what-is-mobile-first-design-why-its-important-how-to-make-it-7d3cf2e29d00

La principal razón para desarrollar primero para móviles es que alrededor de mundo hay más personas utilizando celulares que computadoras.

es mejor empezar con la metodología. mobile first

Mis apuntes por si alguien los necesita!

1. Mobile First ⇒ Es preferible empezar el diseño con orientacion a dispositivos moviles pues aqui es donde hay menos espacio para ordenar informacion y es la plataforma mas utilizada en general
2. Progressive Enhancement (Mejora Progresiva) ⇒ Se desarrolla una base donde se encuentran las funciones e informacion importante, luego, se van agregando los detalles secundarios que mejoraran la experiencia de usuario
3. Graceful Degradation (Degradacion Agraciada) ⇒ Totalmente inverso al progressive enhancement. Se toma una version finalizada del producto y se empiezan a remover aspectos. Es usado comumente cuando ya tiene el diseño desktop y se requiere un diseño mobile

tuve que ver el vídeo a 0.85 para entenderlo, va un poco rápido.

Diseño responsivo (Responsive design)

Es una metodología de diseño que nos permite crear diferentes diseños que sean adaptables a diferentes tipos de pantalla

Conceptos:

• Empezar por dispositivos móviles

  garantiza que comencemos del contenido básico al complejo.

• Separa las capas de contenido y funcionalidad

  garantiza el acceso al contenido de la pagina, sin necesidad de correr scripts, ejecutar alguna acción o alguna animación compleja.

• Usa sistemas de grillas y columnas

  las columnas son una referencia del layout total de nuestra página y permiten ir mirando el ancho de nuestra página.

Metodologías

• Mejora progresiva (Progressive enhancement)

  Parte de una base sólida con elementos básicos y solidos de la aplicación a la que se le van agregando capas de complejidad, lo que permite que usuarios con baja memoria puedan seguir disfrutando del contenido y los usuarios con un mejor performance puedan disfrutar de una experiencia mas enriquecida.

• Degradación agraciada (Graceful degradation)

  Parte de una versión completa a la que se le van removiendo capas de complejidad para que se adapte a los diferentes dispositivos (tablets, móvil) garantizando su funcionamiento.

Mejora progresiva aplicada

Diseño:

1. Contenido
2. Wireframes
3. Diseño visual
4. Animaciones

Código:

1. Data
2. HTML
3. CSS
4. JS

Diseño responsivo

Es una metodología de diseño que nos permite crear diferentes diseños que sean adaptables a diferentes tamaños de pantalla.

Cómo garantizar que el Diseño sea responsivo

• Empieza por dispositivos móviles
• Separa las capas del contenido y de funcionalidad
• Usa sistemas de filas y columnas

Metodologías de Diseño responsivo

Hay distintas metodologías para poder trabajar con el Diseño responsivo. A continuación veremos algunas de ellas.

Mejora progresiva (Progressive enhancement)

Consiste en partir de una base sólida a la que se le va añadiendo mejoras dependiendo de factores como tamaño de pantalla o sistema operativo.

Vemos como tenemos en celular una fresa, en tablet dos frutas y en escritorio vemos varias frutas. Esto es como vamos agregando de una versión simple elementos para hacer más complejo el diseño.

1. Data: Partimos de un contenido
2. HTML: Wireframes, los cuales son bocetos.
3. CSS: Diseño visual
4. JS: Animaciones

Degradación ‘agraciada’

Consiste en partir de una versión completa a la que se le van removiendo capas de complejidad para garantizar su funcionamiento en todos los tamaños de pantalla y sistemas operativos. Esta metodología se recomienda en casos en los que se trabaja con una página que ya está hecha y de la cual tenemos que adaptar para otro tipo de pantallas como celular o tablet.

Vemos como tenemos una versión de como Empieza una versión compleja, y como esta versión empieza a cambiar la distribución y el tamaño para ajustarse a pantallas de menor tamaño

🐱‍💻 El diseño responsivo permite adaptar el contenido según las dimensiones del dispositivo.

En esta web pueden ver diseños responsivos y como se realizan según su versión movil o de escritorio. MediaQueries

Que ganas de comenzar a hacer mi propia página web. 😍

Nuevamente nos llaman la atención, primero debemos empezar por lo básico y luego pasar a lo más complejo.

Metodologías del Responsive Design:

• Mejora progresiva (progressive enhancement)
  

  

• Degradación agraciada (Graceful degradation)
  

  

Buenos días, dejo mi aporte, espero les sirva 😃

DISEÑO RESPONSIVO
Es una metodología de diseño que nos permite crear diseños que se adpten a los diferentes tipos de pantalla.

• Se debe empezar con los dispositivos móviles.

• Debemos separar las capas de contenido y funcionalidad.

• Utiliza sistemas de grillas y columnas.

Metodologías de Diseño Responsivo
Mejora Progresiva (Progressive Enhancement)
Consiste comenzar de una parte solida donde se tiene los elementos básicos de la aplicación y en esta se le va añadiendo las mejoras y las capas de complejidad. Esto permite a los usuarios que tienen hadware de menor capacidad puedan ingresar a nuestro contenido básico y los que tienen hadware mas potente gocen de una mejor experiencia. Sobre todo cuando hablamos de tamaño de la pantalla y memoria RAM.
Degradación Agraciada (Graceful Degradation)
En esta partimos de una versión compleja y se va quitando capas de complejidad para que se adapte a dispositivos móviles.

*Estas metodologías también aplican al código

1. Datos - Contenido
2. HTML - Wireframes
3. CSS - Diseño Visual
4. JS - Animaciones

Mejora progresiva aplicada.
Estas metodologías no solamente aplican al diseño sino también al código.

En diseño primero partimos de un contenido de nuestros datos. Luego hacemos los wireframes que son bocetos. Luego hacemos nuestro diseño final y finalmente añadimos las animaciones.

Lo mismo sucede cuando vamos a programar. Siempre vamos a empezar desde los datos, luego hacemos la maquetacion basica con HTML, luego se añaden los estilos con CSS y por ultimo el JavaScript. Si empezamos por JS primero, nuestra aplicación va a estar basada en scripts y no en web semántica que es lo ideal.

Las maquetas, un tipo de diagrama de diseño de alta fidelidad, debe mostrar de manera estética marcos de información, contenido y funciones. A diferencia que un wireframe, una maqueta se ve más como el producto terminado, pero no es interactiva o clickeable. Es más buen una representación gráfica. Esto puede ser útil, por ejemplo, para proveer una imagen a los invesionistas de cómo puede verse un producto terminado, y ayuda a los miembros de un equipo a revisar el producto visualmente.

Un prototipo está muy cerca de ser un producto terminado. Es aquí donde los procesos pueden ser simulados y se puede testear la interacción con usuarios. El prototipado temprano puede ahorrar gran cantidad de costos de desarrollo y tiempo para que el trabajo de arquitectura back-end del producto no sea en vano debido a una interfaz de usuario poco razonable. Un prototipo es una excelente herramienta para obtener feedback (retroalimentación) de los usuarios y probar el producto.
.
Ejemplos de herramientas online para hacer prototipos:
.
Figma
.
Marvel

Un wireframe es una manera de representar un producto a baja resolución, puede eficientemente definir estructuras y esquemas de un diseño. Un wireframe es una representación básica. El diseño de un wireframe no necesita ser minucioso, pero debe expresar las ideas de diseño y no debe olvidar las partes importantes que lo componen. Un wireframe es el canal que ayuda a los miembros del equipo a entender sus proyectos de mejor manera.

Hasta el momento no había pensado en eso, pero me gusta la idea de la metodología mobile first.

Diseño responsivo:
Metodología de diseño que nos permite crear diseños adaptables a diferentes pantallas y dispositivos

¿Cómo se garantiza que el diseño de una aplicación es responsivo?

• Empieza por separar dispositivos móviles, esto para partir del contenido básico como base al contenido mas complejo

• Separar las capas de contenido y funcionalidad, garantiza el acceso al usuario a todo el contenido en la pagina.

• Usar un sistemas de grillas y columnas, para tener una referencia del layout total en la pagina y de esta manera adaptar los contenidos presentados.

Metodología para realizar diseño responsivo

• Mejora progresiva (Progressive enhancement): Consiste en partir de una base solida a la que se le añade mejoras dependiendo de factores como tamaño de pantalla o sistema operativo (S.O.)

• Degradación agraciada (Graceful degradation): Consiste de partir de una versión completa a la cual se la van removiendo capas de complejidad para garantizar su funcionamiento en todos los tamaños de pantalla. ej. una aplicación de escritorio que es adaptada a un app movil

Mejora progresiva aplicada

1. Parte del contenido - Datos

2. Maquetado básico de la aplicación- HTML

3. Estilos y fuentes- CSS

4. Interactividad y animaciones - Javascript

Mobile first, es lo que he aprendido

Considero muy acertado el consejo de la Instructora, debemos empezar por diseño para dispositivos móviles.

Accesibilidad y diseño

Mejora progresiva Aplicada

Aprendí CSS a los golpes hace años, y en esta clase aprendí que lo que siempre hacia para hacer responsive design era degradación agraciada, probaré ahora usar mobile first

¿que es web semantinca?

En otras palabras:

El diseño responsivo es un diseño que responde al tamaño del dispositivo desde el que se está visualizando la web, adaptando las dimensiones del contenido y mostrando los elementos de una forma ordenada y optimizada sea cual sea el soporte.

Metodologías de Diseño Responsivo
Mejora Progresiva: A partir de una base sólida a la que se le van añadiendo mejores dependiendo de factores de tamaño de pantalla o sistema operativo.
Degradación agraciada: pare de una versión completa a la que s el van removiendo a capas de complejidad para garantizar su funcionamiento en todos los tamaños de pantalla y sistemas operativos.

Super, le estoy entendiendo mucho comparándolo con experiencias.

Muy buena clase, yo aplico mobile first y es muy recomendable, dado que el lugar desde el cual el usuario consulta la mayoria de las paginas es el celular y tener nuestra pagina visualmente agradable y con una buena UX nos da puntos extra.

En desarrollos completamente nuevos es ideal comenzar usando la metodología de mejora progresiva.

Si se está actualizando un sitio web ya existente se utiliza la metodología de degradación agraciada.

Ahora entiendo porque escucho tan seguido la frase “Mobile first”. Pensé que se refería a que se accede más a través de móviles

Siempre será mejor opción comenzar desde móviles, ya que así solo se van modificando los elementos necesarios para distribuir correctamente el espacio.

Justamente vengo de tomar estos dos cursos :

Responsive Design
y el de CSS Grid layout con el profesor Leonidas Esteban. Super recomendados para ampliar la forma como vemos el diseño de una pagina

Diseño responsivo

Es una metodología que nos permite crear diferentes diseños que sean adaptables a diferentes dispositivos (tamaños de pantalla).

¿Cómo garantizamos que nuestro diseño sea responsivo?

1. Tenemos que empezar por dispositivos móviles. Esto nos garantiza que partimos desde el contenido básico hasta el contenido más complejo.
2. Separando las capas de contenido con la de funcionalidad. Así aseguramos que todo el contenido este accesible a todos los usuarios.
3. Utilizar sistemas de Grilla y columnas. Las columnas son referencia para dividir el ancho de la página. Así es más fácil el diseño.

Diferentes metodologías

• Mejora progresiva. (Progressive enhacement) Se parte de una base donde tenemos solo los elementos esenciales del diseño para un movil, e iremos ampliando la complejidad a medida que vamos subiendo hasta el PC.

• Degradación Agraciada. (Graceful degradation) Empezamos desde una versión completa y vamos reduciendo la complejidad a medida que bajamos de dispositivo.

Este método se usa sobre todo cuando la web ya esta hecha y queremos adaptarla a móviles o tablets.

Mejora progesiva aplicada

Siempre comienza desde lo mas basico y pequeño (Imagina que debes optimizar tu diseño al Alcatel de tu primito pequeño), luego, poco a poco vas aumentando la experiencia, con animaciónes y cosas por el estilo. Esto es Mejora progresiva
Aveces hiciste primero la version mas tocha, con mas animaciones y mejor diseño, pero el jefe quiere que optimices el diseño al Alcatel de tu primo, asi que ahora debes ir restando funcionalidades y adaptandolo a otro tipo de dispositivos. Esto es Degradacion agraciada

Si no tienes un primito pequeño con Alcatel, seguro el morro castroso de tu salon tiene es celular jajajaj

El diseño responsivo es clave en la creación de sitios web modernos, garantizando una experiencia fluida y consistente en todos los dispositivos, desde smartphones hasta computadoras de escritorio. Es como tener un traje a medida para cada pantalla.

Diseño Responsivo

• Empresa por dispositivos móviles
• Separa las capas de contenido y funcionabilidad
• Usa sistema de grillas o columnas

<aside>
💡 Utilizas las mejoras progresivas

</aside>

Deiseño mobile first ó metodologia progresiva para los nuevos desarrollos y metodologia degradacion agraciada para cuando tenemos ya un producto y se requiere adaptar a los dispositivos mas pequeños

Tipos de responsive

Mobile first y mejora progresiva ❤️

Hay distintas metodologias para realizar responsive design teniendo en cuenta la accesibilidad, the proressive enhancement se recomienda porque se parte de una base solida a la que se le van añadiendo mejoras dependiendo de factores como tamaño de pantalla o sistema operativo del equipo.
Se enriquece la experiencia del usuario dependiendo del equipo receptor, siempre se garantiza un conendio basico.

Qué es un Wireframe ?

Fuente: Aquí

Es muy importante pensar en Mobile First, eso nos alegará de meternos más en problemas, pero uno también debe de adaptarse a esos problemas que son los que normalmente pueden pasar.

El diseño responsive te permite llegar a un público más amplio con el que podrás satisfacer a los clientes que buscan una experiencia móvil atractiva.

Metodologías para aplicar Responsive Design

Metodología para crear diseños que se adapten a los diferentes tamaños de pantalla.

Progressive enhancement

Consiste en partir de una base solida a la que se le añaden mejoras dependiendo de factores como tamaño de pantalla o el sistema operativo

Graceful degradation

Partimos de una versión mas completa a la que se le van removiendo capas para hacerla mas sencilla garantizando su funcionamiento en todas pantallas y sistemas operativos.

Comenzar desde desktop a mobile es mucho mas complicado y requiere mas código en muchos casos. Lo mejor es comenzar mobile first.

El diseño responsivo es simplemente adaptar el diseño de tu web a todos los tamaños de pantalla del mercado, conservando la estructura principal, sin que se pierda la esencia de tu marca.

📌 RWD: Responsive Web Design

Nos permite generar diferentes tipos de diseños que sean adaptados a todas las pantallas.

Para realizar un buen RWD, sigue las siguientes recomendaciones:

✨ Empieza por dispositivos moviles.

✨ Separa las capas de contenido y funcionalidad.

✨ Usa sistemas de grillas y columnas.

⭐ Mejora Progresiva:

Es una metodología que consiste en partir de una base solida a la que se levan añadiendo mejoras dependiendo de factores como tamaño de pantalla o sistema operativo.

Tenemos los elementos base y poco a poco le vamos añadiendo mayores funcionalidades.

❌ Degradación Agraciada:

Es una metodología que consiste en partir de una versión completa a la que se le van removiendo capas de complejidad para garantizar su funcionamiento en todos los tamaños de pantalla y sistemas operativos.

Tenemos todos los elementos y poco a poco vamos retirando funcionalidades para adaptarla a otros dispositivos,

Definitivamente comenzar por el patron de diseño movil first y la metodologia Progressive enhancement es una buena practica. Que garantiza la escalabilidad del proyecto.

RESPONSIVE DESIGN
.
RESPONSIVE DESIGN “”diseño responsivo” es una metodología de diseño que permite crear diferentes diseños que sean adaptables a diferentes tamaños de pantalla.
.
para garantizar que la aplicación WEB sea responsive design el desarrollo debe comenzar por dispositivos móviles de esta manera se garantiza que desde el contenido básico hasta el mas complejo sea responsive.
.
Separar las capas de continuidad garantiza al usuario el acceso a todo el contenido de la pagina sin tener que ejecutar scripts, realizar alguna acción ni animaciones complejas.
.
Utilizar sistema de grillas y columnas. Donde las columnas son una referencia del Layout total de la pagina y sirve para medir el width de la pagina. De esta manera es mas fácil adaptar contenido como textos, imágenes, videos, etc.

soy un niño

Me encanta como va este curso hasta ahora, rápido, fácil de entender y conciso.

El responsive design se trata de crear diferentes diseños para diferentes tamaños de pantalla. Es importante empezar por dispositivos móviles. Ésto garantiza que empecemos por los requerimientos mínimos, que separa las capas de contenido a esta metodologia se le conoce como

• “mejora progresiva” o Progresive enhancement.

• Trata de que nuestro diseño sea visible para diferentes resoluciones de pantalla.
• Se empieza a desarrollar por dispositivos móviles.
• Separa las capas de contenido y funcionalidad.
• Usa sistema de grillas y columnas.

<h6>Mejora Progresiva:</h6>

• Trata de que mientras va aumentando la resolución le vamos aumentando mejoras.

<h6>Degradacion ‘agraciada’:</h6>

Partimos de una versión completa y vamos reduciendo funcionalidades mientras menos resolución.

1. Contenido.
2. Wireframes.
3. Diseño visual.
4. Animaciones.

Graceful degradation: Proyectos que por alguna razón solo tienen vista de escritorio. Iremos de pantallas grandes a pantallas pequeñas.

Progressive enhancement: El must-go para cuando empezamos un nuevo proyecto. Siempre hay que pensar primero en el usuario de smartphone porque es la gran mayoría de usuarios. Iremos de pantallas pequeñas a pantallas grandes.

Muchos devs de apps tienen que ver esta clase xD

El diseño responsivo pretende que con un único diseño web, todo se vea correctamente en cualquier dispositivo.

Degradación agraciada

Mejora progresiva

¿Cómo garantizamos que nuestro diseño sea responsivo?
1º Tenemos que empezar por dispositivos móviles. Esto nos garantiza que partimos desde el contenido básico hasta el contenido más complejo.
2º Separando las capas de contenido con la de funcionalidad. Así aseguramos que todo el contenido este accesible a todos los usuarios.
3º Utilizar sistemas de Grilla y columnas. Las columnas son referencia para dividir el ancho de la página. Así es más fácil el diseño.
DIFERENTES METODOLOGÍAS.
-. Mejora progresiva. (Progressive enhacement) Se parte de una base donde tenemos solo los elementos esenciales del diseño para un movil, e iremos ampliando la complejidad a medida que vamos subiendo hasta el PC.
-. Degradación Agraciada. (Graceful degradation) Empezamos desde una versión completa y vamos reduciendo la complejidad a medida que bajamos de dispositivo.
Este método se usa sobre todo cuando la web ya esta hecha y queremos adaptarla a móviles o tablets.
Estas metodologías afectan tanto al diseño como a la funcionalidad.
En diseño En Código
4º Animaciones 4º JS
3º Diseño Visual 3º CSS
2º Wireframes 2º HTML
1º Contenido 1º Data

DISEÑO RESPONSIVO.
Es una metodología que nos permite crear diferentes diseños que sean adaptables a diferentes dispositivos.

Sin duda alguna la mejor metodologia es la mejora progresiva, empezar el desarrollo desde Mobile first siempre va ser el trabajo un poco mas sencillo

El diseño responsivo es importante porque nos permite garantizar o asegurar que el contenido de nuestra paginas pueda llegar al usuarios en las diferentes pantallas, desde los móviles mas básicos, a los mas complejos.
Existen dos metodologías de diseño responsible:

1. Mejora Progresiva (recomendada cuando se inicia desde cero)
   Consiste en comenzar con el contenido básico y terminar con el contenido con una experiencia más dinámica. Permitiendo que los dispositivos básicos puedan acceder al contenido.
2. Degradación agraciada ( recomendada cuando el proyecto ya está diseñad)
   Esta se basa en comenzar con todo el contenido y vamos eliminando capas para que se adapte a los dispositivos básicos.

DISEÑO RESPONSIVO

1. Mejora progresiva: de pequeño a grande.(movile a desktop)
2. Degradación agraciada:de grande a pequeño(desktop a movile )
3. Mejora Progresiva aplicada: Contenido, Wireframes, Diseño visual, Animaciones.

Les recomiendo el curso de DIego de granda sobre la practica de Mobile First, les dejo esta pagina que yo me arme en la cual lo disfrute muchísimo.

https://codepen.io/nicolasgonz/pen/eYRdEOx

Me ha interesado, la seccion de separar las capas de contenido y funcionalidad, con el fin de garantizar el acceso a todo el contenido, por que muchas paginas de veras utilizan distintos scripts o animaciones y el resultado es que la pagina se ve afectada en rendimiento, me parece importante tener este puento en cuenta desde el diseño.

4. Diseño responsivo

Conocido también como responsive design, es la metodología de diseño que se adapte a diferentes tamaños de pantalla.

Para ello, primero debemos empezar por dispositivos móviles (mobile first).

Separa las capas de contenido y funcionalidad.

Usa sistemas de grillas (grid) y columnas (flex).

Existen varias metodologías para aplicar responsive design, tenemos:

1. Metodología progresiva (Progressive enhancement): Consiste en partir de una base sólida, donde tenemos los elementos esenciales de nuestra aplicación, y luego se va aplicando capas de complejidad.

2. Degradación “agraciada” (Graceful degradation): Consiste en partir de una versión completa a la que se le van removiendo capas de complejidad para garantizar su funcionamiento en todos los tamaños de pantalla y sistemas operativos.

Si aplicamos la Mejora progresiva aplicada, sería así:

Primero Contenido, luego wireframes, luego diseño visual, y finalmente animaciones. Es decir primero Data, luego HTML, luego CSS y finalmente JS.

4.-Diseño responsivo

• Empieza por dispositivos móviles.
• Separa las capas de contenido y funcionalidad, que nos sirve para garantizarle al usuario el acceso a todo el contenido de la página sin tener que ejecutar scripts o hacer alguna acción.
• Usa sistema de grillas y columnas.

Hay distintas metodologías para hacer responsive design, como:

• Mejora progresiva (Progressive Enhancement): Es la recomendada, se parte de una base sólida en donde tenemos los elementos escenciales y básicos de nuestra app y luego le vamos añadiendo capas de complejidad; Esto nos permite garantizar a los usuarios con baja memoria o dispositivo pequeño puedan acceder al contenido y los usuarios con mejores dispositivos puedan ver el mismo contenido pero con una mejor experiencia.
• Degradación agraciada (Graceful Degradation): Se parte de una versión completa y se le empiezan a quitar capas de complejidad para que se adapte a tablet, móvil y dispositivos más lentos. Se recomienda en escenarios específicos como cuando adaptamos una página que ya está hecha.

Estas metodologías no solo aplican al diseño, también aplican al código

Es una buena idea empezar desde lo que creemos que es fundamental para que desde ahí se cree el diseño para dispositivos y desde ahí irlo completando para las versiones con mas juguetes de escritorio

Les recomiendo la extensión de Windows Resizerr para poder der desde el navegador como se vería desde distintos dispositivos de una manera más rápida.

Siempre debe iniciar por dispositivos móviles, separar por contenido y funcionalidad.

Responsive Design?
Son esas técnicas que usamos para adaptar nuestras aplicaciones web {pagina) a la mayor cantidad de pantallas, de pequeñas a grandes o de grandes a pequeñas… 😄

Responsive Design, Diseño responsivo
Metodología que nos permite garantizar que nuestro diseño sea adaptable a diferentes tamaños de pantalla.
• Empezar por dispositivos móviles
• Separar las capas de contenido y funcionalidad.
• Usa sistemas de grillas y columnas
Metodologías de Responsive Design
• Mejora progresiva: Consiste en partir de una base sólida a la que se le van añadiendo mejoras dependiendo de factores como tamaños de pantalla o sistemas operativos.
Degradación agraciada, Partir de una versión completa a la que se le van removiendo capas de complejidad, esto se puede aplicar para adaptar páginas ya hechas.

aprendiendo cosas nuevas con cada clase.

W I R E F R A M E
Es el plano, o esquema, de la pagina.
Es una guía para establecer cual va a ser el orden del contenido, como se va a mostrar y en que forma va a hacerlo.
El wireframe no se enfoca en los aspectos visuales como tipografía, ni colores.
Se enfoca en establecer:
.

• El tipo de información
• La cantidad de funciones
• La jerarquía de la información
• La forma en la que se va a mostrar el contenido
• La forma en la que va a cambiar el sitio con diferentes situaciones de pantalla

Cuando publicas el comentario incompleto jaja*

Recomendar el curso específicamente de Accesibilidad: https://platzi.com/clases/accesibilidad-web/

considerar mobile first para iniciar el diseño.

Porque habla tan rápido, será la hermana de Fazt…?

Qué es el responsive design

1.- Mejora progresiva

Entiendo que tanto PE y GD garantizan el funcionamiento del producto en todos los dispositivos, cierto?