Progressive Enhancement vs Graceful Degradation

Clase 7 de 32 • Curso de Responsive Design 2015

Comentarios

Dayan Betancourt

student•

Estrategias para hacer un Diseño Responsive:

1.- Progressive Enhacement: se empieza del movil y se avanza al desktop y también es conocida como la técnica Mobile First.
2.- Graceful Degradation: se empieza del desktop y se avanza al movil.

Alex Miño

student•

No. Lee mi comentario más arriba y este enlace de la W3C, el profesor lo explicó mal.

Mario Ruano Fernández

student•

En mi opinión, no considero que la explicación de Carlos sea incorrecta.

Progressive Enhancement y Graceful Degradation

Efectivamente, como tal, son dos metodologías diferentes a la hora de afrontar el desarrollo del código.

De forma técnica, en el caso de Progressive Enhacement entendemos el desarrollo de la web desde un punto de vista de compatibilidad mínima para todos los usuarios, para, a partir de ahí ir escalando en la experiencia ofrecida.

El caso de Graceful Degradation sería inverso. Entender el desarrollo de la web desde un punto de vista de experiencia máxima e ir adaptando la misma de la mejor forma posible a situaciones no tan propicias.

Metodología aplicable también en responsive design

Es aquí donde considero que esta lección impartida por Carlos es totalmente correcta.

Se aplican ambas metodologías al responsive design. En este caso, al desarrollo del código CSS.

Perfecto.

Entender Progressive Enhancement como Mobile First

Siempre he considero que no hay un inicio mejor que otro. Todo depende del proyecto a desarrollar.

A pesar de eso, Mobile First es una tendencia posterior a Desktop First (ya que desktop era lo único que teníamos antes).

De este modo, entender Progressive Enhancement como Mobile First sería correcto, al plantear una base de compatibilidad mínima y poner la atención en dispositivos a nivel de responsive design.

Por otro lado, se podría considerar de forma muy acertada la ejecución de la metodología Graceful Degradation en cada acción de adaptación de desktop a mobile (no necesariamente como Desktop First), dado que toma una experiencia de partida, pensada para una situación y contexto (en este caso el desktop browser), y la va solucionando a medida que esta cambia.

No veo error, más bien que quizás faltó matizar que son dos metodologías que bien pueden aplicarse a la totalidad del desarrollo, no sólo a nivel de diseño CSS, sino también al HTML en si y al Javascript.

Alex Miño

student•

Hay un error bastante grande en este vídeo. Lo que el profesor explica, no es progressive enhancement y graceful degradation, es Mobile first vs Desktop first.

Progressive enhancement es que nosotros a la hora de maquetar y hacer nuestros estilos nos fijamos en tratar de abarcar la mayoría de navegadores. Fijándonos así en que sea accesible.

Graceful degradation es justo al revés. Nos fijamos no en la accesibilidad, sino en poder lanzar nuestro producto cuanto antes, por lo que si funciona en los navegadores modernos, habremos logrado nuestro objetivo.

La W3C tiene toda esta parte bastante bien explicada:

Aparte, Wakkos en su curso de 2015, ya explicó que progressive enhancement enfocado a nuestro CSS, significaba ir separando en trozos cada parte para que así, podamos adaptarlo hacia más navegadores. En sus vídeos comparte este artículo que explica que la técnica de Progressive enhancement es un método para adaptar nuestra web y no tiene nada que ver con por dónde empezamos a desarrollar.

Alex Miño

student•

Además ampliando mi comentario, en el artículo del cual saca las fotos, se habla de Mobile first y de cómo está técnica nos ayuda a centrarnos en mostrar el contenido importante de nuestro sitio y NO fijarnos en efectos o elementos extra. Llamándose también "content first".

Nada que ver con el progressive enhancement y graceful degradation.

helen osman

student•

Y Quien dice que tenemos que creer todo lo que dice la W3C ?

Luis Alvarez Almeida

student•

Excelente explicación pero me queda una duda sobre las media query min-width y max-with ...

Raúl Segura Nabarret

student•

mindwidth significa que el dispositivo debe tener como mínimo un cierto ancho para tomar un diseño, e.g.: debe tener minimo x cantidad de píxeles para poder verse como tablet. Por el otro lado al definir como maxwidth, el dispositivo debe tener como máximo esa cantidad de píxeles. E.g.: debe tener como máximo x cantidad de píxeles para que siga siendo un smartphone.

Julio Gutierrez

company_admin•

Técnicas de Desarrollo:
Progressive Enhancement = Móvil -> Tablets - Desktop (Mobile First + Content First )
Graceful Degradation = Desktop -> Tablets -> Móvil

Manuel Galindez

student•

Progressive Enhancement = Móvil -> Tablets - Desktop (Mobile First + Content First )
Graceful Degradation = Desktop -> Tablets -> Móvil

Brayan David Navarro Rolon

student•

Todo depende del diseño o siempre es recomendable usar mobile first?

Jesús Ildefonso Muro Esquivias

student•

Es lo más recomendable usar mobile first , así obligas a tu cerebro a darle mayor importancia a lo que realmente quieres comunicar en tu sitio. Y en resoluciones mayores ya puedes mostrar información secundaria

Progressive Enhancement vs Graceful Degradation

Bienvenidos

Nuevas clases de Responsive Design: ¿Dónde quedo el curso anterior?

¿Dónde encuentro los archivos del curso?

Introducción a responsive design

Preguntas antes de la clase

¿Qué es Responsive Design?

Concepto de Viewport

Patrones de Diseño Responsive: Tiny Tweaks

Progressive Enhancement vs Graceful Degradation

Column Drop

Mostly Fluid

Layout Shifter

Off-Canvas

Preguntas y respuestas después de clase

Diseñando en Mobile First

Preguntas antes de la clase

Entorno de desarrollo

Automatización de tareas con Gulp.js

Index.html del proyecto

Normalize.css

Menu Navbar responsive parte I

Menu Navbar responsive parte II

Videos reponsive

Preguntas y respuesta de la clase

Conceptos avanzados de responsive design

Preguntas antes de clase

Video responsive

Patrones de diseño responsivo

Imagenes responsive

Fuentes de iconos

Usando Browserify para JavaScript

Optimizando para produccion

Preguntas y respuestas en clase

Contenido complementario

Tablas-Responsive

Lazy Loading De Imagenes

¿Cómo hacer Remote Debuggin?