En el artículo anterior estuvimos analizando el Flujo de desarrollo de un diseño responsive y aunque quedó claro que es tema amplio, motivo de estudio en diferentes artículos que vamos a abordar durante el Manual de Responsive web design, comentamos que existían dos variantes comúnmente usadas para solucionar los problemas de compatibilidad entre los navegadores.

En el presente artículo vamos a expolar tanto la aproximación Progressive Enhancement como Graceful Degradation, aunque antes debe quedar claro que se trata de dos técnicas que no se usan solamente en el diseño responsive, sino que las conocimos ya cuando hace años comenzamos a explicar HTML5 en DesarrolloWeb.com.

Básicamente, lo que hacemos con estas dos aproximaciones, es solucionar las diferencias entre navegadores cuando interpretan un mismo código. Como sabes, a lo largo de los años se han ido presentando diferentes versiones de navegadores que son capaces de entender un conjunto diferente de etiquetas HTML, atributos de estilos CSS y Javascript. Ante las diferencias de navegadores, sus versiones y los sistemas operativos donde funcionan, y con la intención de hacer un contenido accesible para todos ellos, nos vemos en la necesidad de aplicar estas técnicas, que nos permiten que un contenido se vea correctamente en todos los sistemas posibles.

Ambas técnicas te pueden ayudar, incluso puede que prefieras en un mismo proyecto aplicarlas a la vez para solucionar diferentes problemas. Todo depende de tus preferencias o las necesidades del desarrollo. Ahondaremos sobre este punto al final del artículo. Pero comencemos describiendo las aproximaciones motivo de estudio de este texto.

Progresive Enchancement

Se diseña un sitio web centrándose en los sistemas más anticuados, y por tanto con menos soporte de las CSS. El CSS que utilizaremos será el básico que está disponible en esos viejos sistemas y simplemente nos preocuparemos porque el contenido sea accesible. A partir de ahí iremos implementando más complejidad al diseño, aplicando CSS que soportan solo los navegadores estándar actuales. Ese CSS no será soportado por sistemas antiguos, por lo que simplemente no les afectará. Como último paso aplicaremos CSS que se pueda ver en las versiones punteras de los navegadores, quizás sean las versiones experimentales que soportan un CSS que quizás todavía no forma parte del estándar actualmente recomendado para su implementación por la W3C.

En esta aproximación partimos de un mismo HTML y vamos agregando capas al desarrollo, preparadas para los distintos navegadores del mercado. A medida que nos centramos en un conjunto de navegadores más avanzado, vamos agregando nuevas capas que aprovechan las características más novedosas y que simplemente son ignoradas por los navegadores más antiguos. Esta técnica lo que produce es una "mejora progresiva" de los sitios web, visible en los navegadores que la soporten, manteniendo un producto de base accesible para los navegadores menos actuales.

Por concretarlo con un ejemplo, podrías comenzar en una primera etapa por estilizar tu HTML con CSS compatible con todos los navegadores históricos, probando el desarrollo en Internet Explorer 8, por ejemplo. Una vez tengas tu web modesta pero correcta, pasarás a un navegador más actual, por ejemplo Internet Explorer 9 o superior (IE 10, 11 o el que sea que desees focalizarte) o incluso en versiones actuales de Firefox o Chrome, aplicando reglas de estilos que sabes que no están soportadas en IE8 pero que sí forman parte del estándar presente. Después de ese segundo paso tendrás una web bonita, que se comportará fantásticamente en navegadores que soportan el estándar actual. Podrás ir un poco más lejos, en una tercera etapa, si lo deseas y aplicarás estilos CSS experimentales, que solo están disponibles en determinados navegadores más punteros, quizás utilizando los prefijos propietarios de las reglas de estilo que todavía no están en el estándar recomendado.

Graceful degradation

Esta aproximación recorre más o menos el camino en sentido inverso. Básicamente desarrollas el CSS de tu web (recuerda que el HTML es el mismo siempre) atendiendo a las características más actuales de los navegadores. Te centras en hacer un sitio web tal como a ti te gustaría que se viera, con todos los detalles de diseño que has pensado aplicar para tu asombrosa web. Durante esa primera etapa probarás tu web en un navegador actual, aplicando todo tipo de reglas, aunque sepas que algunas no se van a poder ver en navegadores o sistemas operativos anticuados.

Una vez estás satisfecho con el diseño que te ha salido y has visto que en las versiones de navegadores modernos se ve tal como deseabas, a continuación pruebas el sitio web en navegadores menos avanzados y realizas las tareas que sean necesarias para que el sitio se vea decentemente.

Esas tareas de adaptación de la web para sistemas históricos en ocasiones incluyen la instalación de algún script Javascript que permita que los navegadores antiguos entiendan características de las CSS que no son soportadas de manera nativa. Quizás incluso definirás estilos alternativos que deben aplicarse solo a los navegadores que no entienden los estilos que tú querías aplicar en un principio.

Como decimos, comienzas desarrollando tu web y probándola en un navegador actual, Chrome o Firefox son los principales candidatos, puesto que se actualizan automáticamente y por lo tanto es de suponer que tengas su última versión, pero también podrías hacerlo en Internet Explorer en versión 10, 11 o la más moderna que encuentres en este momento. Luego la vas probando en navegadores antiguos y vas solventando los problemas de visualización que vayas encontrando. Puedes probarla en una segunda etapa en Internet Explorer 9 y en una tercera en Internet Explorer 8 y así hacia abajo hasta donde quieras llegar.

¿Cuál es la mejor?

Los diseñadores más destacados apoyan más la aproximación basada en Progressive Enhancement porque opinan que los flujos de trabajo están más optimizados. Hay una lectura de estas dos prácticas en contraposición que es interesante y que debemos pensar.

Progressive Enhancement parte de la base de un diseño básico y accesible. A medida que se va disponiendo de tecnología superior somos capaces de añadir capas por encima al producto anterior, con nuevos estilos que solo se verán en los navegadores más modernos y avanzados.

Por su parte, Graceful Degradation ya comienza con un nivel de complejidad grande y el proceso de conseguir un diseño que se vea correctamente en navegadores antiguos se realiza muchas veces en base a parchear el desarrollo de manera que se adapte también a navegadores antiguos.

Bajo ese prisma podríamos decir que Progressive Enhancement mira hacia adelante en el flujo de desarrollo, mientras que Graceful Degradation empieza delante y mira hacia atrás. Teóricamente, cuando saquen en el futuro nuevos clientes web con nuevas características sería más fácilmente incorporadas en el diseño con una aproximación Progressive Enhancement, añadiendo simplemente una capa por encima a nuestro CSS. Por tanto, mirar hacia el futuro nunca está de más.

Algunos diseñadores son más radicales en este sentido y se oponen al graceful degradation bajo el argumento que los profesionales no deberíamos perder tiempo en solucionar los problemas derivados de navegadores antiguos, aplicando parches o "polyfills", porque eso provoca que los usuarios de navegadores obsoletos no se preocupen por actualizar sus sistemas.

Mi visión personal

Entre las dos aproximaciones comentadas, Progressive Enhancement o Graceful Degradation, en mi opinión personal no hay una que sea la mejor o la más adecuada. Insisto que esto ya es una opinión y que unos diseñadores o desarrolladores pueden pensar de una manera o de otra. Incluso puede haber profesionales que mezclen una y otra filosofía llegando a nuevos flujos de trabajo perfectamente válidos.

En mi caso, cuando desarrollo una web, hoy prefiero centrarme en navegadores actuales, diseñando como realmente quiero que se consuma la web y olvidándome de los navegadores antiguos. Aplico el CSS que realmente quiero que tenga la web y luego, cuando ya la tengo lista, la pruebo en Internet Explorer, en versiones antiguas, modificando aquellas cosas que son necesarias para que se pueda consumir correctamente, ya sean Javascripts o estilos CSS alternativos. Osea, prefiero implementar Graceful Degradation.

Yo personalmente disfruto más diseñando una web pensando en un navegador actual y luego me tomo la tarea no tan agradecida de "apagar fuegos", solventando los problemas de visualización de navegadores antiguos. Para que nos entendamos, es como comenzar la comida por los postres y luego comerte los platos que te gustan menos, quizás no sea lo mejor, pero es como más me gusta trabajar.

Además, no veo problema en mezclar ambas aproximaciones. Puedes haber creado el diseño de un sitio web siguiendo la filosofía Graceful Degradation y dos años después aplicarle por encima una capa nueva, con CSS pensado para navegadores, o versiones, que hayan aparecido recientemente, lo que sería Progressive Enhancement.

¿Y los tamaños de pantalla? ¿estas técnicas no aplican?

Como te habrás dado cuenta, todavía no nos estamos preocupando de los diferentes tamaños de pantalla, ya habrá tiempo de hablar de ellos en el Manual de Responsive de DesarrolloWeb.com. De momento esta aproximación queda más que nada en lo que sería un flujo de trabajo comúnmente aceptado.

No obstante, algunos autores también identifican las técnicas Progressive Enhancement / Graceful Degradation en relación al diseño adaptable. Lo hacen en el sentido de diseño "Mobile First" o "Desktop First", osea, si se diseña pensando en el móvil al principio y luego en ordenadores de escritorio, o bien se diseña primeramente para pantallas grandes y se va adaptando a pantallas pequeñas. En este caso "Mobile First" sería más próxima a la filosofía Progressive Enhancement y "Desktop first" más próxima a Graceful Degradation.

Sin embargo, no veo mucha relación de estos términos en este sentido, del diseño para distintos tamaños de pantallas. En este área no encuentro mucha discusión y hay un consenso prácticamente total en que la aproximación adecuada es "mobile first", de la que hablaremos más adelante con detalle.

Conclusión

Como consideración final insistir en que no todo es blanco o negro, cada diseñador o desarrollador debe conocer ambas aproximaciones para decidir cuál es la que se adapta a su modo de pensar o de actuar. Incluso puede que en determinados proyectos o aplicaciones web sea mejor una aproximación que la otra. Lo que todos coinciden, o al menos la mayoría de los grandes diseñadores, es que debemos centrarnos en adaptar los sitios para solventar aquellos problemas derivados del layout y no tanto adaptar los recursos estéticos para que una web se vea igual en todo tipo de navegadores.