Mejora progresiva (progressive enhancement)
Contenido
¿Qué es la mejora progresiva o progressive enhancement?
La mejora progresiva o también llamada progressive enhancement es una estrategia de diseño y desarrollo para sitios web que comienza con una base simple y va agregando mejoras paso a paso según el sistema lo requiera.
Se utiliza para diseñar sitios web capaces de aprovechar las bondades de los navegadores y dispositivos modernos, previniendo además los problemas de rendimiento y visualización en dispositivos menos potentes o navegadores más antiguos con funciones limitadas.
Diferencias de la mejora progresiva con la degradación gradual
En principio, la degradación gradual es el diseño opuesto a la mejora progresiva, puesto que va en sentido contrario: de lo más complejo a lo más simple.
Con esta estrategia los sitios web están orientados, inicialmente, a los navegadores más avanzados y, posteriormente, se van testeando con navegadores más antiguos y menos complejos para crear versiones funcionales que permitan trabajar con estos programas.
De este modo, las y los desarrolladores de front-end pueden diseñar una interfaz creativa con las últimas tecnologías, pero que a su vez garantice el correcto funcionamiento del sitio web en apps cliente más antiguas.
¿Cómo funciona la mejora progresiva?
La funcionalidad de la mejora progresiva es comparable a la de un auto, es decir, por lo general, cada modelo cuenta con una versión básica y simple pero que a su vez es funcional, y se va mejorando al agregarle características adicionales como un sistema de navegación, una transmisión automática o el enganche de remolque.
En desarrollo web, existen tres niveles de mejoras progresivas que se pueden aplicar en el diseño de un portal: HTML, CSS y JavaScript.
El primer nivel está constituido por un HTML limpio y semántico, lo cual permite a los agentes de usuario basados en texto, en el idioma u otros más antiguos que interpreten y muestren correctamente el contenido de una web.
El segundo nivel lo conforma el CSS. Cuando un navegador no es capaz de interpretar una propiedad CSS determinada, simplemente la ignora. Por lo tanto, al crear una base con estilos que todos los navegadores entiendan, se pueden agregar estilos adicionales con CSS para versiones más nuevas de navegadores que a su vez sean ignoradas por los navegadores más antiguos.
El siguiente código muestra un ejemplo simple de una mejora progresiva en CSS:
.main-content {
background: # 999;
background: rgba (153, 153, 153, .75);
}
Aquí podemos observar que el primer estilo establecería el fondo en un color gris, mientras que la segunda regla utiliza valores de color RGBA especificando un nivel de transparencia. Por lo tanto, si un navegador admite RGBA, sobrescribe el primer estilo con el segundo, de lo contrario, solo se muestra en color gris, o sea con el primer estilo indicado
El tercer nivel de diseño de sitios web está constituido por JavaScript. Con JavaScript se puede mejorar la usabilidad en una página web a través de la interactividad.
Otra forma de integrar mejoras progresivas es hacerlo a través de las “feature queries”, pues son similares a las media queries que se utilizan para crear páginas web responsive. Así pues, a diferencia de las media queries que consultan los tamaños de pantalla y otras propiedades del dispositivo, las feature queries verifican si un navegador web admite o no una función en particular.
Por ejemplo, esta podría ser su sintaxis:
@supports (display: flex) {
}
En este ejemplo vemos que los estilos de diseño que se agregan a esta consulta solo funcionan si un navegador admite "flex", es decir, estilos para flexbox.
Ventajas y desventajas de la mejora progresiva
Una razón importante por la cual la mejora progresiva es tan popular en la web es que ofrece excelentes resultados. Además, acceder al contenido desarrollado con mejoras progresivas es más fácil tanto para los usuarios y usuarias como para las arañas web.
Asimismo, la mejora progresiva obliga a las y los desarrolladores a planificar desde el inicio su proyecto como un sistema funcional, es decir, utilizando exclusivamente tecnologías web básicas, lo cual crea una base a la cual recurrir a medida que el proyecto se hace más complejo.
Incluso, cuando se lanza un navegador nuevo o una extensión del mismo, se pueden agregar más funciones al diseño sin tener que cambiar la versión original. Por el contrario, la degradación gradual, requiere que se modifique la versión original.
Otra ventaja de los proyectos de mejora progresiva es que también son fáciles de mantener. Partiendo de la base original, de los "principios originales" o first principles, las y los desarrolladores pueden concentrarse en secciones más complejas como la interacción del sistema, sin tener que preocuparse por lo básico. Asimismo, esta estrategia de diseño reduce el tiempo requerido para las pruebas de compatibilidad con diferentes navegadores.
Sin embargo, hay aplicaciones que necesitan una interfaz front-end muy compleja y que, por lo tanto, son difíciles de planificar en función de la mejora progresiva. En estos casos, lo normal es que no se pueda desarrollar una versión básica simple y, por lo tanto, las personas que navegan con dispositivos y navegadores más antiguos no disponen de una funcionalidad comparable.
Compatibilidad con mobile first
Los diseños web basados en la mejora progresiva son compatibles con el enfoque actual del mobile first. Ambas estrategias se desarrollan para sistemas menos potentes (smartphones) y, gradualmente, amplían las funcionalidades para adaptarse a dispositivos más complejos, como podría ser una PC de escritorio con un navegador web moderno.
Así pues, en el caso del diseño para móviles, se empieza por crear y estructurar su contenido y, a continuación se programa la web para adaptarla a dispositivos móviles con pantallas pequeñas y navegadores más antiguos.
De tal manera que, cuando este HTML básico se ejecuta en los dispositivos previstos, también se puede personalizar agregando propiedades CSS y media queries que puedan mostrarse en pantallas más grandes.
En este punto del proceso, también se consultan las capacidades de los navegadores utilizando la detección de funciones integradas para que la página ofrezca una mejor funcionalidad y usabilidad en cada versión del navegador.
En conclusión, si desarrollamos una versión simple para pantallas pequeñas y navegadores más antiguos, podremos crear más fácilmente un website para pantallas más grandes y dispositivos más modernos a través de mejoras progresivas.
Ampliar conocimientos
- https://developer.mozilla.org/es/docs/Glossary/Progressive_Enhancement
- https://abalozz.es/progressive-enhancement/
| Sobre las autoras y autores: |
 |
Contenidos relacionados